A CSS Template for Developing HTML Emails in Mobile Devices


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

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}

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

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”. You must instead use “display: none !important;”.

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.

Author: Email on Acid

The Email on Acid blog is on a mission to share email best practices, industry news, and solutions to most annoying email client bugs. Plus, we like to have a little fun along the way. Learn how to join the party and contribute to our blog.

6 thoughts on “A CSS Template for Developing HTML Emails in Mobile Devices”

  1. 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 https://www.emailonacid.com !

  2. 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 ! 😉

  3. 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 ?

  4. 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?

  5. 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.

Comments are closed.

Free Email Goodies