Coding Design Systems - ep18 - Design Systems for Emails UI, with Thomas Defossez

Every Tuesday at 5:30PM UTC, join @Georges_Gomes, @m4d_z, and their guests in a new live coding session about design systems, on Backlight.dev!

⎯⎯⎯ In this episode ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

00:00 - Intro: Welcome Thomas Defossez 02:29 - Why is email development so different from regular web dev 05:02 - Using design systems as a foundation for the development of your email 15:59 - Documentation for design systems 22:02 - The low-level concerns of email development 26:17 - Developing components for an email design system 30:35 - Working with email clients’ limitations 36:40 - Making email development faster 42:41 - A live example: the Stackoverflow email design system 45:53 - An idea: using Nunjucks templates to build emails from their design systems 48:52 - Outro: picks from Thomas

⎯⎯⎯ Description ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Emails coding is often a poor parent of web development. Dealing with issues from old rendering engines and a lot of platforms with a certain lack of compliance doesn’t help email developers.

With the help of Thomas Defossez, we go down the rabbit hole of email development and learn how design systems are the best way to ensure rendering consistency across emails platforms.

⎯⎯⎯ Resources ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

• Stackoverflow’s email design system documentation: https://stackoverflow.design/email/guidelines/getting-started/

• lepatron.email: https://www.lepatron.email/en/

• emailonacid.com: https://www.emailonacid.com/

• caniemail.com: https://www.caniemail.com/

• 🐥 @tde_badsender: https://twitter.com/tde_badsender

• Badsender: https://www.badsender.com/

• 24jours.email: https://www.24jours.email/

Picks:

• Badsender’s documentation at zeroheight: https://zeroheight.com/2bcee821b

• Badsender’s emails design system white book: https://www.badsender.com/en/livre-blanc/design-system-email-2/

• Badsender’s email development white book: https://www.badsender.com/en/livre-blanc/code-an-email-in-html/

• Parcel Email Coding Platform: https://parcel.io/

• “Email Expiration Date” initiative: https://www.zerocarbon.email/

• EM Day conference: https://www.emday.fr/

• emailgeeks slack community: https://email.geeks.chat/

• Good Email Code library: https://www.goodemailcode.com/

• 🪄 Backlight Design Systems Editor: https://backlight.dev/?utm_campaign=sessions%3Acds

• 🐥 m4dz: https://twitter.com/m4d_z