Uncategorized
Brooklyn

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

Etsy's Code As Craft blog illuminates how they make responsive email around limitations of HTML in email.

From the Etsy press kit

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.
Companies: Etsy

Before you go...

Please consider supporting Technical.ly to keep our independent journalism strong. Unlike most business-focused media outlets, we don’t have a paywall. Instead, we count on your personal and organizational support.

Our services Preferred partners The journalism fund
Engagement

Join our growing Slack community

Join 5,000 tech professionals and entrepreneurs in our community Slack today!

Trending
Technically Media