Why can’t I get my HTML email to look great on Android devices?

Newsletter on AndroidEvery 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:

@media only screen and (max-device-width: 480px) { ... }

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

Posted by Ros Hodgekiss

8 Comments

  • Elliot Ross
    16th February

    Great article Ros - do you know how popular the Gmail for Android app is, vs. the native mail app?

  • Ros Hodgekiss
    17th February

    Hi Elliot, not at present, however we’d be keen to run these numbers in our next update to the email client popularity report. That said, we figure Gmail for Android is fairly popular, given the questions our support team receives. :)

  • Jordan Walker
    17th February

    Could you set the meta viewport content to width = device-width the initial scale to 1, and the maximum-scale to 1?

    The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

  • Ros Hodgekiss
    17th February

    Hi Jordan, the issue with meta tags is they tend to get stripped out of email content in Gmail. It’s well worth a try anyway (and we should do it soon), but I have a sinking feeling that this will be the case.

    Gmail for Android does try to automatically adjust the viewport size as it sees to be appropriate, but sometimes this results in the text column being narrowed to fit the viewport, while graphics stretch outside of the visible area.

    There’s more testing to do here, so watch this space!

  • Alex I.
    6th March

    Any news on getting media tags working in Gmail?
    “Gmail for Android does try to automatically adjust the viewport size as it sees to be appropriate, but sometimes this results in the text column being narrowed to fit the viewport, while graphics stretch outside of the visible area. “

    This is the issue I’m constantly getting!

  • Ros Hodgekiss
    6th March

    Hi Alex, like most email clients, the workings of Android to Gmail are a mystery to us. Hopefully they’ll start supporting @media queries in the future, but we won’t know until it happens on their end. Keep an eye on this blog and we’ll be sure to keep you posted on the latest :)

  • Regina Filangie
    16th March

    first line…“overwheming” odds.  oops, typo.

  • Ros Hodgekiss
    16th March

    Thanks for the heads up, Regina - all fixed! :D

Sign up for free.
Then send campaigns for as little as $9/month

Create an account