Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

HTML Emailers for smart phones

Posted on 2011-09-09
9
Medium Priority
?
211 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 1600 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 400 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
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 1600 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 1600 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

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
This video shows how to quickly and easily deploy an email signature for all users in Office 365 and prevent it from being added to replies and forwards. (the resulting signature is applied on the server level in Exchange Online) The email signat…

876 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