Best Practices for Responsive HTML Emails, a Guide

Caleb Szydlo

September 18, 2017

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.