Due to the increasing number of opens on mobile devices, Responsive Email Design has been growing in popularity over recent months, and with the introduction of our Responsive Email Designer within Instiller we expect many of our clients will be sending responsive emails. There are however a couple of important things to consider if you’re thinking of switching to using Responsive Email Design.
How is a Responsive Email constructed?
To understand the different level of support for Responsive Email Design, we’ll briefly look at how responsive templates are constructed.
The most common and most flexible approach for constructing Responsive Email templates is through the use of CSS media queries.
@media screen and (max-width: 480px)
CSS media queries are used within the HTML template and essentially act as conditional statements based on the screen size of a device, applying certain CSS rules at certain screen sizes. These CSS rules triggered at strategic device widths allow the email to display more effectively at smaller screen sizes.
Support for Responsive Email Design
As the design is adapted using media queries to change the layout and design on mobile devices, what we’re specifically looking for is Media Query support on mobile email clients. As we’ll illustrate, devices vs apps also have varying support for media queries.
|Android Mail 4.x||✓|
|Android Gmail app||˟|
|Android Outlook.com app||✓|
|iOS Gmail app||˟|
|Windows Phone 7||˟|
|Windows Phone 7.5||✓|
|Windows Phone 8||˟|
|Yahoo App (Android & iOS)||˟|
As always, the most important thing to consider is whether the recipients of your email campaign are going to be able to view your email template. We’d recommend a combination of Litmus testing and viewing your reports to ensure that the devices people are viewing your campaigns on are compatible with your approach.
If you find that the majority of your recipients are viewing your campaigns on devices that don’t support Media Queries then an alternative approach should be considered.
Creating an email template using a fluid layout with percentage-based widths would be an option if you needed to ensure correct display on devices without relying on media query. Your layout will be limited as you’ll not be able to reconfigure the layout at certain screen sizes. Because of this, we’d recommend a maximum of two columns.
Of course, if you know you’re mostly dealing with mobile recipients the other option would be to use a fixed width of around 320px. This should cater for the smallest mobile screen sizes but displayed centered on the larger devices. The downside with this approach is that the display on desktop clients will be compromised.