/ >

Responsive Email Framework

Something I developed in my years as an email developer and have implemented for several clients. Its a bullet-proof framework, that can be added to any HTML email to give access to a series of CSS classes that will help emails adapt to a mobile world. There are many limitation to HTML emails, so its never going to be simply plug-and-play, but I have provided some guidance on how to adapt HTML and work with this framework to achieve great results.

Responsive Email Framework

In essence this is an email boiler-plate. It has no content, but comes with the outline of the email ready to have content and structure added to it. At the time of creation, it has all the fixes required for the email to work in all browsers and email clients if used correctly. I will endeavour to keep this up to date with the changing times.

There is some basic documentation here, but the best way to learn about the framework is to download the tutorial version of it which comes with example content, and comments throughout the code to explain what each part is doing and why.

Background

There are some major players in the email world that impose all kinds of constrictions on email developers. To start with, Outlook uses MS Word's HTML rendering engine (even they couldn't work ewith IE!), which means CSS, background and text (ultimately all content) behaves in a way we not anticipate from a normal web browser.

Then we come to gmail. Google, industry leaders in everything online, have unfortunately let themselves go with gmail. It has too many quirks to list them all, but the main issues are that it removes all style tags from the html document, meaning any mobile or desktop styles have to be made inline. Of course this means media queries are out in gmail, so any responsive email will just show the desktop version in the gmail ap on any phone. Worse than that, in a botched attempt to mend things of mobile users, the team at gmail have tried to implement their own forced responsive version of emails, which is of course automated, and ugly beyond belief. So there are ever-changing fixes to combat this.

Yahoo! bring their own issue as well. They support CSS, but they won't support media queries. This means all the mobile styles get applied even on desktop. Fortunately they do not support selectors that target attributes, so by using this for all the CSS selectors, it escapes this particular quirk fairly painlessly.

There are a lot more specific issues than these, many of which deserve their own articles which I will try to create. For now, hopefully this sets the backdrop for this responsive framework, and will hopefully make anyone using it aware that many of the weird and wonderful irregularities in the code are probably written with my arms tied behind my back rather than by choice (or mistake).

General Email Guidelines

  • Use tables instead of divs and HTML5 elements.
  • Use nested tables over rowspan and colspan.
  • CSS styles for desktop should be applied inline rather than using a style attribute. Gmail will strip out the entire style tag from your email, so all your styles will get lost unless you inline them.
  • Inline styles need to be applied directly to the element being styled - they will not get inherited in Outlook if you apply them to a top-level element only.
  • Background images will not work in Outlook in the default way. If you want to use background images, you can use the bullet-proof background tool from Campaign Monitor to help you generate the code for it. The down side of this is that backgrounds need to have a fixed height and width, and you can't use a background on top of a background. If you try to do it, you will see immediately in Outlook why it's not possible.
  • Anchor tags are inline elements by default. Unfortunately there is no way to over-ride this default behaviour in Outlook, so buttons must be done with tables containing an anchor, rather than styled anchors.
  • CSS3 and HTML5 are not supported by Outlook. Rounded corners and shadows can be done using images rather than CSS if they need to work here, or left to degrade gracefully if not.
  • Outlook 2013 automatically adds space to images smaller than 20px in height, causing excess, unwanted space to appear. To avoid this, add a style attribute to the parent table-cell which sets both the line-height and font-size to zero. 
    <td align="left" valign="top" style="font-size:0px; line-height:0px;">
<img src="img.gif" alt="" width="10" height="10" style="display:block" border="0">
/td>
  • Avoid using paragraph tags. As these cannot be set to a standard height using CSS, each browser and email client handles them differently, adding more or less space than required.
  • All table-cells should have their 'align' and 'valign' attributes declared, otherwise the alignment will default differently in different clients and browsers. IE for example, will center everything. 
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
  • Cellpadding, cellspacing and border around tables will render inconsistently across email clients, so should be set explicitly to 0 on all tables.
  • Table should have a width of 100% as a standard, as this will mean that the email will respond easily to any variation in content length and that it won't need to be reset for mobile. It also ensures that if you need to change any widths, you only have to do it on the top level element and all nested tables will just fill the space available to them. Table width can be numerically defined when required, or left out if you wish the content to dictate the width of the table, but 100% should be used in the majority of places.
  • Avoid shorthand for fonts and hex notation.
  • The hex notation for black (#000000) rather oddly renders as purple on Gmail. Instead, whereever black is required it should be set with the following hex code: #000001.
  • Most email clients and browsers display fonts and line-height slightly differently. Allow enough space around text so it can expand without breaking sliced images apart. The Gmail app is notorius for scaling text and images very differently - something on 2 lines on desktop could appear on 4 lines in the Gmail app, so fixed layouts are not ideal.
  • Images should have style="display:block;" border="0" applied to them to avoid blue border on IE and space being added around the image in Gmail and other clients.

Responsive Email Guidelines

  • Use floated tables to create side-by-side content on desktop that stacks on mobile. Trying to make td's block level elements will not work everywhere.
  • Use align="left | right" to float elements instead of style="float:left | right;", as this will work in older clients and has the same affect in modern clients.
  • Any floated elements inside a table-cell with align="center" will not float on iPad. This should be avoided.
  • Outlook won't float tables side-by-side when their total width takes up 50% of the available space. Around 48% for each table seems to work, nut the best way to avoid this issue is to float the first table left, and the second table right and create a natural gap between the 2 by calculating their width to be less than the total space they occupy. For instance, if the space is 400px across, and the tables need a 10px space between them, theiy would each have a width of 195.
  • Outlook also won't float tables when they are on top of a background-image using the bullet-proof background hack mentioned above. The simplest way around this is to open and close a table cell around each table, but make this only visible to Outlok by using conditional formating. Careful that you don't don't break your table structure when you do this though.
    <table width="100%" align="left" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="left" valign="top">
            <table width="200" align="left"...>
                <tr>
                    <td align="left" valign="top"></td>
                </tr>
            </table>

<!--[if gte mso 9]>
    </td>
    <td align="right" valign="top" >
<![endif]-->

            <table width="200" align="right"...>
                <tr>
                    <td align="left" valign="top"></td>
                </tr>
            </table>
        </td>
        </tr>
</table>

Framework Class Outline

MainTable

Class to set the width of the outermost table of mobile design. Use this on outer fixed-width tables ONLY. Anything inside this should use be 'width-100'. MainTable can be set to 100%. In px, it is not advised to make it any wider than 320px to avoid iPhone scrolling. It's a separate class so that a fixed width can be applied if required and it won't affect inner table alignments. Defaults to 100%.

<table width="650" align="left" class="MainTable" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="left" valign="top">
            <table width="500" align="left" class="width-100" cellspacing="0" cellpadding="0" border="0">
                <tr>
                    <td align="left" valign="top"></td>
                </tr>
            </table>
        </td>
    </tr>
</table>

drop

Resets any elements that are floated on desktop, making them and any child elements 100% in width. This is really useful for section which include fixed-width tables, buttons etc, as they all immediately respond and go to 100%.When you do not want child elements to respond in this way, use "block". It does the same thing, but only to the element to which it is applied

<table width="200" align="left" class="drop" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="left" valign="top"></td>
    </tr>
</table>

block

Similar to drop, but to be used when you do not want child elements to be affected. It does the same thing, but only to the element to which it is applied.

<table width="200" align="left" class="block" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="left" valign="top"></td>
    </tr>
</table>

width-100

Set the width to be 100% on mobile. Should be used on all tables that need 100% width except the outermost table, where MainTable is more appropriate.

<table width="200" align="left" class="width-100" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="left" valign="top"></td>
    </tr>
</table>

width-[90 | 80 | 70 | 60 | 50 | auto]

Set the width to be a percentage based on the class name.

<table width="200" align="left" class="width-50" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="left" valign="top"></td>
    </tr>
</table>

padding-[0 | 5 | 10 | 15 | 20 | 30]

Resets padding on all sides to be the number of pixels in the class name.

<td align="left" valign="top" class="padding-15">Content here receives 15px of padding all round.</td>

padding-horz-[0 | 5 | 10 | 15 | 20 | 30]

Resets padding on the left and right sides to be the number of pixels in the class name.

<td align="left" valign="top" class="padding-horz-10">Content here receives 10px of padding on the left and right.</td>

padding-vert-[0 | 5 | 10 | 15 | 20 | 30]

Resets padding on the left and right sides to be the number of pixels in the class name.

<td align="left" valign="top" class="padding-horz-10">Content here receives 10px of padding on the left and right.</td>

padding-[left | right | top | bottom]-[0 | 5 | 10 | 15 | 20 | 30]

Resets padding on the side specified in the class name to be the number of pixels in the class name.

<td align="left" valign="top" class="padding-bottom-0 padding-left-20">Content here receives 0px of padding on the bottom and 20px of padding on the left side.</td>

font-size-[10 - 30]

Change font-size on mobile. Line-height is also changed to be 120% so that fixed pixel line-height do not scale beyond their line-height.

<td align="left" valign="top" class="font-size-20" style="font-size:30px; line-height:32px;">Font size is 30px on desktop and 20px on mobile.</td>

hide

Hide the element and all descendants on mobile.

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr class="hide">
        <td align="left" valign="top"></td>
        <td align="left" valign="top"></td>
    </tr>
    <tr>
        <td align="left" valign="top"></td>
    </tr>
</table>

show

Show the element and all descendants on mobile.

<table cellspacing="0" cellpadding="0" border="0" width="100%">
    <tr>
        <td align="left" valign="top" class="show" style="display:none; font-size:0; line-height:0; visibility:collapse; max-height:0; height:0; mso-hide:all;">Some text only for mobile.</td>
        <td align="left" valign="top">Some text for all versions.</td>
    </tr>
</table>

bold | no-bold

Add or remove bold from text on mobile.

<td align="left" valign="top" class="no-bold" style="font-weight:bold;">Bold on desktop, but not on mobile.</td>

no-background

Remove backgrounds on mobile.

<td align="left" valign="top" class="no-background" background=".../bg.png">Has no background on mobile.</td>

no-border

Remove borders on all sides on mobile.

<td align="right" valign="top" class="no-border" style="border:1px solid #000001;">Has a border on desktop but not on mobile.</td>

align-right

Make content right aligned on mobile.

<td align="left" valign="top" class="align-right">Left aligned on desktop, right aligned on mobile.</td>

align-left

Make content left aligned on mobile.

<td align="right" valign="top" class="align-left">Right aligned on desktop, left aligned on mobile.</td>

center

Center content inside the element the class is applied to.

Note: If a floated element needs to be centered, the center class will need to be applied to the floated element as well as it's parent. Doing this will allow the framework to reset the float.

<td align="left" valign="top" class="center">Text here is left aligned on desktop and centered on mobile.</td>

Other Resources:

There's no more content down here, what's with the crazy scrolling...

contact Me