Best Practices for Responsive HTML Emails, a Guide

Olivia Rhye

So you’re thinking of coding a responsive email? Good for you, fortune favors the bold! Before you start though, let’s take a moment to investigate the do’s and don’t’s of responsive email. Take a look below to see best practices for designing on of these beasts as well as device support. Most importantly however, manage expectations. Much like Brendan Fraser in Blast From The Past or Encino Man, HTML emails are a little behind the times. That being said, the support for responsive emails is limited.

Designing for mobile, best practices

  • Don't add, just subtract: Because support for the media-queries we use to hide images and elements are not supported by all devices/clients, mobile-only images will show up all the time in some cases. Therefore we cannot add any new content at mobile.
  • Larger buttons and calls to action: Some people have thick fingers, like farmers and thumb-wrestlers. Apple’s iOS Human Interface Guidelines recommend a minimum ‘tappable’ area of 44x44px.
  • Generous font sizes: Make them big so they’re easy to read. iOS devices generally won’t accept a value of less than 13px without a lot of coding and manipulation.
  • 600px max-width layouts: Good practice for static width emails as well, ensures that content won’t be lost outside the viewport.
  • Single-column layout (not set in stone, just makes life easier): By making it one column you’re saving the dev a lot of time trying to stack tables, also for devices that don’t support stacking it will still look okay at mobile.

Support for responsive emails

CSS Support Guide for Email Clients
"A complete breakdown of the CSS support for the top 10 most popular mobile, web and desktop email clients on the planet."

Yes:

  • iOS (iPhone/iPad)
  • Android 4.x+ native client
  • Android Outlook.com app
  • Outlook.com (iOS)
  • Windows Phone 7.5
  • BlackBerry OS 6
  • BlackBerry OS 7
  • BlackBerry Z10
  • Kindle Fire native client

No:

  • Gmail app (iOS + Android)
  • Inbox by Gmail app (iOS + Android)
  • Android Outlook Exchange via native client
  • Android Yahoo! Mail app
  • Gmail (Android Browser)
  • Mailbox (iOS + Android)
  • Outlook.com (Android Browser)
  • Yahoo! Mail (Android Browser)

Ready to start a project?

Book a free consultation