UPDATE 3/23/2016: Our new responsive email framework, Foundation for Emails has been released!
Download Foundation for Emails
When it comes to email marketing, content is king. Getting your message out to a diverse group of email subscribers can be a huge pain, though, thanks to a highly fragmented market of email clients, many of which have extremely poor support for modern HTML and CSS features.
Sample of our responsive email templates in Outlook
Last year we created a Playground piece featuring five responsive email templates to make the task a bit easier. We knew the problem of accommodating mobile email users needed to be solved (after all, studies suggest that 48% of emails are opened on a mobile device), but we weren't expecting such a huge response. While the piece was fairly well received, one question kept coming up: "how do I support Outlook with these?"
We had to think long and hard about this one. Technologically, Outlook's many limitations make supporting it difficult, but it's still prevalent enough to make the attempt worthwhile. Eventually, we realized the solution was right under our noses ' prioritize the most constrained platform in our design process, a technique we call Outlook-First Design.
Outlook: Can't Live With It, Can't Live Without It
According to Litmus, Microsoft Outlook has the second largest email client marketshare (behind Apple Mail for iPhone). Since 17% of the readers in the Litmus study of 230 million emails used some version of Microsoft Outlook, it's a fairly large segment of the market, and therefore an expensive one to ignore.
At the same time, building for outlook can be hard. Based on the Microsoft Office (Word) HTML rendering engine, Outlook has trouble with many fairly standard CSS features such as fluid width images and the display property.
While we can accomplish a lot within the limits of Outlook's HTML rendering, Outlook still chokes on many standard patterns seen in modern web design. Once you start considering media queries and CSS3 effects, Outlook can be a tough client for which to gracefully degrade a modern email. Starting with an Outlook-optimized email, then progressively enhancing the experience on clients with better CSS support, is often faster and easier.
Progressive Enhancement
Progressively enhancing for more capable platforms is not a new concept. The canonical example of this is mobile-first design, a concept we advocate by basing Foundation 4 on its principles.
Since mobile devices have smaller screens, crushing a desktop layout down to mobile size can be difficult. This can tempt us to eliminate content, calling into question whether it should have been included in the first place, or if it's merely filler.
When you start by building for smaller screens, your content starts out lean. Viewing resources like screen space as being limited will force you to consider what's necessary and what's "design cruft."
In addition, the bandwidth and computing constraints of mobile devices force us to design lighter websites, which translates to a faster experience for desktop users as well.
How To Outlook-itize Your Process
In order to design beautiful, functional emails that work well in all clients, we've been working on refining the Outlook-first design process. Right now our email design consists of three main steps:
Build for Fixed Width
The first step we take in designing an email is to make sure that it looks great in a fixed width layout (usually 580px or 600px) in a browser. Mobile email clients tend to have better HTML rendering, so building on top of this base layout usually works better than going the other way.
Add in Mobile Styles
Next comes the media queries. By modifying our layout for smaller screens using 'max-width' media queries (as opposed to the 'min-width' style found in Foundation) we ensure that a great mobile experience doesn't come at the cost of a poor desktop one.
Test, Test, Test!
Finally, we make sure to test our emails in a number of different environments. Applying a special .outlook testing class to the body tag (see above) allows us to simulate how an email would render in Outlook by forcing images to be full-width (thus breaking any poorly constructed layouts in the process). Running an email through Litmus lets us get a quick overview of how it will look in a number of target clients. Additionally, nothing can replace good ol' fashioned device testing, so we send test emails to a number of hardware QA devices as well.
A Brighter Outlook
Though we may never be able to create an email that works perfectly on every platform, starting our process with a focus on Microsoft Outlook gets us a lot closer. We've incorporated a lot of the lessons learned into Ink, our new responsive email framework. While we're not quite ready to release it yet, you can sign up to be notified when Ink is released to the public here.
UPDATE: Ink is out! Download the framework and responsive email templates
Ink was released in 2013! We're working on it's new version which will be known as Foundation for Emails, but until then, download the framework, responsive email templates and more:
