Responsive, Mobile Friendly Email / Newsletter Design

According to recent results over 60% of all emails are opened on a mobile device, and this number continues to climb. In another year, email opens for mobile email clients may surpass their desktop counterparts. But emails, like webpages, aren’t always designed with such a small screen in mind, so when you check your email on a smartphone it can be a frustrating exercise in scrolling and zooming.

With the right code and design in place (see guidelines below), your email can be responsive, just like your website, and make the user experience for your clients better. A responsive website or newsletter has a layout that “responds” and changes configuration based on what size screen it is being viewed on vs. sending out multiple versions of the same email.

Below is an example of a non-responsive email viewed on an iphone [left] alongside it’s responsive counterpart [right]. Notice how the responsive version fits the screen so that the text is readable without zooming in, and the text flows around existing images.

Mobile Email Comparison

Guidelines for a successful, responsive email / enewsletter:

  • CSS media queries.
  • Single column layout.
  • Key information and call to action at the top of the email.
  • Keep content as concise as possible. Use teasers with “read more” links instead of lengthy articles. Studies show that people scan instead of reading emails, so lengthy paragraphs without any calls to action are not ideal.
  • 13px font size minimum.
  • Touch-friendly buttons. Apple recommends a minimum target area of 44×44 pixels. Leave space around buttons and text links for easier tapping. And, use descriptive links in your email instead of “click here” – as your readers scan your email the links will catch their eye.
  • High contrast colors (dark text on a white background) for better readability on smaller devices which often have battery-saving dim settings.
  • Test your email in many different email clients and different devices. At Evolv, we use a testing software to do this for you.

Example of an email viewed on a device that does not support Media QueriesEmail Support

Currently (as of January 2013), the code that makes responsive emails possible – the media query – is not supported by every email client or device. It is only supported by the iPhone, Android, Palm, and the very newest Blackberry and Windows devices. The Gmail app on all devices does NOT support media queries. Instead, viewers will see the email like the image at right – at its normal size but cut off, causing them to have to scroll sideways to see the content. It may be a little while longer before all email apps support the responsive option, but best to start now and get your emails or enewsletters looking great for all devices!

Some resources to get you started:

Read more about Responsive, Mobile Friendly Website Options »

Interested in learning more? Watch this free archived webinar of “Mobile Email 101” given by Evolv’s Lydia Roberts in partnership with HighRoad Solution and ASAE. Watch the 30-minute webinar or download the PDF. Also  check out this webinar and resources by Litmus – Mobile Email: Why, What, How?
back to top