Make the Switch to Responsive Email Design

Here at Demac Media, we look to improve the conversion rates of any and all things related to Commerce. A huge part of bringing viewers to our various partners involve sending out campaigns and event information via social media. One of the most important communication methods comes in the form of email newsletters. According to EmailMonday, the percentage of mobile email opens have sharply increased from 43% to 51% in 2013, and continues to increase. Add 250 million smartphones sold across the globe in 2013, and we’re quickly seeing the relevance of mobile e-mail.

Litmus conducted surveys and found that only 3.3% of users claimed to look at the same e-mail more than once on another platform (PC, Laptops, Netbooks, Tablets, etc). That being said, if an e-mail does not capture user attention the first time around, there’s a very small chance they’ll ever look at it again. That causes a multitude of problems especially when statistics tells us that roughly 70% of users tend to delete or ignore e-mails that are difficult to read or rendered improperly on their smartphones. So if your e-mail is hard to read on a smartphone, 70% of your users won’t bother to read it. Remember, only 3.3% would even consider reading it again later.

To avoid inconsistency between email clients, many companies started building their entire template in image slices. Template designs were sliced into many pieces and put together with tables to form an image with different clickable areas. This traditional method allowed emails to look the same on different email clients granted they supported HTML. This method does not take mobile devices into consideration and certainly is not prepared for Apple’s Retina Display, causing most image based templates to look tiny and unreadable on smartphones and tablets.

Here’s how an email template might look as an image on a mobile browser versus desktop:

Sample Newsletter-phoneSample Newsletter

Can you read the text when the image is this small?

What then can we do to send mobile friendly content across our large mobile audience? Use responsive design. Using responsive design, we can step away from the traditional image templates and start using regular HTML to display our content. Additionally, by using media queries and fluid design, we can ensure our designs are readable, and specially tailored on mobile phones as well.

What is Responsive Design

Responsive design is exactly what it sounds like, responsive and adaptive to different screen dimensions. It is a method of presentation that allows the content layer to be displayed with different attributes (width, height, size etc) depending on the canvas size it is being presented on. In the context of development, responsive design utilizes fluid grids, percentage sizes rather than pixels, and to use relative units (such as em) whenever possible.

How to Make Emails Responsive

Campaign Monitor has a wonderful article on creating responsive email templates:
http://www.campaignmonitor.com/guides/mobile/

Here is a quick breakdown

  • Maximum width of 500px to 600px
  • Links and Buttons should be a minimum of 44 by 44px
  • Apple products automatically scale any font sizes below 13px to 13px
  • Navigation and Social Icons can be hidden for mobile email

Maximum Width of 500px to 600px

Replace fixed widths with percentages, and add max-widths.

Non-responsive code:

<table width="600" cellpadding="0" cellspacing="10">
    <tr>
        <td></td>
        <td>
            <table width="580" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        50% Off Winter Event!
                    </td>
                </tr>
            </table>
        </td>
        <td></td>
    </tr>
</table>

Responsive Code:

<table width="100%" cellpadding="0" cellspacing="10" style="max-width: 600px">
    <tr>
        <td></td>
        <td>
            <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        50% Off Winter Event!
                    </td>
                </tr>
            </table>
        </td>
        <td></td>
    </tr>
</table>

Media Queries

What would responsive design be without media queries?
To prepare our Email template, start by adding the following to the header:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

If you are unfamiliar with media queries, please refer to the following article by our Senior Front-end Developer, Hector
Mini Tutorial – Responsive Design in Magento

A media query used for mobile email templates would look for screen only, and search for the maximum device width. For example:

(From Campaign Monitor’s example)

<style type="text/css">
    @media only screen and (max-device-width: 480px) {
        /* Styles that apply to any devices smaller than 480px native device width */
    }

    /* Regular CSS here */
</style>

Feel free to use! important in your media query styles in order to ensure they’re being rendered properly.

Responsive eMail Templates Are New

Keep in mind that responsive email templates are still relatively new, and only a handful of mobile devices actually support it. Gmail users will be disappointed to know that the Android / Iphone application for Gmail automatically strips style tags from emails, rendering media queries useless. However, responsive emails are still a great step forward, as we prepare for more and more mobile users.