Better Responsive Newsletters

Some tips to help you make HTML newsletter that work everywhere.


It’s not a secret, coding HTML newsletters can be a pain.

Not only you have to write code from a time when Friends was still on TV, but you have to test it on literally dozens of different email clients. And the rise of mobile devices in the past years called for mobile compatible newsletters.
So add a dozen more mobile email clients to your test panel and prepare for some serious work…

But don’t give up yet! Here are some tips to help you design and build better responsive newsletters.


Keep it simple

Single columns layouts are the best.
While it’s possible to make almost anything in HTML tables with patience and time, (and courage, and coffee, and sweat…) I’d advise you to keep it simple as much as possible.

  1. First: from an user experience point of view, you make the information really easier to get by not cluttering the main message. (have a look on Adrian’s talk “Creating distraction-free reading experiences” at UX Lausanne 2014, it’s full of great advices and examples). It’s simply a better way to give your message to the world.
    Sidebars are so 2011!
  2. And second: less complicated design means less complicated development therefore less chances your newsletter will be messed up in your recipient’s inbox. A fluid layout is less likely to break. And if it doesn’t work perfectly, it will look nicer anyways.
    Yes, this s a bit of a lazy advice because multi columns work (we’ll see that later) but in case it doesn’t, or partially works, you’ll be safer with a single column layout.

Learn to work with various email clients

When developing for the web, we’re used to work with a handful of browsers. You rarely go further than Chrome, Firefox, Safari, Internet Explorer and Opera (if you’re thoughtful).

When developing newsletters, it’s not uncommon to work with at least fifteen different email clients plus their older versions.
We also work for three distinct environments: desktop, webmail and mobile. And not only and they all react differently, but they also are different contexts.
So don’t rely on the rendering of your code in the latest version of Apple Mail, I can guarantee it’s gonna look different on Lotus Notes or Blackberry.

Test like you’ve never tested before!

The best advice I can give you: test! Test, test, test! You will be surprised to see the different results you can obtain in various email clients.
I have four different email clients on my Nexus (the default Android, Gmail, Cloud Magic and more recently Google Inbox): they all react really differently. It’s not stupid, it’s just the way it is and you have to deal with it.
So don’t assume that because an email looks great on your iPhone 6 on iOS 8, it will look good on your auntie’s entry level Android phone.
Also test different versions of the same client. It’s not because it looks good in Outlook 2003 that it will rock on Outlook 2013. Spoiler alert: Outlook 2013 sucks, big time.

Thankfully, there are plenty of choices when it comes to testing emails. My favorites being Email on Acid and the built in tools in Campaign Monitor. They provide screenshot from an impressive number of different clients including mobile devices.
Don’t hesitate to try several times and above all: don’t hesitate to spend the few dollars they ask to make those paying tests. This is money well spent!
Tip: Email On Acid has a free plan that includes a handful of devices. Useful for initial tests.
Mailchimp also has testing tools, but it’s been a long time since I’ve worked with them so I chose not to talk about them.

There is no point in making it look the same everywhere

Your work doesn’t have to and won’t look exactly the same on every device. It’s impossible.

For example:

  • Android doesn’t have as much preinstalled fonts as an iOS device, a PC or a Mac. It basically has Droid Serif, Droid Sans and Droid Mono by default… Those are great fonts but they look really different from Helvetica/Georgia/Courier.
  • Gmail (web app and mobile) will also scrap your styles if they are not inline. Everything in the <style> declaration will disappear, including Media Queries!
  • Most mobile clients will transform phone numbers into links (so you can call that number by taping it).
  • Some clients will even scan dates or hours on your mail to create links for the user to easily add in his calendar.
    So links will appear in places you haven’t decided.
  • Etcetera, etcetera…

But all of this is really not a problem. Your aim here is that your newsletters don’t look broken and that your message is accessible to anyone. Content comes first as long as it’s accessible and readable.


Some coding tips

Now that we have some design and strategy tips, let’s get our hands dirty. I’m not Mr. Frontend, but here’s some tips I’ve managed to collect in order to make my life (and now yours) easier.

Inline, inline, inline

Note: I know this is not new, it’s just a friendly reminder for some less experienced designers out here.
It’s so convenient to place our styles in the header, carefully wrapped into a <style> tag.
But we saw it earlier, you can’t count on that, some clients (Gmail, web app and mobile) will scrap your header. This means that everything that wasn’t in the body of your mail will simply disappear.
We’re not here to make beautiful code, but we’re here to make newsletters that work!

DON’T

<head>
<style>
p{
color: red;
font-weight: bold;
}
</style>
</head>
<body>
<p>Newsletters are fun!</p>
</body>

DO

<body>
<p style="color:red;font-weight:bold;">Newsletters are fun!</p>
</body>

This method will insure your styles to be applied correctly in the body of your newsletter.

You can still use styles in your header to style non essential parts of you code, for example links (when using a newsletter platform such as MailChimp or Campaign Monitor). Just remember your links will appear in good old «internet link blue» on Gmail.

Media Queries and Gmail

No <style> declaration in Gmail means no Media Queries. And sadly that means the same on the Gmail mobile app.
But Gmail has a partial support of Media Queries that makes them work in a strange way: they work on blocks elements (tables) but not on the overall styles.
You can find more info about this on the Campaign Monitor blog but to put it simply: your layout will adapt, but not the smaller specifications such as text-size.
Gmail works in a strange way… But it’s a major actor on the email scene, so think about your Gmail readers.

Multi columns and breakpoints

Yes: multi columns work in emails and they work with tables. It’s not as intuitive as what you would make in a responsive webpage but it works fairly well.

But there’s a little trick. You will find many responsive newsletters tutorials explaining you to use table cells like this:

<head>
<style>
@media only screen and (max-width:600px) {
td[class="block"], table[class="block"]{
width: 100% !important;
display: block;
}
}
</style>
</head>

<body>
<table class="block" width="600">
<tr>
<td class="block" width="300">Column 1</td>
<td class="block" width="300">Column 2</td>
</tr>
</table>
</body>

But Don’t do that, it doesn’t work everywhere. In some mobile clients your table cells won’t break into full width and you’ll end up with tiny columns.

But there’s a similar “hack” that works! We’re going to dig back in old code and get the table align property. It may seems strange at first but it works just like the well known CSS float property.

<head>
<style>
@media only screen and (max-width: 600px) {
td[class="block"], table[class="block"]{
width: 100% !important;
display: block;
}
}
</style>
</head>

<body>
<table class="block" width="600"> <!— container table —>
<tr>
<td>
<table width="300" align="left">
<tr><td>Column 1</td></tr>
</table>
<table width="300" align="right">
<tr><td>Column 2</td></tr>
</table>
</td>
</tr>
</table>
</body>

You could even invert your columns using that. Pretty useful if you want the right column appear over the right one on mobile.

You now have a nice multi columns layout that breaks into a single layout column on mobile. Isn’t it nice?


Final thoughts

Designing responsive emails that work is a big challenge. But now that you know your enemy a little bit more and that you master your weapons every time a little bit better, I hope that you can go to the fight a little more light-minded…

Don’t hesitate to share your own tips and tricks.