Responsive Design Can Help Your Institution’s Email Too

Responsive web design has been trending for a while now, but for some reason, responsive email design has lagged behind. Even we at VisionPoint have pushed responsive email design to the curb in favor of what we thought were “more pressing priorities”, until we read the following stats.

According to Litmus, mobile devices accounted for 55 percent of internet usage as of January 2014. What’s more, mobile users are more likely to read emails than they are to read our websites themselves and the percentage who are reading emails on-the-go is rising fast.

Litmus data also shows that the rate of email opens via mobile devices has increased 21 percent since January 2013. So what’s the moral of the story? Email may just be a better platform for reaching mobile audiences than our websites, so designing emails for an exceptional user experience needs to be a top priority.

Why Responsive Email?

The beauty of responsive web design is that it allows developers to create one website that automatically stretches, shrinks, and reorganizes content depending on the size of the user’s screen. In other words, no matter what sort of device readers are using (or holding), brands can be confident their users are enjoying an exceptional experience.

Beyond the user experience benefits, responsive email design presents another advantage: Mobile phones are updated quicker and have more up-to-date software than desktops. Email campaigns are complex enough without the need to code a number of different emails for a number of different devices. In the desktop world you need to code your email for the lowest common denominator, your Outlook 2003s, your Lotus Notes, etc. These guys are still around and don’t read modern HTML too well.

However, mobile devices with advanced software are updated more frequently, which in turn facilitates users’ ability to view our emails in a responsive format.

To sum things up, responsive email and mobile are perfect together, and responsive email design is now easier than ever. So really, the question isn’t so much “why” we should design email responsively as “how” to make it happen. Here are a few pointers we learned from doing it ourselves.

So What Do I Need to Do?

The following tips might help those of you who are programmers or developers thinking about implementing responsive design:

Responsive Design Best Practices

• Keep everything in one column and remember that narrower is ideal. Most smartphone screens have a width of 640 pixels. Be aware that many Android devices (which make up more than 80 percent of the smartphone market) have full high definition displays with a width of 1080px.
• Make links large and clickable. Apple specifies links should be no smaller than 44×44 pixels to prevent “fat finger syndrome.”
• Make body copy legible. Designing responsively is all about creating a great user experience, so don’t make your users have to squint to read your copy. Try to your text no smaller than 13px.
• Trim down your content. This is important. Users on mobile devices may be more likely to see your email but they are less likely to read it if it’s too verbose.

Coding Considerations

• Graceful degradation is key. There are unfortunately still legacy email clients that need a table structure to achieve specific layouts. Write more generic CSS to deal with these legacy clients. Afterward, overwrite it with more specific rules to achieve the design functions that aren’t supported by the legacy clients. A couple of great places to get information about what CSS properties each client supports are the email standards project and a guide made by Campaign Monitor.
• Media queries are a great tool to provide responsive behavior to HTML elements. These are are widely supported by modern browsers (IE8 and before excluded, but are those really modern?), and are defined by providing logic for the browser to read within the stylesheet link or within the CSS itself. Support varies by client, but by graceful degradation of the CSS, a passable layout can still be achieved for the legacy clients.
• Make sure your email is one column and set to 100 percent width. Screens are getting better with each passing year. If you don’t want to deal with the hassle of constantly adjusting code to fit new screens, use percentages instead of fixed pixel widths.

There is much more you can do with responsively designed email – these are just the basics. To learn more about responsive design and how it can help your institution, check out some of our other blogs.