Responsive Email Design

Chapter 4

Building responsive 2-to-1 column layouts

While one-column HTML email layouts are generally the way to go when optimizing your newsletter for mobile devices, there is an elegant way to create responsive 2-column layouts, without resorting to mile-long stylesheets in media queries.

While 2-column layouts often allow more content to feature above-the-fold on desktop email clients like Outlook, they're a pain to read and navigate on mobile devices. We'll fix that with a bit of old-fashioned coding.

One of the golden rules of email design is 'where possible, use HTML attributes instead of CSS'. Whereas CSS support can be fairly flaky across the gamut of email clients, attributes tend to be rock solid. For example, attributes like align="left" andcellpadding="10" are far more reliable than their approximate CSS equivalents,float: left; and padding: 10px;. It's exactly these attributes we'll be using when building our 2-to-1 column layout.
Lets look at such a layout in Outlook 2007:

In the example above, we have a 640px wide container table, with two 320px wide tables nested inside to form columns, similar to our previous examples. These nested columns have cellpadding="20" applied to stop the content from pressing hard against the edges.

When coding for the web, we'd generally apply float: left; to the left-hand column, to get them sitting side-by-side. But instead, we can use align="left". As long as the container table width is more than, or equal to the combined width of the two columns, both will fit nicely in this fashion. Here's the simplified code for the 2-column layout so far:

<table width="640" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td>
	<table width="320" border="0" cellspacing="0" cellpadding="20" align="left">
      <tr>
        <td><p>Column Left Content</p></td>
      </tr>
    </table>
    <table width="320" border="0" cellspacing="0" cellpadding="20" align="right">
      <tr>
        <td><p>Column Right Content</p></td>
      </tr>
    </table>
    </td>
  </tr>
</table>

The result:

If the container table is 640px wide, you will get a 2-column layout. But any skinnier than this and the right column will wrap under the left column. Make it the same width as the column tables (320px) and you've got a flush, 1-column layout that fits an iPhone display exactly, with no zooming required. We can achieve this by adding a simple, 1-line media query to our HTML code:

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        table[class=contenttable] { 
            width:320px !important;
        }
    }
</style>

<table width="640" border="0" cellpadding="0" cellspacing="0" class="contenttable">

The result is a responsive layout that displays two columns on desktop and web clients, then switches to one column in iPhone Mail and the default Android email client.

Adding Wikipedia-style progressive disclosure

On the web, many responsive sites convert luxurious long-form into ultra-short for mobile devices by using a technique referred to as 'progressive disclosure'. This involves hiding content behind an interactive element like a button or link, then displaying it on-click (or tap). Wikipedia uses it, as do a lot of mobile applications. We can also use it in mobile email. Using CSS to show and hide email content Lets say we have an email newsletter with multiple articles. In desktop email clients, we want a heading and text to display in each article:

However on mobile clients, we we only want the heading to display, alongside a show/hide button (which toggles the text). This turns the email into an interactive table of contents, dramatically shortening the message length:

To do this, we'll firstly need to turn to our HTML code and create an article with a heading, text and a show/hide button. We'll also add a couple of classes to display the show/hide buttons exclusively on mobile devices. Here's a simplified version of the code used for each of the articles:

<td>
   <h4><a href="http://yourdomain.com" class="link">First heading</a></h4>
   <a href="#" class="mobilehide">Hide</a> <a href="#" class="mobileshow">Show</a>
   <div class="article">
      <p class="bodytext">
         <img src="kitten.jpg" style="float: left;" >Pellentesque habitant morbi...
      </p>
      <a href="http://yourdomain.com">Read more...</a> 
   </div>
</td>

Take note the classes mobilehide, mobileshow and article - these will be handling most of the action.
In our stylesheet, we'll hide the show/hide button when the email displays in desktop and web email clients, by using display: none; in our stylesheet like so:

a[class="mobileshow"], a[class="mobilehide"] {
	display: none !important;
} 

To ensure that the show/hide buttons are only displayed on mobile devices, we'll turn to our media query. Here's the code, including the earlier .mobileshow and .mobilehidesnippet and some webkit-friendly button styling for good measure:

@media only screen and (max-device-width: 480px) { 
	a[class="mobileshow"], a[class="mobilehide"] { 
		display: block !important; 
		color: #fff !important; 
		background-color: #aaa; 
		border-radius: 20px; 
		padding: 0 8px; 
		text-decoration: none; 
		font-weight: bold; 
		font-family: "Helvetica Neue", Helvetica, sans-serif; 
		font-size: 11px; 
		position: absolute; 
		top: 25px; 
		right: 10px; 
		text-align: center; 
		width: 40px;
	}
	div[class="article"] {
		display: none;
	}
	a.mobileshow:hover { 
		visibility: hidden;
	} 
	.mobileshow:hover + .article, .article:hover {
		display: inline !important;
	}
}

And if things go well, the result is an email with show/hide buttons that toggle content on the iPhone. If you would like to try applying this technique to your own email campaigns, feel free to view the sample code on Github and adapt it for your own campaigns. Warm thanks to Eric Gideon for his contribution to this project.

Targeting devices with media queries

Sign up for free.
Then send campaigns for as little as $9/month

Create an account