Building Modern HTML Emails Without Going Mad
Workshop, 4×2.5h + Q&A • Thu & Fri, June 18–26
09:00 – 11:30 AM PT (Pacific Time) (18:00 – 20:30 CET)
Coding HTML emails is a beast of its own with lots of differences from coding web pages. This workshop will make you reconsider everything you know about coding HTML emails and hopefully make you love the craft.
In this workshop by Rémi Parmentier, a true HTML email detective, you will learn all the latest and most up to dates techniques to code HTML emails that work well in Gmail, Apple Mail, Yahoo, Outlook and most other popular email clients.
In this workshop, you’ll learn:
- The most common gotchas and bugs. You’ll get to know the lastest bugs and hacks in email clients and you’ll learn how to deal with them.
- How to master Outlook and Word’s rendering engine. How does Word’s rendering engine work? When and how to use tables for layouts. How to use conditional comments and what are mso specific properties?
- Responsive emails. The fluid/hybrid and the mobile first approaches to make responsive emails without media queries.
- Accessibility. Improving the accessibility of your emails by using semantic code and relevant alternative text.
- Dark mode. Optimizing your emails for dark mode.
- Test and audit. The best tools to test, audit, and debug your emails, from rendering to accessibility and code weight.
- Interactive emails. How to use :hover, :checked, other native HTML/CSS interactions and forms in email.
- AMP and Adaptive Cards. What are amp4email and Word adaptive cards, and how does this work and what can we do with it?
You will be taking home a couple of accessible templates that are responsive and interactive.
What prerequisites skills do you need?
Basic understanding of HTML and CSS.
What hardware/software do you need?
Bring a Mac or Windows computer with your favorite text editor. If you have an email template you’d like to improve, please bring it!
About Rémi Parmentier
Rémi Parmentier is a French front-end developer working at his own small web development agency, Tilt Studio. He loves to learn, and enjoys even more to teach.
Time & Schedule
This workshop is split over four days. Our virtual doors open at 8:45, we start at 9 AM PDT.
The workshop sessions will run on the following days:
- Thu, Jun 18, 09:00 – 11:30 AM PDT
- Fri, Jun 19, 09:00 – 11:30 AM PDT
- Thu, Jun 25, 09:00 – 11:30 AM PDT
- Fri, Jun 26, 09:00 – 11:30 AM PDT
Day 1: Welcome to HTML Emails
9:00 AM – 9:45 AM | What to expect.
Email clients will change your code. But why? And how? Learn what to expect and how you can build robust and clean email code. Practical demos of common tools to use for emails.
10:00 AM – 10:45 AM | Outlook.
How to master Outlook and Word’s rendering engine. How does Word’s rendering engine work? When and how to use tables for layouts. How to use conditional comments and what are mso specific properties?
Day 2: Responsive
9:00 AM – 9:45 AM | Making Emails Responsive without Responsive.
Explore the different techniques to make responsive emails, with and without media queries: Responsive, Fluid/Hybrid, Mobile First.
10:00 AM – 10:45 AM | Responsive Emails in Practice.
Common patterns to use in responsive emails. Practical use-cases, and interactive exercises related to building responsive emails.
Day 3: Accessibility
9:00 AM – 9:45 AM | Making Emails Sound Good to Screen Readers
Discover how to build more accessible emails by using proper semantic HTML, good alternative texts, with a touch of ARIA attributes. Practical explanations on how to use a screen reader on the phone or computer you already have.
10:00 AM – 10:45 AM | Dark Mode
Turn the lights off and see how to make emails look good in email clients’ dark mode (in Apple Mail, Gmail and Outlook).
Day 4: Interactivity
9:00 AM – 9:45 AM | Interactivity 101
Learn how to use CSS pseudo-classes and HTML form elements to create content you can interact with right inside the most popular email clients. Interactive exercises and step-by-step coding to get started with interactive emails.
10:00 AM – 10:45 AM | Advanced Interactivity
Dive deeper into interactivity and learn about Google’s amp4email and Microsoft’s Adaptive Cards and what’s possible with these technologies in emails.