Blog

Every now and then, we receive a mobile email question that goes along the lines of, "I've done everything to get my HTML email to look right on mobile devices. So why does it still fall apart on my Android handset?"

Aside from the fact that there are no guarantees that any HTML email design will adapt nicely from one email client to another, there are two distinct issues that give email design for Android a bad name. We'll look at both and how you can do your best to tackle them.

Gmail for Android doesn't heart CSS

We may have been responsible for disproportionally raising everyone's hopes about CSS support on Android devices when we said that "Android is powered by WebKit. WebKit has great CSS support!"

While Android's default email client and browser do a superior job at rendering HTML email, the Gmail app for Android is undoubtedly popular... And sadly, shares the same quirky CSS support as Gmail on the web.

If you've created a responsive design (or used our template builder) and a client pipes up, saying that they can see the 'full' or 'desktop' version of your email newsletter, chances are that they are viewing it in Gmail for Android.

We've also seen issues where columns of text will automatically get 'narrowed down' to fit the viewport, but large images (say, a header banner) will blow out to the right, creating a really awkward flow when reading the email.

What it boils down to is a combination of Gmail a) stripping out @media queries and offering shoddy CSS support. There's often very little that can be done to overcome these email client limitations from a coder's point of view, but you can alleviate the pain.

I've got 99 viewports, but 480 x 320 ain't one

When targeting mobile devices, we usually recommend using a @media query like:

That's all good for iPhones and many others, but how about handsets and tablet devices with viewports that exceed 480px in width when in either portrait, or landscape orientation?

As Stephanie Rieger points out in 'The 'trouble' with Android', she and others have identified over 500 screen sizes across the Android family of devices. The problem of designing for an abundance of sizes is compounded by unpredictable zoom levels on each device make and model. As Stephanie points out, these can potentially trigger @media queries, even when they're not desired - like when viewing an HTML email on a tablet device.

How can we optimize our email designs for Android devices?

Despite what seems like overwheming odds against getting your design to look great in one or any Android email client, there are ways you can make your message readable, if not presentable when under the pump. Here are a couple of 'em.

Use a fluid layout to adjust to any viewport size

Although not always a silver bullet, designing with percentage-width, over fixed-width elements (ie. table cells, images) can improve readability and reduce display quirks across a range of email clients and devices. As Stephanie notes in the earlier post:

"Designing to fixed screen sizes is in fact never a good idea…there is just too much variation, even amongst ‘popular’ devices."

While fluid layouts should be applied with both caution and lots of testing, we've seen some examples where they've worked out pretty well. A good fluid layout can even potentially remove the need to add width-specific @media queries to your HTML email code.

Stick to a one-column layout

Even in worst-case situations where the text has been zoomed/resized, but not the images or surrounding table cells around it, one-column table layouts have always come out best in terms of usability and readability. When possible, keep the text large and layouts simple.

Find out which CSS properties work in Gmail for Android

Thankfully, you are not alone in your noble quest - we've found out which CSS properties are supported by Gmail for Android and documented them for you. You can say farewell to nice bulleted lists, but staples like margin and padding still work fine.

Embrace the chaos

The final word is that you'll almost never get an email newsletter to look pixel-perfect in all conditions. Given the variety of devices and email clients out there, your focus should be equally on graceful degradation and managing expectations, as it is on making a design beautiful in WebKit-powered clients. Sometimes there just isn't a code solution for every mobile quirk - in the interests of preventing potential terse calls, suffering and all-nighters, it's important that your clients understand this, too.

We couldn't let the day pass without a love note to all our friends, readers and customers. Yes, that's you. Thank you so much for making Campaign Monitor what it is today - a solid email marketing app for tens of thousands of designers and their clients. Thank you lending us your support, sending in your feedback and hanging in there during the rough patches we've had. Can you believe that we've been together for over 7 years already?

We've got some pretty exciting changes coming up around the corner, so hopefully we can do the disorganized partner thing and pass off our next release as a late Valentine's gift... We've all been there before, right? Right, fellas...?

Thank you everyone - as us Aussies would say, 'we love youse!'

As a bit of a follow-up to our earlier post on Gmail turning your black-colored links blue, its come to our attention that in some instances where Gmail doesn't like a CSS property, it strips it out, as well as all inline styles surrounding it. We first came across this when a customer used box-shadow to jazz up their design... Only to find that margins, padding and more were disappearing as well. In fact, the entire style="..." attribute and contents had been removed altogether.

To work around this, we tried a little trick which has previously prevented Gmail from stripping CSS from designs, namely appending properties with !important;. For example, in the box-shadow example, we suggested using:

The result is that while box-shadow (and vendor-specific variants) are stripped in Gmail only, the surrounding CSS styles are preserved. As you can imagine, this means the difference between the layout displaying without a nice shadow effect and the same layout falling to pieces, devoid of all CSS. Using this technique, you can also try using other gracefully-degrading CSS3 properties without fear, too.

Thanks to Lev from Russia for pointing this out to us. We've observed a couple of subtle changes to how Gmail renders HTML email as of late - including rather unexpectedly supporting background-image after never doing so previously. Gmail, as opaque in its workings as it is, reminds me of one of Heraclitus' more famous teachings - nothing endures but change. Just when we thought we knew how to safely code for email, Gmail just goes ahead and overrides our CSS, or strips it out altogether.

Has Gmail noticeably changed how it displays your HTML email campaigns? Let us know about it below.