Browse by...
Home Resources 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:

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

This blog provides general information and discussion about email marketing and related subjects. The content provided in this blog ("Content”), should not be construed as and is not intended to constitute financial, legal or tax advice. You should seek the advice of professionals prior to acting upon any information contained in the Content. All Content is provided strictly “as is” and we make no warranty or representation of any kind regarding the Content.
Straight to your inbox

Get the best email and digital marketing content delivered.

Join 250,000 in-the-know marketers and get the latest marketing tips, tactics, and news right in your inbox.


Get started with Campaign Monitor today.

With our powerful yet easy-to-use tools, it's never been easier to make an impact with email marketing.

Try it for free