Coding Responsive Emails That Work

By: May 5, 2014

Working responsive code into your emails.

mobile responsive emails
Responsive emails are designed to scale down and re-arrange content in smaller screen sizes.  This is done primarily by first determining the size of the screen with a CSS media query, then applying sets of specific CSS styles based on these screen sizes.

This works great for web site design, but comes with serious limitations in email design.  The main issue is that not all email clients fully support CSS, let alone media queries.   There are a lot of promising 'responsive email' frameworks, but while testing these we found that the boilerplates didn’t hold up in Outlook or Android Mail apps, mostly breaking the design, making the message unreadable, and sometimes even making the entire email blank.  We found a lot of hype, but nothing that truly delivered - so we decided to make our own.

Not all email clients are created equal, making coding a responsive email more of an uphill battle than it should be.  Select email clients now support media queries and the growing 'responsive' trend can now carry over into your emails.  For email clients that don't support media queries at all, this post offers a solution that will scale down your images and the width of your email regardless of their varying levels of CSS support, providing a smooth email reading experience no matter where the message is being viewed.

If you're looking to create a responsive email that works across all mail clients, across various devices, screen sizes, and resolutions, then we've got a great base code for a responsive email (that works everywhere) to share with you.

How we did it

We wanted something that would work in mobile apps, mobile browsers, desktop email clients and desktop browsers. There are a lot of scenarios to accommodate and we didn't want to sacrifice any parts of our customers' designs.  We decided to start simply, using a plain bare-bones email and build slowly.

We weren't interested in designing emails that solely rely on media queries, since media queries aren't supported everywhere.

Litmus provides an excellent and up-to date list on media query support.

The only responsive part of the email that relies on media queries is text size due to this constraint.  Meaning your text will get larger on small devices where it can, and the email will remain readable and constrained to the width of the device for any mobile reader.  The layout is fluid and the images scale at 100% of the outer lying container. The Outlook versions always stay contained at 600 pixels and centered.

This works on mobile applications such as the native iOS mail app,  Android Mail, Outlook’s mobile app, and Gmail’s Android and iPhone Apps.  For desktop, this email works in Apple Mail 5/6/7,  Outlook.com, Outlook 2007/2010/2013, Yahoo! mail and Gmail.

The simplified responsive code

Fluid layout is key!

Laying out the email with percentage widths was key.  Set the opening table to 100% and set a max width of 600px or your desired max-width.

Outlook doesn’t support max-width so it’s important to set a conditional comment to compensate for this.  Otherwise, your email will go to 100% of the container window, which is way too wide.

What if my images are over 480px wide?

To force images to scale no matter what size the device, images need to be bound with the following CSS:

img {width:100%; height:auto;}

What about Outlook?

<Insert collective sigh here>

Outlook is email design's notorious enemy. But its high numbers of users make it impossible to ignore.  To ensure this email works in all versions of Outlook we've inserted conditional comments in the outermost table. You’ll notice this at the top two beginning tables, inside of comments.

These are not nested, but are rather separate opening table tags for the two different scenarios (Microsoft Office and Not Microsoft Office).

<!--[if !mso]> Is for anything not Microsoft office.  This means Microsoft Office programs can not render anything inside of that comment.<!--<![endif]-->

<!--[if gte mso 9]> is for anything specifically Microsoft Office (Outlook 2013 and lower, Outlook App, Outlook.com) and nothing else.  Meaning any program aside from Microsoft Office can not render code inside of that comment.<![endif]—>

You can close the tables out together at the bottom with a single </table> tag .

Now we can open the table with one table tag specifically for Outlook and a separate table with a width 100% everywhere else.

Conditional commenting is not a definitive solution and I wouldn’t recommend using this on websites. However, with the current state of responsive emails being as it is, we could not have achieved this at all without conditional comments.

Don’t rely solely on media queries to do your responsive legwork

To make an email that truly looks great in all devices, don’t rely only on media queries just yet, at least not for layout purposes.   Stick to fluid layouts and use media queries only to bump up padding and optimize text-size.  Let the conditional commenting and image widths do the rest of the work for you.