Free Responsive Email Template

With mobile here to stay 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 across most major email clients.

So how’d we do it?

1.) Media Queries

Here’s the entire style block:


   .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;}	 
   }
 

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:

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 ‘

‘ 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!

We’ve tested this template thoroughly and we trust it, that being said when it comes time for you to update it with your content, you’ll need to test it again. Any number of little changes can have massive consequences in the world of email. That’s why we’re offering you a 7 day free trial to test in Email on Acid.

Comments on this Blog

Comments on this blog are now closed, but please feel free to contact us with questions about this template, or post questions in the forum.

Notice: This blog post is intended for educational purposes. The materials used, including but not limited to, artwork, research, coding techniques, and the overall layout are to be considered ‘derivative’ and in no way do we intend to infringe on any unknown copyrights. We give our utmost respect to the millions of designers and developers who continuously inspire us to learn and create.

If you’d like to obtain rights to use any of the fonts that where included in the artowrk of our template, they are availible for purchase online: Hand Gothic, Thirsty Rough, Thirsty Script, Veneer.

  • Free Download

Enter your email here.

We’ll reply back with a link to download the template.

Email Address:

About The Author

Leave a Reply