Solved

HTML Emailers for smart phones

Posted on 2011-09-09
9
203 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Javascript Hashmap output 8 47
Tags from access to excel 3 32
Syntax Error 2 47
FIELDSETs and LEGENDs in email markup 1 14
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

863 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

Need Help in Real-Time?

Connect with top rated Experts

24 Experts available now in Live!

Get 1:1 Help Now