Responsive Web Design, Part 2 (2015)

Responsive Email Design

Email Clients

Saying that there are a lot of email clients out there is an understatement verging on the absurd. At the time of writing, and just across MailChimp’s user base of more than 7 million users, there are 63 active email clients.

The majority of that user base is spread across North and South America and Europe. If you pull the view back to the entire world, the number of active email clients is over 100. If you’re new to email design, this fact is sure to give you pause, if not heart palpitations.

But you can rest easy because, thankfully, there’s no need to account for every single email client out there. While diversity and competition are normally good things, the market belongs to only a handful of powerful players, which makes the task of developing robust emails significantly easier. We only need to take a look at these major clients and identify the biggest pitfalls and quirks to look out for. There are three major types of email client to consider when designing and developing an email:

1. Desktop clients, like Microsoft Outlook, Apple Mail and Mozilla Thunderbird;

2. Webmail clients, like Gmail, Yahoo Mail and Outlook.com;

3. Mobile clients, like iOS Mail, Gmail, Inbox, Mailbox, and on and on…

Let’s begin with a look at the most popular desktop clients, starting with one that’s been the bane of the email developer for a long time.

MICROSOFT OUTLOOK

In your average office environment, the desktop mail client is ubiquitous. Even in this era of mobile-everything, they remain the most common way to check, read and send emails. Of all these desktop clients, Microsoft Outlook is king, reigning supreme as the market share champion across the planet due to its inclusion in the Office software suite. On Windows machines, Outlook comes in two flavors: pre- and post-2007.

This bit of software is why email developers seem so cranky all of the time.

Why 2007? Because that marks the year when Outlook’s HTML rendering engine shifted from the one used in Internet Explorer 6 to the one used in Microsoft Word. Usually, this bit throws people for a loop, so I’ll give you a moment to read that sentence again.

This move made sense to Microsoft for the consumer’s sake, since users of Office could put an email together in Word, then send it via Outlook to other people who’d then view that email in Outlook; Microsoft was building for a closed environment. Sadly, the introduction of Outlook 2007 and its use of a word processor’s rendering engine was a huge step backward for email development, since the Word engine’s support for HTML and CSS is atrocious at best. Even the newest version of Outlook, bundled in Office 2016, uses the same engine.

Say what you want about IE6, but it at least supported a fairly full array of the HTML and CSS that was more or less modern at the time of its release; from the outset, it was actually built to render that HTML and CSS. Unlike, y’know, a word processor. Almost unbelievably, there’s a bright side to this: Outlook might be a terrible email client, but it’s been consistently terrible over a near decade-long arc. Though it’s not an ideal environment to have to account for, Outlook’s consistent terribleness makes it predictable and tameable with a couple of resources.

The first is documentation on the Microsoft Developer Network (MSDN) devoted to the HTML and CSS rendering capabilities of the Word engine:

The MSDN is a must-have resource for email developers, even if the content is a little soul-crushing. Image source: http://msdn.microsoft.com/en-us/library/aa338201%28v=office.12%29.aspx³

It’s a thorough overview of all the HTML elements and CSS properties that enjoy full, partial, or no support in the Word engine, and covers every version of Outlook for Windows from 2007 on. The second resource is one that web designers who’ve had to optimize sites for older versions of Internet Explorer will be familiar with, the conditional comment⁴:

<!--[if gte mso 9]>

/* Your Outlook-specific markup or CSS goes here. */

<![endif]-->

It’s the same thing you could use to target older versions of Internet Explorer when building a website, except it targets Microsoft Office, or mso. In the example above, gte is added to have the comment apply only to versions of Microsoft Office greater than or equal to 9. You can also target earlier versions by using lt. Using gt and lte will target versions greater than, or less than or equal to, respectively. The Microsoft Office version number that follows allows you to target specific Outlook clients. In the example above, mso 9 is Office 2000, which means you’re targeting Outlook 2000. Other version numbers allow you to target other clients:

Conditional commenting is an invaluable resource, as you’ll see later in this chapter. With the weird rendering issues Outlook’s engine introduces into emails, the ability to provide Outlook-specific code can usually provide a pretty low-impact, but high-grade solution, allowing you to include HTML or even a CSS style sheet specifically intended to counter the client’s long list of quirks.

WINDOWS LIVE MAIL

Microsoft has a second offering for Windows in the form of Live Mail, a free desktop client that’s bundled inside the Windows Essentials⁵ software suite.

Look at it, blissfully unaware of the Word engine.

Given Microsoft’s track record with email clients, Live Mail is surprisingly good, boasting pretty broad support for modern HTML and CSS. Even though its rendering engine is leagues better than Outlook’s, Live Mail’s user base is microscopically small compared to its big brother, not to mention the other clients floating around out there.

APPLE MAIL

On the other side of the PC divide stands Apple and its Mail app for Mac OS X, which is mostly flawless as an email client.

Its rendering engine is WebKit, which powers browsers like Safari and Chrome (Chrome uses a fork of WebKit’s WebCore component, named Blink), and even that of the PlayStation 4. CSS support is state-of-the-art, and includes CSS3, media query and web font support.

MOZILLA THUNDERBIRD

The email client from the same company responsible for Firefox is, as you’d probably expect, a good solid email client. Unfortunately, its user base is pretty small among other desktop email clients.

Thunderbird is a cross-platform client, available on both Windows and Mac OS X machines, and it works much the same way on both because of a rendering engine that’s shared with Firefox.