Venditan, The E-Commerce & Retail Experts
We're Recruiting, PHP Specialists, Enquire Here

Which Is The Best Approach For Responsive Email?

Email Marketing

Callum Brocklehurst

23rd August 2016

Which Is The Best Approach For Responsive Email? A regular source of uncertainty within email marketing surrounds the best method to use when creating a responsive email. The aim of a responsive email is for it to adapt to the screen being viewed on providing the user with the best experience possible – in today’s climate prioritising mobile is becoming increasingly important.

A regular source of uncertainty within email marketing surrounds the best method to use when creating a responsive email. The aim of a responsive email is for it to adapt to the screen being viewed on providing the user with the best experience possible – in today’s climate prioritising mobile is becoming increasingly important.

A regular source of uncertainty within email marketing surrounds the best method to use when creating a responsive email. The aim of a responsive email is for it to adapt to the screen being viewed on providing the user with the best experience possible – in today’s climate prioritising mobile is becoming increasingly important.

With the variety of email clients that need to be supported and the unique and often awkward ways they handle HTML - looking at you Outlook - there is no one-size-fits-all answer for creating a responsive email. Ultimately, the technique used should be the one that best suits the subscribers.

Media Queries

The most common approach to responsive email is through the use of media queries. Media queries are an element of CSS that can detect the screen size of the device being used and display the content of the email accordingly, based on the set breakpoints. They allow each element within an email to be fine-tuned to display as intended across all devices. This can be as simple as increasing font sizes or much more complex when targeting clients that support the use of video within email. Media queries are therefore extremely powerful, allowing control of a layout at the smallest level required.

Unfortunately there is one major drawback that can’t be ignored when using media queries - support is terrible at best.

Information sourced from Litmus.

The benefits will only be seen in a select few devices with, frustratingly, no support in Gmail which is one of the most widely used email clients. With all of the hard work that goes into making an email look beautiful across all clients and devices it’s unfortunately all thrown out of the window for the majority.

Responsive Without Media Queries

Up steps the fluid hybrid method, in other words, responsive without media queries. Instead of using media queries to control layouts, the fluid hybrid method uses percentages and max-widths to control elements based on the screen size, with the sections within the email stacking beneath each other to fit the device being used. This results in an email that adapts to almost any device and any screen size, Gmail included!

The benefits of this approach are clear to see – breakpoints don’t have to be set/altered every time there’s a new bigger mobile screen, there’s also no worry about clients suddenly supporting or worse dropping support for media queries thus ruining perfectly coded layouts. Most importantly it’s the most widely supported method of creating a responsive email, which in turn results in the best experience for the user.

There are always downsides to any technique used to create a responsive email and the fluid hybrid method isn’t exempt from that. The design phase of these emails is key as it’s imperative to have structured blocks that can both sit together side-by-side on the larger screens and stack vertically as standalone elements on the smaller mobile screen. This can be a limiting factor when wanting to create the more complex layouts. However with careful planning it’s still possible to create awesome email templates.

So...Which Is Best?

After careful consideration of the pros and cons of both methods it shouldn’t be too difficult to determine the one that best suits the subscriber. Those with an iOS dominated subscriber base may prefer the flexibility and level of control afforded by the use of media queries, however the lack of support in the major clients is a huge stumbling block.

The positives of the fluid hybrid approach far outweigh any negatives. For those looking to provide the best user experience to as many subscribers as possible, this method is certainly the standout candidate. Media queries can of course be used alongside the fluid hybrid method to enhance the appearance of an email for mobile clients that do support them – offering the best of both worlds!


Callum Brocklehurst 23rd August 2016