Responsive Emails Have Landed, Sort of…

Responsive Emails Have Landed, Sort of…

My phone is the centre of my universe. It helps me when I’m lost. It holds my notes and reminders (essentially it’s my memory). When I wake up in the morning to the alarm on my phone the first thing I do is swipe the screen. If I have any push-notifications from my Gmail app, I browse any new emails I’ve received.

As of September 30th, Gmail email clients have started to support media queries and embedded styles. Litmus has a ‘live ticker’ of which Gmail clients have been updated. This development will mean that the majority of email clients (over 75%) now support this feature, making it easier for designers to craft emails for mobile devices, and improving the experience of thousands who check their emails throughout their busy days.

Web pages nowadays are often responsive. They are tailored for a wide variety of devices with different screen sizes. Just as you wouldn’t want the entire contents of a desktop-sized web page crammed onto a small screen, designers might aim to simplify a complex HTML email for mobile, hiding and showing different elements based on screen size, or making the text bigger. According to a 2015 US Consumer Device Preference Report, 66 % of all email in the US is now opened on smartphones or tablets. There is a need for emails that render well on both mobile and desktop. But it is not easy for designers to create styled up, responsive emails that look consistent in every inbox.

This is because emails are rendered within an email client, like Gmail, Hotmail or Outlook, which is basically an app or a website which has its own set of style rules. The email inherits these styles, and the client application might limit how and which email-specific styles can be defined so they don’t interfere with parent styles.

This means email designers have had to resort to 1990s HTML, inline styles and other workarounds to create emails that look consistent across many clients, and weirdly esoteric table hacks to make emails responsive. Here‘s a good one!

If all email clients supported a range of CSS properties and media queries, it would enable designers to create styled, responsive emails in the same way as a web page, with the same level of ease and control.

Gmail’s announcement is progress toward this industry standard. But does it mean we can throw out inline styles and tables, enthusiastically pepper our emails with media queries? The answer is, sadly – it depends. If you’re targeting Gmail users then, yes, victoriously step into the 21st century with HTML emails! But not all email clients, notably Outlook, support <style> tags and media queries. If you’re targeting these users you’ll have to stick with the various workarounds. The approach remains    know your clientele, test, test, test.

The hope is that, following Gmail’s upgrades, the remainder of email clients will be nudged into supporting responsive design. That’s a beacon of hope for email designers, and a move toward a better experience for the majority that reads emails on their phone.

Emilie Dannenberg