Solved

HTML Emailers for smart phones

Posted on 2011-09-09
9
202 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
Comment Utility
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
Comment Utility
0
 

Author Comment

by:coolispaul
Comment Utility
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
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 

Author Comment

by:coolispaul
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

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.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

772 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

15 Experts available now in Live!

Get 1:1 Help Now