Solved

HTML Emailers for smart phones

Posted on 2011-09-09
9
204 Views
Last Modified: 2012-05-12
Hi

I have an html email that renders fine but i want to create an email version that is otimised for smart phones.

This means i want to have all the images a ot less wide etc.
How can you send a seperate version of an html email to smart phones? or how can you tell a smart phone to use different (hardcoded in the html code) images to that of a standard desktop email client?

Thanks
0
Comment
Question by:coolispaul
  • 4
  • 3
  • 2
9 Comments
 
LVL 19

Assisted Solution

by:Bardobrave
Bardobrave earned 400 total points
ID: 36509471
You should use different .css files to design the html mail.

Then, when attaching the links to the css, on the mobile version add media="mobile" attribute.

This way that css will load only on mobile devices.
0
 
LVL 16

Assisted Solution

by:Easwaran Paramasivam
Easwaran Paramasivam earned 100 total points
ID: 36509489
0
 

Author Comment

by:coolispaul
ID: 36509547
Thanks

But if i have a hard coded image such as:

<td valign="top" width="650" height="100"><img src="image1.jpg"  /></td>

i cant change this with css (and background images with css arent reliable in emails) - so how can i change this to be a smaller version for smart phones?

Thanks
0
ScreenConnect 6.0 Free Trial

Explore all the enhancements in one game-changing release, ScreenConnect 6.0, based on partner feedback. New features include a redesigned UI, app configurations and chat acknowledgement to improve customer engagement!

 
LVL 16

Expert Comment

by:Easwaran Paramasivam
ID: 36509561
Have smaller version of image1.jip in your webserver and give it's absolute path in src tag.

Always mention width and height in %. Do not give in pixel.
0
 

Author Comment

by:coolispaul
ID: 36509582
thnaks, but when i send an email it could be read on a normal desktop or a smartphone

how will the desktop PC email client  know to display the larger image? and how will the smartphone know to display the smaller image?

I know what you mean when saying have a seperate CSS but with hardcoded images how do you give seperate instructions (is it possible)?

with regard to % instead iof pxels - that would distort the image would it not? the image would always be a fixed pixel size

Thanks
0
 
LVL 19

Accepted Solution

by:
Bardobrave earned 400 total points
ID: 36509741
Well, there is no way to load a hardcoded image separately for each platform because... uh... well, because it's hardcoded.

If you load the image through your server code or in any way, we can try to think some way to detect the device accessing and loading an image or another. But if you had it on your file written on steel and stone there is no way (at least not one I can imagine right now) to change it for mobile devices.

One usual way to solve this is to have two different directories for images on your server, one for standard devices and another for mobile (with the lesser images), then when you load an image you pass a parameter with the directory so, depending on the device accessing, it has a value for the normal directory or the mobile one.

Respecting % widths. You should use always % on your layouts. Of course if you state a % for an image, it could distort it's rendering. But if you don't give a width for an image it will always render at actual image's width, while all the rest of your % layout will shrink or expand depending on the device being accessed.
0
 
LVL 19

Assisted Solution

by:Bardobrave
Bardobrave earned 400 total points
ID: 36509753
The problem here is that when you send an email, it's send. And then it can be accessed from either type of devices, but your mail is now stored on your client mail server and out of you app control.

One solution could be to use some javascript inside your mail to, on mail load, detect the device and change the folder of the image. However, depending on the email client being used, javascript will probably not work.
0
 

Author Comment

by:coolispaul
ID: 36509892
ok thanks for all your answers

I guess there will be an alternative in the future as browsing emails on smartphones become more popular
0
 
LVL 19

Expert Comment

by:Bardobrave
ID: 36509987
Well, you always can store the mail presentation on your server as static pages, or compose them when your clients access a determinate url and send to your client an email with the url, so they receive a mail with a link and following they reach a webpage with the mail content, perfectly fitted for normal browsers or mobile browsers depending on what are they using to access the site.
0

Featured Post

Are your AD admin tools letting you down?

Managing Active Directory can get complicated.  Often, the native tools for managing AD are just not up to the task.  The largest Active Directory installations in the world have relied on one tool to manage their day-to-day administration tasks: Hyena. Start your trial today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
HTML &#0153 2 21
Diminish Pop-up  in 3 seconds 7 23
styling bootstrap grid system with CSS 2 8
Html Table looping 4 13
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question