05

May

2014

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.

  • jennyw

    I'm rather new to this so forgive me if I seem to be asking silly questions. Most of the emails we put together at work are created with 2 sometimes 3 images side by side to make up a total width of 610px. I have tried applying this method to one of our emails and cannot get it to work.
    Could it be that this wont work for this type of layout?

  • http://notagrouch.com/ Oscar Gonzalez

    It's ironic that this solution is pretty close to perfect but it doesn't exist within your email service for us as clients. Shouldn't you have integrated this into our email systems by now?

  • http://notagrouch.com/ Oscar Gonzalez

    I just saw your response @tomkulzer:disqus, thanks! Well they are mobile friendly, but responsive... not sure. I haven't explored it too much, because I mostly use the plain text or drag & drop builder and plain text. But I remember having to pinch and zoom and scroll around to be able to see the content on a template-based email in the past and that's why I went on the search for a solution (like the one posted in this blogpost), but then it is too much trouble so I just went back to plain text. Happy with that. And thanks for the response!

  • http://www.whatsonmybrain.com/ Josh Houghton

    How do we use this code with the Plain Left Aligned theme in Aweber? Every time I send an email using that theme the lettering is super small when I read the message in Gmail. I'm not a coder so is there anyway you can provide instructions on how to make this work?

    Thanks

  • Elijah Lazkani

    Hi Josh! All of our templates are already responsive, so you should not need to implement any code changes. However, if you're noticing the text is small on mobile, it is likely because changes were made to the text size directly in the editor. These changes will be prioritized over the template code. I'll have someone on our customer solutions team reach out to you to offer additional assistance.

  • http://www.whatsonmybrain.com/ Josh Houghton

    That would be great if you could have someone reach out. I typical like the email text to show up as 15 font size on desktops. So I usually have to change to it to 15, but when I do, as you said it causes the font to be very small when reading the emails on mobile devices, iphone, etc.

    So if someone could reach out to me that would be great. Really need to get this figured out somehow 🙂 Thanks for taking the time to reply