Free Responsive Email Template - Part I

With mobile on the rise and so many of our users inquiring about best practices for developing responsive emails, we figured it's a great time to offer up a series of free email templates to get you up and running as fast as possible. There are several approaches to responsive email designs. This particular template offers 3 different "layouts" which trigger based on the width of the screen. By default, it supports 1-3 columns and as you trigger each media query conditional statement, it converts to a one a column layout for easy reading on mobile devices.
If you already have an account with us or are a community member, you already have access to this template in our resources section! Simply log in and navigate to the resource center in the left navigation bar. If at any point you have issues with the download, contact our support team!

Template Details

When developing this template, our first order of business was to research the most common dimensions that are used in popular devices today. With that study, along with our own media query test we've identified the most common device widths to target.

The breakpoints we've selected for this template are as follows:

1. A width less than 480px for the iPhone and smaller smart phones.
2. A width between 481px and 640px for medium sized Android devices
3. A default dimension of 580px for tablets, web, and desktop email clients

What's interesting about the above dimensions is that the breakpoint for medium sized handheld devices is actually greater than the real-estate your email will get in most web and desktop email clients. For that reason, the default width for our template is set to 580px. This dimension is less than the media query dimensions that we've used for medium sized mobile devices.
You can mix and match each section of this layout and we tried to make it super generic because your needs will likely change over time.

This template has been tested in the following clients:

Android 2.3 - (vertical) Android 2.3 - (horizontal) Android 4 - (vertical) Android 4 - (horizontal) Android Gmail 2.2 - (vertical) Android Gmail 2.2 - (horizontal) iPad 5.0 - (vertical) iPad 5.0 - (horizontal)

iPad Gmail - (vertical) iPad Gmail - (horizontal) iPhone 4S (iOS 5) - (vertical) iPhone 4S (iOS 5) - (horizontal) iPhone 4S (iOS 6) - (vertical)

iPhone 4S (iOS 6) - (horizontal) iPhone 5 (iOS 6.1) - (vertical) iPhone 5 (iOS 6.1) - (horizontal) Kindle Fire 2.3 - (vertical) Kindle Fire 2.3 - (horizontal) AOL - Chrome 18 (Win) AOL - Firefox 12 (Win) AOL - IE 8 (Win) AOL - IE 9 (Win) Gmail - Chrome 18 (Win) Gmail - Firefox 12 (Win) Gmail - Firefox 3.6 (Win) Gmail - IE 8 (Win) Gmail - IE 9 (Win)

Gmail - Safari 5 (Win) Outlook.com - Chrome 18 (Win) Outlook.com - Firefox 12 (Win) Outlook.com - IE 8 (Win) Outlook.com - IE 9 (Win) Outlook.com - Safari 5 (Win) Yahoo! - Chrome 18 (Win) Yahoo! - Firefox 12 (Win) Yahoo! - Firefox 3.6 (Win) Yahoo! - IE 8 (Win) Yahoo! - IE 9 (Win) Apple Mail 4 Apple Mail 5 Apple Mail 6

Entourage 2004 Entourage 2008 Live Mail Lotus Notes 8 Lotus Notes 8.5 Outlook 2003 Outlook 2007 Outlook 2010 Outlook 2013 Outlook Express Thunderbird 13 Windows Mail

So how'd we do it?

1.) Media Queries

Here's the entire style block:

<style type="text/css">
   .ReadMsgBody {width: 100%; background-color: #ffffff;}
   .ExternalClass {width: 100%; background-color: #ffffff;}
   body  {width: 100%; background-color: #ffffff; margin:0; padding:0;}
   table {border-collapse: collapse;}

 
    @media only screen and (max-width: 640px)  {
      body[yahoo] .deviceWidth {width:440px!important; padding:0 4px;} 
      body[yahoo] .center {text-align: center!important;}    
    }
 
   @media only screen and (max-width: 479px) {
      body[yahoo] .deviceWidth {width:280px!important; padding:0 4px;} 
      body[yahoo] .center {text-align: center!important;}  
   }
 </style>

We then used the 'deviceWidth' class on all tables and images throughout. This resets the width for each element based on the width of the mobile device. You could add more media queries if you want - feel free check out our latest research for more breakpoint ideas.

2.) Floating Elements

The next challenge was creating floating elements that naturally stack when there's not enough room for them to float. Floating elements for email is rather tricky because several email clients do not support the 'float' property. Instead, we used the 'align' attribute within table elements.

For example:
<table align="left">
Simple enough right? Well yes and no. Whenever you 'left' or 'right' align tables in Outlook 2007, 2010, and 2013, you end up with extra table padding. So if you are trying to accomplish a pixel perfect layout, you might want to check out this Outlook padding work-around for getting aligned tables to match up perfectly. In the case of this template, we used percentage based widths for each floating table and in some instances we had to rely on the '<p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">' fix as defined in that blog post.

Conclusion

Obviously you will need to customize this template for your needs.  Just remember, you can keep it short and sweet for your mobile readers by hiding some elements within your layout using media queries. Both the Android and the iOS support the display:none property.
Hopefully this will save you some time and stress when creating your first responsive email!  Stay tuned for more creative solutions from Email on Acid.  Cheers and happy testing!