Solved

HTML Emailers for smart phones

Posted on 2011-09-09
9
206 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
HTML INPUT 6 39
Word Press Fixes to Google Speed Test Issues 2 50
Making an unordered list with background-image responsive 8 25
Check for Numeric Phone Field 14 48
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

752 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