5 Secrets of Responsive Email Design

 
 

In today’s hyper-connected environment, marketers are using every arrow in the quiver to get their messages across. And despite the rise of social media, email remains the shining star in the arsenal: A strong 59% of all B2B marketers named email the “most effective channel” for generating revenue (BtoB Magazine).   

But with the average consumer receiving 200 to 300 emails every day – and counting – hitting your target takes more than close aim.

Before taking a shot, marketers also need to keep two closely intertwined email trends in mind:

■ About 48% of all email is now opened on a mobile device (Litmus).

■ Emails that fail to display correctly get deleted immediately by 71.2% of users (BlueHornet).

Boom! These numbers make a strong case for responsive email design. Basically, we’re talking about fluid email design that responds and adapts to whatever device it is being viewed on, and looks great while functioning seamlessly across the board.

A growing number of marketers have already got the memo. In a recent Forrester Research study, 72% of enterprise email marketers said they are already using responsive design. Meanwhile, 27% say they plan or “would like to” use responsive design… probably, like, really soon.

Planning or flirting with the option won’t cut it, though. But the good news is: boosting those click-through-rates and lifting conversions across multiple devices is not rocket science.

How do you add responsiveness to email design? There’s a host of tech-savvy goodness such as DOCTYPE, media queries, viewport rendering and using HTML versus some other options. We cover these in detail in our free guidelines on "Responsive email design".

For a start, a few basics like these 5 Secrets of Responsive Email Design will help get things off the ground:

1. Use single column layout

Desktop email is viewed on a horizontal screen, so stacking text and tables side-by-side looks great and makes good use of space. But not so much on mobile devices. Here, emails work best in one column from top to bottom, as users tend to hold their smartphones upright.

Cater to these users by designing the mobile version of your email first, sticking to a single column layout without using fixed width. Keep things simple and feel free to generously pepper the content with nested tables, images, or interactive elements that lend rhythm to your design.   

2. Pre-game with strong pre-headers

The typical usage scenario for email is an early-morning reader sifting through the day’s messages in list view – selecting which messages will be opened and deleted. Tipping the scales in your favor, make sure to craft a strong pre-header. This is the short summary text appearing next to the email’s subject line in the inbox.

This is prime editorial real estate and the right place to drive a convincing argument for clicking to open the message. Either by summarizing the content of the message, leading with the first sentence of the email, listing your sub-headlines, or supporting the subject line with a strong call to action. On that note, you also want a strong subject line to pull readers. 

3. Go BIG with large fonts and prominent calls-to-action (CTAs)

Allow for easy readability with generously sized typefaces for body text, interspersed by bold headlines and sub-heads with nice color pop. And you are using left-aligned text, right? Please use left-aligned text, as not all operating systems scale content to fit the screen. Also maintain a vertical hierarchy and place key messages at the top.

Invite users to “tap” into the action with ‘tappable’ call-to-action (CTA) areas, for which Apple's iOS Human Interface Guidelines recommends a minimum size of 44x44 pixels. Without having to zoom in, users can activate buttons such as “LIKE US ON FACEBOOK”, “FOLLOW US ON TWITTER”, “SHOP NEW ARRIVALS” – tap, tap, tap!

4. Use images responsibly

Embedding images into your email design is where responsiveness meets responsible usage: Not all email clients will display images automatically – some require authorizing the sender – so don’t stack all your messaging into image files. Plus, without enough text content, the only thing responding is the spam filter.

Experienced mobile designers also like to use smaller, less bandwidth-consuming images for their messages. This can be achieved by including a media query to determine the display device, followed by instructions to include smaller-sized images for mobile viewing to avoid frustrating load times (more in our free PDF "Responsive email design").

5. Pre-flight your design 

This should be a no-brainer, but the only way to safeguard your design against #displayfails is using a tool to test your email message. Digital marketing tools such as Selligent Campaigner feature options to simulate email messages in a safe environment before going live.

The following websites also offer testing options:

mattkersley.com/responsive Enter a URL with your responsive design and preview it in different sizes.

resizemybrowser.com Not all developers have all the different devices to test their design on. This website will rescale your browser to the desired resolution.

pxtoem.com Convert your pixels into percentages for an optimal responsive design.
 

Ready to dig deeper into making your emails shine from desktop to laptop to mobile interfaces? Download our free Guidelines on "Responsive email design".
 

Main image photo source: Shutterstock (author: Rawpixel)