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.

3 ways to support our work:
  • Contribute to the Journalism Fund. Charitable giving ensures our information remains free and accessible for residents to discover workforce programs and entrepreneurship pathways. This includes philanthropic grants and individual tax-deductible donations from readers like you.
  • Use our Preferred Partners. Our directory of vetted providers offers high-quality recommendations for services our readers need, and each referral supports our journalism.
  • Use our services. If you need entrepreneurs and tech leaders to buy your services, are seeking technologists to hire or want more professionals to know about your ecosystem, Technical.ly has the biggest and most engaged audience in the mid-Atlantic. We help companies tell their stories and answer big questions to meet and serve our community.
The journalism fund Preferred partners Our services
Engagement

Join our growing Slack community

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

Trending
Technically Media