Preview your email in the most popular email clients and mobile devices.    Try it for FREE!

A CSS Template for Developing HTML Emails in Mobile Devices

Posted July 26, 2011 by Michelle Klann

Email Testing RSS Feed Email Test on Twitter Email Preview on Digg Email CSS on Linked In Email Simulator on Stumbled Upon

With the recent increase in mobile email open rates, it makes perfect sense that you'd want to design your email with each of the most popular devices in mind.

In a recent article: Media Queries in HTML Emails, we explore which devices support media queries. To take it a step further, here's your play by play approach to developing your email for the iPhone, iPad, and Android devices.

First we need to set up your media queries to detect the user agent:

<style type="text/css">
@media only screen and (max-device-width: 480px) {
    /* Here you can include rules for the Android and iPhone 
    native email clients. 
    
    Device viewport dimensions are as follows
    Iphone - 320px X 480px - portrait, 480px X 320px - landscape
    Android - 350px X 480px - portrait, 480px X 350px - landscape
    (These are average dimensions, the Android OS runs on several different devices)
    */
}		
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px){
    /* Here you can include rules for the iPad native email client. 
    Device viewport dimensions  768px x 1024px - portrait, 1024px x 768px - landscape
    */
}
</style>

Important: I have included some notes in this snippet but be sure to strip out all of the CSS comments to avoid getting blocked by SPAM filters.

What happens next depends on your layout.

As a general rule, it's better to add "bells and whistles" to your media queries which optimize your layout in mobile devices. In other words, resize some images, text, and maybe even throw in a few background images for good measure.

However, if you want to get really crazy, there is one more option: Let's say you have a three column layout and you want it to appear as two columns in the iPad and one column in the Android & iPhone. To do this, you could show and hide container DIVs depending on the device.

I tested this out and Lotus Notes 6.5 and 7 were the only clients that do not support the "display" property, instead they display all DIVs as "display:block" by default. However, if you feel that your open rates in mobile devices outweigh the risk of leaving old versions of Lotus Notes in the dust, here is a working example for you:

<style type="text/css">
@media only screen and (max-device-width: 480px) {
    body[yahoo] #smallScreen {display:block !important}
    body[yahoo] #desktop {display:none !important}
}	
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)  {
    body[yahoo] #largeScreen {display:block !important}
    body[yahoo] #desktop {display:none !important}
}	
</style>

</head>
<body yahoo="fix">
    <div id="smallScreen" style="display:none; color:#FFF; background:#000;">
    	This is a Small Mobile Client
    </div>
    <div id="largeScreen" style="display:none; color:#0F3; background:#FFC;">
    	This is a Large Mobile Client
    </div>
    <div id="desktop" style="display:block; color:#00F; background:#3F3;">
    	This is a Standard Desktop Client
    </div>
</body>

There are a few downsides to this approach. First, you might end up having to duplicate some content here and there. Secondly, even though you are hiding two DIVs in this example, the email client will still have to load up all of your HTML and assets. So you might consider reusing all of your images in each instance to control the overall file size of your email. To be more specific, let's say you are using an image at full size for desktop clients, just resize that same image for mobile devices using CSS within your media query. A big thanks to Jeff Doan for bringing this loading issue to our attention on Twitter!

Update October 14, 2011
It was just brought to our attention that Gmail does not support the inline display property if the value is set to "none". Here's the forum thread and a possible work-around if you are determined to show/hide specific elements for desktop vs. mobile devices:Hiding content from desktop view, but showing it on a mobile device

As you may know, Yahoo! Mail ignores the media query conditinal statement and reads your styles as if they are outside of the query. So for this example, I am using attribute selectors in each media query declaration. A big thanks to Campaign Monitor for posting this fix a few months back! Here is our follow-up article which further explains the Yahoo! strategy I used above.

As a side note: the Android device does NOT support class declarations in embedded CSS outside of the media query. Keep that in mind as you construct the rest of your embedded CSS and use IDs or type selectors whenever possible. Here's more on that topic.

Comments

buy anabolics steroids online pic
buy anabolics steroids online
Good day! This post couldn't be written any better! Reading this post reminds me of my good old room mate! He always kept chatting about this. I will forward this write-up to him. Fairly certain he will have a good read. Many thanks for sharing it on http://www.emailonacid.com !
Posted 01/18/2012

novius pic
novius
Very good article !.. But there are a solution for Gmail application ? Because it doesn't support css in <style> balise (perhaps inline style work ?)... So the effect of media query doesn't work ... thanks a lot ! wink
Posted 03/29/2012

david pic
david
this is not working on Gmail and for mobile Android
and Iphone
Posted 08/15/2012

JP pic
JP
Sorry .. but if i understand good, it does not work on gmail. It does not work on android device. It does not work on iPhone.

So where it works ?
Posted 08/29/2012

AJ pic
AJ
For a desktop version of the email, I have a 2 column layout in the main content region. If I have a paragraph in the left column and an image in the right column, would I be able to move the image under the paragraph (column 1) if the max width is 480px? I know this is easy to do if you have a div-based layout but in email, that is not supported. We have to code using tables for the email layout. Thoughts?
Posted 12/23/2012

SEO Forum Posting pic
SEO Forum Posting
Hi, thanks for your post but Your idea does not go with gmail. Would you please re-write another subsequent post on gmail template. However it goes with other devices.
Posted 12/07/2013

Comment via our Blog

Name:
Email:
Location:
URL:

Comment:

Remember my personal information
Notify me of follow-up comments?

Please enter the word you see in the image below:

x
Sign up for our Newsletter

And get updates on the latest email tips, tricks and hacks!