Tackling responsive email at The Times
Making email beautiful for everyone
Hey, we want to start a new daily email bulletin. It’ll go out 6 days a week. It needs to be easy to build at 7am in the morning. We need it to be flexible, so the email suits the day’s stories, rather than the template defining the journalism.
Oh, it should be responsive…
…and we’ll be sending the first bulletin in less than four weeks time.
Okay so, the conversation above never actually happened, although everything in there is a true representation of the development of The Times’ Red Box email bulletin.
Since the launch of Red Box in August, we have launched (or relaunched) four email bulletins, introducing a new, easy-to-use email creation system. These emails are tailored towards our growing mobile audience, offering beautiful mobile reading experiences whilst also catering for those on older email clients — something much easier said than done.
Here is our story: how we tackled the challenges of responsive email at The Times.
Building unique emails, daily
Something we’re proud of at The Times is maintaining a distinct visual style, which we wanted to ensure made its way into our email bulletins. On top of this, our bulletins are a brilliant way of giving a complete reading experience in a small package. We didn’t want a rigid template to impact either the quality of our journalism or the final visual style. To be able to achieve this, we had to build a brand new, easy to use templating system: we called it Deck (that’s the only tease you’ll get for Deck right now, we’ll talk more about it soon).
This system allows us to create our own bespoke templates in the form of modules (we call them cards) — that can be stacked together in any order, and are highly flexible. From a journalists perspective, if priorities change, and stories need to be reordered, updated and changed even up to the last minute, that’s easy to do. We’ve implemented inline documentation, and helpful notes along the way, helping make the entire process easier for our journalists.
This system is also incredibly modular, so if we need to alter a template, or add a new one, it’s very easy. We use a simple templating language to reference assets and resources, and can extend this through a ‘custom fields’ control area.
Dealing with Email HTML
Email HTML is a fantastic invention…kind of. It allows us to create rich, visually appealing email bulletins, but at a cost.
For those who don’t know, writing HTML for email clients is quite possibly one of the most frustrating tasks a developer will ever have to face. Imagine writing for code that hasn’t changed for 15 years, can’t use most of the modern practices that we’ve come to rely on, and can’t be expected to render the same way on all email clients. That is the reality of email.
HTML Email is an unbearable mess of tables and inline CSS styles, and the sheer variety of email clients makes for a world of pain.
Of course, there are many resources out there for those looking to dive into creating attractive HTML emails, and a fantastic subset of those resources for those who are looking to make their email responsive. I’d specifically like to highlight Campaign Monitor’s guide to CSS, which has been a huge help during development. Whilst we did not use it directly, ZURB’s Ink responsive email framework also provided some handy tips along the way.
The biggest challenge was maintaining wide-ranging support across email clients, whilst trying to push the boundaries of emails to give a great experience for those that have devices and clients that are capable.
Providing a great reading experience to all of our readers
Looking at recent statistics from our Red Box daily email bulletin, over 50% of subscribers are reading on a mobile device. The rise of mobile email readership is well documented, and for Red Box and all of our other new-style email bulletins, improving the reading experience for mobile readers was key.
To ensure we gave the best experience for both mobile and desktop, on email clients from iOS Mail to Outlook 2003 (yes — a 12 year old piece of software), we knew we would have to run an extensive series of tests during development.
Setting up local instances of Outlook 2003–2013, an array of iOS, Android and Windows Phone mobile devices, various web-based clients and Thunderbird (I could go on…) would be a mammoth feat, particularly given the short time period we had to get up and running. We looked around for a service that could provide this for us, and came across Litmus — a combined email testing and analytics tool. Litmus have been fantastic to work with, and offer a suite of tools that have made testing across a huge number of platforms almost effortless.
Even with Litmus, there were still many late nights, early starts, and busy weekends figuring out some of the edge cases that manifested across all email clients — usually Outlook, but both Gmail and iOS Mail have their faults too. Rendering images has been one of the biggest challenges until only recently, with Outlook.com having some interesting ideas about how it renders conditional comments.
Perhaps the biggest challenge we faced was maintaining a flexible, fluid layout that worked across mobile and tablet devices, but also scaled up to larger desktop devices. Outlook usually posed the biggest issues here, in many cases flat-out refusing to honour specific rules that limited the width, making this particularly challenging. For a while, we had to decide between a beautiful responsive email for mobile, or an email that rendered successfully on Outlook 2003, 2007, and 2010. Thankfully, we were able to resolve this issue a few weeks ago with some smart conditional comments and Outlook.com-specific CSS classes (all thanks to many StackOverflow posts and hours of trial and error).
Why email HTML is still stuck in the mid ‘90s is beyond me, and something I’ve still not found a valid reason for. Please, let me know if you know that reason.
Related reading
Here’s some amusing reading on why HTML email was once deemed “evil”:
You can sign up to the Red Box email briefing for free here. The Times and Sunday Times members can sign up to Times Woman and the Business ‘Need to Know Briefing’ via their account page.
Photographs: Matt Taylor
