Server Side Guy Preview: Best Practices for Responsive HTML Emails

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...