• 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.

    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!

    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.
  • You might also like

    No comments:

    Post a Comment

    Good day precious one, We love you more than anything.

Powered by Blogger.