Responsive Email Design

Chapter 8

Case study: Twitter

Now we've got the theory, let's put some of these techniques into practice by applying them to a real-world email. Not just any email, but one that's send to millions of people every day.

In the not so distant past, Twitter's email notifications were less-than-flash on mobile devices. The problem was, a combination of tiny text and a wide layout pushing out the zoom made them nearly unreadable on small screens.

We decided to do something about it. In 5 minutes, we applied a simple fix that made a world of difference to the usability and readability of their notifications... And potentially can help you significantly improve how your email campaigns display on mobile devices, too.

In this case study, we'll show you how we took a humble email notification and turned it into something tweet-worthy when viewed in iPhone or Android Mail, or any mobile email client that supports media queries.

Taming the tiny text

First of all, we wanted to approach the most apparent issue with Twitter's notifications - tiny text. The reason why the text looks so small is because the 710px wide layout in use forces the email client on mobile devices to zoom out significantly to view the entire width of the message. Let's address this with a media query targeting small displays:

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

If you've read much on Responsive Email Design, you may know that you add these declarations to your <style> tags - the stylesheets within can only be interpreted by HTML email clients that meet the @media only screen and (max-width: 480px) criteria. So lets put it to use on adapting the layout here. First up, there's two tables surrounding the body of the email message:

<table cellspacing="0" cellpadding="0" border="0" width="100%">
	<tr>
		<td style="background-color:#e9eff2; padding: 30px 15px 0;"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; color: #333;">

We're going to bring them down to size by adding classes wrappertable, wrappercelland structure:

<table cellspacing="0" cellpadding="0" border="0" width="100%" class="wrappertable">
 <tbody>
   <tr>
     <td style="background-color:#e9eff2;padding:30px 15px 0" class="wrappercell"><table cellspacing="0" cellpadding="0" border="0" align="center" width="710" style="font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;font-size:16px;color:#333" class="structure">

Now we have something to target, lets get to work with these classes in our media query:

@media only screen and (max-device-width: 480px) {
	body {
		width: 320px !important;
	}
	table[class="wrappertable"] {
		width: 320px !important;
	}
	table[class="structure"] {
		width: 300px !important;
}

The widths used above are significant, as on the iPhone in particular, the display width is 320px in portrait orientation. By narrowing the email layout to 320px, it will be viewed at 100% zoom by default, which means that not only will the whole design be visible, but text and images will look as crisp as can be.

Putting a harness on the header image

Now, the above technique would be all well and good if it wasn't for that infernally wide 'Twitter' header image. So we'll do something a bit crafty and split the header image into 3 images. Sections which don't need to be displayed in our new, narrow layout can simply be hidden. Here's the original code:

<img alt="Twitter" height="52" src="http://a0.twimg.com/a/1335832060/images/email/email_header_710.png" style="border: 0; display: block;" width="710" />

And here it is, with the header image in 3 pieces:

<img alt="Twitter" height="52" src="logo-left.png" style="border:0;" width="41" class="logo"><img alt="Twitter" height="52" src="logo.png" style="border:0;" width="320"><img alt="Twitter" height="52" src="logo-right.png" style="border:0;" width="336" class="logo">

You may have noticed the class, logo on logo-left.png and logo-right.png. Hiding these bits is pretty straightforward - simply add the following to our existing media query:

img[class="logo"] { display: none !important; }

At last, we've got a header image and layout that's trimmed down to size on mobile screens.

Now, on top of the above re-factors, we added some extra padding around elements and adjusted font sizes to taste. But ultimately, most of the major changes were achieved with a couple of lines of code and only a few minutes' work. The results speak for themselves (pictured).

After the redesign

Hundreds of people showed their support for these changes and joined us in lobbying Twitter to improve their notifications. The happy result was that Twitter heard us and conducted a major redesign of their email notifications the following week.

Of course, you too could make a slightly smaller list happy by applying these optimizations to your own HTML email designs. Here’s the code, free for you to test out at adapt for your own campaigns:


Now we've got you started...

This guide was designed as a starting point for your own adventures with optimizing email for mobile devices. The mobile landscape is always changing and likewise, so are the techniques for best catering your email newsletters for the variety of email clients out there. So if you have a suggestion as to how we can improve this guide, or any questions about Responsive Email Design, be sure to get in touch with our team. Happy designing!

Guide

Now read this...

Agency Toolkit

Selling email services is a logical step forward for freelance web designers and developers. This guide will look at the practicalities of selling email to existing and new clients.

Read this guide

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

Create an account