Responsive email design

According to a study of over 250 million opens worldwide by email analytics providers Litmus, 47% of emails are now opened on mobile devices. It’s only natural then that users expect email to evolve and accommodate their needs when interacting with smaller screens and touch interfaces, just as websites have with responsive designs Â¬

Developers and designers have already begun forging the path towards better experiences for mobile email users, and marketers are beginning to see the light: a new era of responsive email design is upon us Â¬

While most mobile email clients today can scale emails down to fit smaller device screens, that often results in messages that are hard to read, and ultimately ignored. With responsive email design, you can ensure an optimal experience across platforms and devices, resulting in greater impact with your messages and higher ROI on your marketing efforts Â¬

So… for a responsive email design primer:

So exactly what does responsive email design entail? Essentially, it’s a set of techniques and principles applied to email design that includes media queries, fluid layouts and images, and customized copy making for emails suitable for both desktops and mobile devices. While traditional emails generally feature fixed-width frameworks, multiple images and paragraphs of text, responsive emails adapt to the device viewport size and display content accordingly, often skipping elements like blocks of text to allow touchscreen users to read and respond calls to action quickly Â¬

Designing emails for a mobile screen forces you to be ruthless with your content and aesthetic and makes you get to the point faster.
Tom Boates, VP of User Experience at RunKeeper

Responsive techniques allow designers to hide, stack, expand/collapse or modify content to optimize content display in emails on smaller screens. So if, for example, you have three short paragraphs in your email, you could hide those paragraphs and instead display a shorter message and a call-to-action on a mobile device — thus allowing the user to engage with your email on the move, with ease. Of course, this takes more than just clever HTML/CSS code: content plays a big part in crafting a memorable and effective responsive email that makes do with concise, yet to-the-point messaging Â¬

Responsive design also includes simple considerations to make emails easier for mobile users to consume, such as large buttons for easy tapping, layouts that follow a hierarchy for content so they work even without image display enabled, and hiding unnecessary content and navigation. In effect, designing with these guidelines in mind also encourages clearer messaging and simpler layouts that don’t seem tedious on a smartphone Â¬

iPhone 5 Mail appUnfortunately, there isn’t yet a lot of literature available online as to the technical possibilities of responsive emails, and most designers working on them today have to test their templates often on a variety of devices and clients to ensure everything is in its right place. Still, there are a few basic things you can do to get started on the right track:

  • Design — and write — for mobile first
  • Respect touch-based interface guidelines
  • Code for performance and test for compatibility

 

Edited abstract from: Why responsive email design is more important than ever – The Next Web