Ten Tips for Responsive Design Email Templates

Posted by Ross Kramer on August 5th, 2013 at 6:55 am

While studies show that more than half of emails were opened on a mobile device in the first half of 2013, seven out of 10 recipients claim they will delete an email if it doesn’t look good on their laptop, tablet or phone. Clearly responsive design is something email marketers must be considering, and especially now – the season of holiday strategy planning.

We also know that once a recipient opens an email on one device, she will rarely re-open it on another, so email marketers really only have one chance to make an impression on their customers and every click counts. A recently published Listrak whitepaper, “Reach Your Holiday Shoppers the Right Way with Holiday Design,” reports on why responsive design is so important in email marketing, how it works and 10 best practices for designing responsive email templates. Here’s a quick look at those best practices:

1. Think of content as a grid – Layouts change depending on screen size, so think about how content can be rearranged. Our designers recommend approaching content as a grid of moveable parts that will make sense as a whole in various layouts. Of course, always make sure the main message is front and center and think about how you want recipients to interact.

2. Consider font size – For example, be careful if you use text as part of an image, because it could scale down so much that it’s impossible to read. Also choose fonts that are clear and easy to read in general.

3. Pay attention to subject lines and pre-header text – Email inboxes on smartphones show three things – sender or company name, subject line and pre-header text. Carefully crafted subject lines will stand out, but it’s the pre-header text that really gives you the opportunity to engage and entice the recipient, because subject lines can get cut off if too long. Use the preheader to tell her what to expect and why she should open the email (for example, “$15 off your next purchase of $75 or more” or “Explore Our Latest Collection”).

4. Simplify navigation – Website navigation or menu links in emails typically don’t generate a lot of clicks, but take up a lot of space on a mobile screen because they’re usually part of the message header. Responsive design allows you to move navigation links to the bottom of the message and stack them neatly in easy-to-click buttons. You can also narrow the number of links to the two or three most important, because customers can navigate through your website once they get there.

5. Design for thumbs – It’s been reported that nearly one-third of all mobile click-throughs are actually made by accident, which can obviously affect the ROI of your campaigns. You not only have to think about how your mobile emails look, but how recipients will interact with them. One of the challenges is that while you want to try to avoid accidental clicks, you also want to be sure buttons, links and other tap targets are large enough for fingers and thumbs to deliberately click on, and that there is enough padding around tap targets so users click on the correct link.

6. Make calls to action prominent – Not only should buttons and tap targets be large and easy to use, they should also be clearly labeled so people know what to expect when they click.

7. Make it easy on customers – Optimize messages with click-to-call and auto-applied discounts so customers don’t have to toggle between open tabs and applications.

8. Incorporate white space – Recipients are used to scrolling through messages on mobile devices, so don’t try to cram everything into a small area. It’s better to make emails organized and easy to read.

9. Test on different devices – Keep in mind that responsive email design works in native email apps on iPhones and Android platforms and that those reading emails on mobile browsers or other email apps may see the desktop version.

10. Monitor metrics – For example, people tend to shop on mobile devices in the evening, which you may want to consider when planning your deployment schedules. You only have one chance to engage someone on a mobile device, so try sending campaigns at different times to maximize opens, clicks and conversions, especially as you ramp up for the holiday season.

To learn more, you can download the whitepaper “Reach Your Holiday Shoppers the Right Way with Responsive Design,” at http://www.listrak.com.

2 Responses to “Ten Tips for Responsive Design Email Templates”

  1. Nancy Arter says:

    Excellent article on the importance of designing creatives for mobile devices. I can't tell you how many poorly designed email messages I attempt to read on my iPhone. I predict creative agencies with a competency in mobile will grow exponentially over the next several years as large corporate marketers struggle to get their messaging right for mobile.

  2. Frank Powell says:

    I have been using an app called Email for Business on my iPad for over a week. The templates are just perfect for all my business emailing needs.

Leave a comment