Jason Rodriguez
Litmus
Course Description
Email remains incredibly effective for reaching customers. In this course, you’ll learn the foundations of HTML email such as structure, semantic markup, layouts, and creating accessible email. Then you’ll dive into more complex topics like responsive techniques and adding interactivity to email campaigns.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
CloseLearn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 200+ In-depth courses
- 18 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 18 minutes
Jason Rodriguez gives an overview of the workshop, goes over the setup needed for the course, and gives context as to why HTML email is the way it is today.
Jason demonstrates how emails are useful, widely used, and open technology that is accessible to all.
Jason highlights the importance of using HTML and CSS that work across platforms and browsers, and compares HTML and CSS used for web application versus email.
HTML Email Basics
Section Duration: 44 minutes
Jason surveys the elements contained in a basic html template.
Jason explores different CSS resets that improve readability, and the aesthetic of emails in certain browsers and mailboxes.
Jason reviews the email-friendly HTML tags that insure readability across clients.
The students are instructed to open the starter file and add some content to it.
Jason live codes a basic HTML template and adds some lorem ipsum content in order to show how it renders.
Jason gives an overview of how to add styling to a template, namely embedded styles and inline styles, and reviews the email-friendly CSS elements. The students are instructed to adjust the styles of the email template started earlier.
Jason live codes the CSS style to the HTML template.
Email Best Practices
Section Duration: 54 minutes
Jason gives a survey of link and button conventions in HTML emails, explains how to make links and button accessible, and explores how the same buttons and links look on different browsers and email clients.
Jason instructs the students to create their own button using the buttons.cm resource, demonstrates how to create a bulletproof button, and center it in an email template.
Jason demonstrates how to add accessible, and client-agnostic buttons.
Jason demonstrates how to add accessible and scalable images in an HTML email, how to make them responsive across devices, email clients, and browsers.
Jason demonstrates how to add a few new images to the HTML template, and answers questions from the audience regarding the use of emmet.
Jason describes the benefits of adding background images to an HTML email with inline CSS, and how to set up fallback colors if the image does not appear in some email clients.
Jason highlights the importance of accessibility when building HTML emails, and describes a few rules developers can follow to make HTML emails accessible to all.
Jason surveys different screen readers and browser extensions that test an email's accessibility.
Email Layouts
Section Duration: 56 minutes
Jason demonstrates that HTML tables are modules that can be moved across a template, and describes a single column layout, and its basic table structure.
Students are instructs the students to create a single column layout using tables.
Jason live codes the solution to the tables exercise.
Jason introduces multiple column layouts and instructs the students to build a multiple column layout in an HTML email.
Jason live codes the solution to the multiple column layouts exercise.
Jason demonstrates how to adapt traditional responsive web design to HTML email, and introduces mobile-aware design as a way to make sure an email is responsive. Mobile-aware design means simple layouts, large text, large buttons, and design scales down.
Jason instructs the students to build a multi-column layout and make the columns stack on mobile.
Jason live codes the solution to the responsive email exercise.
Jason explores non traditional approaches to target specific email rendering issues, including, MSO ghost tables, using max-width, and fluid by default responsive emails.
Jason demonstrates how to use the non traditional approaches discussed previously for clients that do not support embedded styles and media queries.
Interactivity
Section Duration: 44 minutes
Jason discusses when and when not to use interactivity and animation in emails.
Jason demonstrates a baseline way to add interactivity to an email by using hover states.
Jason introduces keyframe animations as another way of making emails interactive, demonstrate how to code keyframes, and how to add them to an email.
Jason sets up a keyframe animation called fade-in, and instructs the audience to create an interactive hover state for a button.
Jason explores additional ways to make an email more interactive, and focuses on a hack that tracks state using check boxes or radio inputs
Jason live codes an interactive HTML that contains a slideshow element using the checkbox hack.
Jason shares other examples of emails using the checkbox hack, and answers questions from the audience about the checkbox hack and linking stylesheets.
Jason instructs the students to add three inputs, three labels, and three slides to an HTML email.
Jason introduces the Amp tool used to build interactive emails.
Testing
Section Duration: 16 minutes
Jason advises to test emails before sending an email campaign and introduces a few testing tools, such as putsmail.com and caniemail.com.
Jason surveys tools that help email developers build HTML emails, and shares resources to dig deeper into the topic of HTML emails.
Wrapping Up
Section Duration: 1 minute
Jason wraps up the course by explaining how to get involved in the HTML community.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops