How to build responsive emails

I was recently forced into the world of responsive email building. Having previously done responsive/mobile friendly websites and regular HTML emails, I figured it would be a fairly straightforward blend of the two.

Oh... no no.

The following is a combination of what I've got from other people, what I've learned, what I've figured out for myself. I'm trying to give specific details as many of the guides I came across were a bit high level. Hold on while we get techy.

Step 1: Design

Not so techy to start. The first thing is knowing what you have to build. Your idea of how the email should look on mobile isn't necessarily what the client was thinking, and the time and effort required to change it all around is much higher than for a website. Always get the full design approved first.

Step 2: Manage expectations

Clients usually believe statements to their extremes. For example, if we talk about responsive emails for mobile phones, they will assume that means it will work perfectly on all mobile phones. Just to clarify - it won't. Specifically, anyone using a gmail or other webmail app on their phone likely won't see the responsive version of your email at all, because those apps strip out the bits needed to make responsive work. Make sure that your client understands these limitations before you start.

Step 3: breakpoints

With websites, unless there's a specific requirement for it, I like to only have two versions - the large and the mobile. It makes the media queries more straightforward and I don't end up having to maintain three or four versions of the same site (catering for different versions of IE was already bad enough). The same goes for emails - don't have more than two versions or you'll soon have a headache on your hands. The small one should be 320px wide, the large one whatever the design is (usually somewhere between 600px and 800px).

Step 4: Required bits

You need three things to make a responsive email work across devices.

  1. A doctype at the top of your HTML - <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  2. This meta tag in your head - <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
  3. An inline stylesheet that contains this media query - @media only screen and (max-width:600px), screen and (max-device-width:384px), screen and (-webkit-device-pixel-ratio:3) {}

If you can't insert all of these into your email or your email platform strips them out, it's game over.

Step 5: the basics

HTML emails by nature require inline styles, which means you're going to need to use !important a lot in your media specific CSS.

Step 6: Show and hide

Hiding elements in the mobile view is pretty straightforward - make a .hide class with display:none !important; in it. Making table cells hidden in the normal view but shown in the mobile view is surprisingly not as straightforward. I've actually not found a reliable way of doing it yet - presumably even if the cell is hidden it still effects the table layout structure.

The best way I've found to make elements change or only appear for the mobile version is to hide the stuff you don't want and apply styles to an empty element (usually a div) that in the normal view is effectively invisible as it occupies zero height. Yes, embattled HTML email builders, at long last we have a medium that recognises and honours real CSS. You can put background images and padding in and min-height and all sorts. It's crazy.

Step 7: collapse into a single column

This was where it got tricky for me, but hopefully you'll have an easier learning curve. Despite having to build everything in tables for HTML emails, you can override the table styles to produce some single column effects, for example:


.cell-left {
    float:left !important;
    display:block !important;
    width:320px !important;
}

I found I had to do a lot of nesting to make this work properly i.e. have a series of TDs with this class, each containing another table. You'll also have to override some widths and make sure that all of your email is doing this properly, otherwise one element can muck up the whole layout.

Step 8: retina displays

Finally we come to the joy that Apple imposed upon the web development community a few years back - retina display. For HTML emails this means any image you want to look crisp needs to be twice the size it should be. Let's start with the basics. Here's the media query you need to match retina displays...

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {}

Or if you want to be sure, include some dimensions as well, such as

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) and (max-width:600px) and (max-device-width:384px) {}

For me, dealing with retina fitted nicely with dealing with mobile. Many of the images I wanted to show only on mobile by necessity were background images, so it follows that it's relatively straightforward to have another few lines in the media query above, that use double sized images for background. If you do this, remember to fix the height of the element and use background-size: contain. This will ensure your double res image is shown properly. Here's the detail:

  1. Say the original image is 50x50, inside a link
  2. For mobile, hide the image and set the surrounding link to display block, height 50px
  3. Apply a background to the link for retina, that is a higher res copy of the original image at 100x100
  4. Set the background size to cover, contain, or 100% - this will display the image at the correct size but it'll look much better on retina

Some random tips

  • In terms of knowing how long it'll take to build your fully responsive email, take long you think it will take to build your email without responsive and double it. Maybe triple it if you've not tried it before.
  • Get yourself a good testing system. Litmus is good, but by no means perfect or exhaustive. I'd recommend Litmus with a few actual devices.
  • Build your email section by section and test it as you go along. If something breaks it's often quite hard to figure out even which bit has broken.
  • The gmail app on the iphone doesn't like wide images and might shrink them, even if you've put in specific width and height attributes. If this happens the fix is to break them up into smaller images.
  • If you're trying to collapse a complicated row into a single column, remember to hide any unnecessary TD elements in the mobile view with your .hide class.

Further reading... good guide to it from litmus and a good reference guide to what's supported in various clients.

There. That's everything I can teach you about building responsive emails. Now never ask me to build one again.

Related

This article is tagged with