Tips on making mobile-ready HTML email across platforms [Etsy]

Etsy developers have been digging deep into how to make email responsive across clients, particularly as half the company’s email is read on mobile devices.

“If you’ve ever written an HTML email, you’ll know that the state of the art is like coding for the web 15 years ago,” according to Etsy’s Code As Craft blog.

Yet the team at Etsy has cracked it, up to a point. They’ve realized a stronger set of tags than they thought are available across platforms, and by using them judiciously a careful developer can achieve responsive email design.

Some open secrets the team uncovers and reveals in this post:

• Wrapping tables within tables so that a two column structure for a desktop will become one column on mobile.
• The  small subset of CSS inside <style> tags supported by Gmail.
• The “!important flag” for making sure that media queries that will work on iOS devices (but not Android) supersede earlier styles.
• Example code on GitHub.