Guide: Email template mobile optimization

As more and more of us open our emails on mobile devices, a question we are increasingly asked is “How do I make my email look better on mobile?”.

The easy answer is to use one of our in-built templates. You can load these in and modify them to make them match your brand.

However, if you have developed your own or inherited one, then read on…

Why mobiles are difficult to work with

There are plenty of things that can go wrong in an email when viewing on mobile: squashed text, giant images or sometimes total template collapse.

Unfortunately, whereas you can often make an existing landing page more mobile-friendly, for broadcast emails we don’t have as many options open to us.

1. Many mobile email clients ignore CSS rules. So we can’t just add a few rules to manipulate columns and rearrange content
2. Javascript will most likely not run
3. Email templates still need to be built around HTML tables (<table>, <tr>, <td> and so on). These are more rigid and difficult to work with than the div elements we prefer to use on web pages, but are required since some clients, such as desktop Outlook, do not display them properly
4. Email clients vary far more greatly in the way they interpret HTML than their browser counterparts
5. How mobile-friendly an email template is is rooted in the structure. Widths, column spans and other elements that are difficult to modify later without running the risk of breaking the whole thing are the main tools for mobile optimization.

A basic structure

To cater for desktop email clients, we usually suggest a basic width of around 600px. Although many screens are wider, if you stick to this then you can build the rest of the email template based on that width without having to worry about it expanding too much.

We don’t have that luxury in the other direction: we need to make sure the email can get squashed onto a mobile screen and still look OK. First we need to get a solid structure in place. For instance something like this:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tbody>
    <tr>
      <td align="center">                        
        <table style="max-width: 600px;" border="0" cellspacing="0" cellpadding="0" width="100%">
          ...

The outer table will stretch to the maximum width allowed by the email client. The align=”center” attribute on the table cell will center the email, so if there is any extra space available then it will be even on either side. Then, within that table cell, is another table which contains our actual email content. The really important parts are:

max-width: 600px
width: 100%;

“width” of 100% means that the table (and therefore the email) will scale with the available space. So on mobiles and tablets, the email will automatically shrink to the available space. This wouldn’t happen if we used a static width e.g. “width: 600px;”

“max-width” lets us limit that scaling so the email won’t get wider than 600px (so it will be consistent on desktop) – but does not stop it adapting to screens where there is less space than that.

Using percentage widths in this way, we fit our email to the device it is being viewed on without using CSS media queries such as this:

@media only screen and (max-width: 400px){ ...

You could use those to change the email when a certain width is detected, and for a whole range of tasks they do make life easier. However, as mentioned, gmail for android at least doesn’t currently support CSS rules like this, so we tend to avoid them.

Columns

Using percentage widths in this way means that we can’t be sure of a particular email width to work from. So the rest of our HTML structure needs to account for that.

This isn’t much of an issue if you are using a single column layout. In fact, single column layouts are considerably more mobile friendly in general. Some studies suggest that simpler email designs actually perform better than their more complex counterparts. So since they are also generally easier to update, maintain and make consistent across the many email clients, this may be something to consider.

If you do want to stick with your multi-column layout, then the column widths need to scale proportionally too. Within a table setup as above, we could have a header row….

<tr>
    <td colspan="3">
        Header content
    </td>
</tr>

…and a main body, consisting of two columns of content:

<tr>
    <td style="width: 33%;">
        Left column content
    </td>
    <td style="width: 2%;">&nbsp;</td>
    <td style="width: 65%;">
        Right column
    </td>
</tr>

The header row contains one cell which will automatically fill the full table (which is 600px or under as we saw). But the second row has three cells. A left column, a spacer column, and a right column. Rather than setting fixed widths, I’ve split my 100% out between them. 33% for the left, 2% for the space and 65% for the right.

So when the device width is lower than 600px, the width of the email adjusts. When the width of the email adjusts, the width of the columns adjust too while keeping their proportions.

This is an example with two “real” columns, i.e. columns that contain content as the space doesn’t count. There’s no reason you couldn’t do the same for three columns, but bear in mind that on a mobile space is at a premium. You don’t want to end up with
one
word
per
line.

Outlook

The email client that really has a problem with this method is Microsoft Outlook. Even 2010 and 2007 don’t support the “max-width” attribute, and that’s the basis of our entire structure. All we can do is resort to using “width” instead. However, we only want it to apply to Outlook. To do this, we can use this trick and add an extra table to our HTML. We start with our standard content table as above….

<table style="max-width: 600px;" border="0" cellspacing="0" cellpadding="0" width="100%">
  <tbody>
    <tr>
      ...
    </tr>
  </tbody>
</table>

…and we put extra table HTML within it. However, we wrap the extra HTML in a conditional statement that means it will be ignored by all email clients except Outlook…..

<table style="max-width: 600px;" border="0" cellspacing="0" cellpadding="0" width="100%">
  <tbody>
    <!--[if gte mso 9]>
      <table id="tableForOutlook">
      <tr>
      <td>
    <![endif]-->
    <tr>
     ...
    </tr>
    <!--[if gte mso 9]>
      </td>
      </tr>
      </table>
      <![endif]-->
  </tbody>
</table>

Then all we have to do is put a style in the header of the email to set the width of our Outlook-only table (again wrapped in conditional statements).

<!--[if gte mso 9]>
  <style>
  #tableForOutlook {
    width:600px;
  }
  </style>
<![endif]-->

Images

Images in email can also be difficult.  A banner image that is 600px wide is fine on desktop, but on mobile half of it could easily be hidden off-screen. Similarly, if you have some text beside an image, unless the image scales with the screen size you might find your text pushed off to the side. This looks messy and forces people to scroll.

My preferred option for dealing with this is to employ the same technique as above. Here’s a sample of a header row that could contain a banner image:

<tr>
    <td colspan="3">
        <img src="https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1798/mobiletestemail.png" style="width:100%; height: auto;"/>
    </td>
</tr>

Again, let’s look at the styles applied to the image there:

width: 100%;
height: auto;

The width will actually scale the image to the size of the table cell it is in. In this case, it would be 100% of the width of the email. If you put it in a column with a width of 50%, for example, then the image would only scale to that size. We have to put in the “height:auto;” to make sure the height stays proportional to the width.

This does mean that your images will all need to be in table cells, even if they are to be wrapped with text. This is good practice anyway. Some desktop email clients (e.g. Outlook again) ignore the standard ways of doing this, such as float.

Content

On a more general note, the upshot of having scaling column widths is that your text will be squeezed a little on mobiles. This is fine, but it does make the whole email longer. If the available width for a block of text is halved, the length will double. For text-heavy emails viewed on a small screen that could result in a lot of scrolling. You could either cut down the text or switch to fewer columns so you have more width.

So that’s it?

Probably not, but it is a start. The simpler your email template is the easier it’s going to be to mobile optimize, as well as edit and maintain. We’ll be adding to this document as and when we can. If you have any questions, corrections or suggestions you can get in touch at [email protected].

Example:

<table border="0" cellspacing="0" cellpadding="0" width="100%">
    <tbody>
        <tr>
            <td align="center">
                            
                <table style="max-width: 600px;" border="0" cellspacing="0" cellpadding="0" width="100%">
                    <tbody>
                    <!--[if gte mso 9]>
                    <table width=600 id="tableForOutlook">
                    <tr>
                    <td>
                    <![endif]-->
                        <tr>
                            <td colspan="3"><img src="https://aaf1a18515da0e792f78-c27fdabe952dfc357fe25ebf5c8897ee.ssl.cf5.rackcdn.com/1798/mobiletestemail.png" border="0" style="width: 100%; height: auto;" /></td>
                        </tr>
                        <tr>
                        <td class="contentColumn" style="vertical-align: top; width: 33%;" valign="top">
                                Left column
                                <br />
                                In ut eros sed nibh ullamcorper porttitor at rutrum enim. Proin egestas felis eu purus elementum, eu convallis nisl lacinia. Pellentesque hendrerit fringilla massa, ut iaculis ligula maximus a. Aenean pellentesque ipsum dui, quis sagittis lacus iaculis eget. Cras augue erat, sollicitudin non interdum non, semper ac lectus. Etiam tempus ultricies odio nec varius. Quisque vel eleifend augue, nec faucibus sapien.
                                <br />
                                End
                            </td>
                        <td class="spacerColumn" style="width: 2%;">&nbsp;</td>
                        <td class="contentColumn" style="vertical-align: top; width: 65%;" valign="top">
                                Right column
                                <br />
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. In cursus tortor neque, non tristique nisl vestibulum in. Sed finibus velit massa, suscipit commodo nunc vestibulum eget. Nullam id ultrices nibh. Aenean luctus lectus egestas eros aliquam, nec elementum libero rhoncus. Donec nibh dui, suscipit ac iaculis id, scelerisque non orci. Morbi massa lectus, suscipit et consequat at, egestas sit amet est. Ut tristique sed neque quis finibus. Phasellus molestie accumsan nulla et aliquet. In in sollicitudin eros. Fusce placerat sapien at neque elementum, ac sodales ante facilisis.
                                <br />
                                Quisque et pharetra lorem. In suscipit, urna eu rutrum fermentum, felis ligula dictum mi, eu commodo nulla magna a neque. Nam euismod sem quis nulla viverra tempor. In id urna sed enim fringilla commodo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis sapien augue, blandit sed nibh et, congue suscipit mi. Pellentesque consectetur, lacus non rutrum scelerisque, nulla lacus tristique ante, ut luctus elit magna in lacus. Vestibulum nec fringilla tortor. Mauris maximus euismod tristique. Nunc eu congue augue, vel malesuada erat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse accumsan congue leo, et scelerisque lorem. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean lobortis urna at enim blandit, nec auctor quam volutpat. Nam tempus sodales risus, ac mollis ligula aliquam id.
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">Footer</td>
                        </tr>
                    <!--[if gte mso 9]>
                      </td>
                    </tr>
                    </table>
                    <![endif]-->
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>