UPDATE 3/23/2016: Our new responsive email framework, Foundation for Emails has been released!
Download Foundation for Emails
Today, more and more emails are being read on mobile devices more than on desktop computers. Thanks to the popularity of the smartphone, the iOS mail client is now at the top of the heap. With so many readers viewing emails on mobile, we knew there had to be an easier way to ensure campaigns look swank on any device.
So much so that we recently jazzed up our own email campaigns, taking them to a responsive level. Since then, we've been flooded with tons of requests from others to help them with their email campaigns. As a result, we've put together a package of five responsive email templates that we're making them available on our playground page!
How We Did It
For this set of templates, we decided not to rely on media queries for responsiveness. This is because support for media queries is vastly different across email clients. Many clients, such as Gmail, don't support media queries at all.
Instead of throwing our hands up in the air, we decided to tackle the problem and make the templates as responsive as possible without media queries. Wait, you might be saying, "That's crazy?" Well, not as crazy as you might think.
And we totally didn't completely toss out media queries like last night's leftovers. After things were looking good with the more limited clients, we added in some media queries, like a dusting of seasoning, to enhance the display for email clients that do support them.
The Viewport Tag
Even though we're not using media queries, we still need a viewport tag in the header to ensure that the template will be rendered at the width of the device it's appearing on. Without this, for example, iOS will render the template at a default 980px width.
Setting Up the Fluid Layout
The first thing we needed to do was find a way to constrain the width of the template on a desktop, but make it 100% wide on smaller screens. Without media queries, this was a challenge.
Our solution was to designate one table cell as a container, and with CSS make it display as a block instead of a table cell. We then gave in a max-width of 600px. Since the container is displaying as a block, it automatically stretches to 600px, but when displayed on a narrower screen, it will scale down.
Stacking Columns
Some of our templates have two columns of content. This looks great on desktops, but on mobile devices we want these columns to stack on top of each other rather than side-by-side.
To accomplish this we gave each columns a set width, and floated them side by side. Since they are placed inside a container with a max-width of 600px, we gave each column a width of 300px. That way, when displayed on a large screen they will appear side-by-side, but they will stack vertically on screens narrower than 600px.
Responsive Email Template QA Chart
Here's a comprehensive list of the email clients we tested on, along with some known issues:
| Client/Browser | Supported | Issues |
|---|---|---|
| Gmail (Desktop) | ' | ' |
| Gmail (Mobile) | ' | If the same email is sent repeatedly Gmail will clip it, causing the layout to appear slightly wonky |
| Gmail (iOS) | ' | ' |
| Gmail (Android) | ' | ' |
| Yahoo Mail (Desktop) | ' | ' |
| Yahoo Mail (Mobile) | ' | ' |
| Mail (iOS) | ' | ' |
| Mail (OSX) | ' | ' |
| Email (Android) | ' | ' |
| Outlook 2003 | ' | ' |
| Outlook Express | ' | ' |
| Outlook 2007, 2010, 2013 | ' | ' |
| Outlook 2011 for Mac | ' | ' |
| Hotmail (Desktop) | ' | Headers are green. |
| Hotmail (Mobile) | ' | Body is 15px too wide to the right, padding issue. |
| Thunderbird | ' | ' |
| Sparrow (iOS) | ' | ' |
| Sparrow (Desktop) | ' | ' |
| Entourage 2004 | ' | ' |
| Entourage 2008 | ' | ' |
| Windows Mail | ' | ' |
| Live Mail | ' | ' |
A Final Word
Here at ZURB, we believe that everything we do has to consider the mobile experience. With these templates, we've made it easier to craft email campaigns that look great on a computer, or on-the-go.