[frontendmasters.com] HTML Email Development, v2 [2019, ENG]

Table of Contents
Introduction
Introduction
00:00:00 - 00:06:24
Introduction
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. - https://github.com/rodriguezcommaj/frontendmasters https://static.frontendmasters.com/resources/2019-09-26-html-email-v2/html-email-v2.pdf
Why Email Matters
00:06:25 - 00:12:47
Why Email Matters
Jason demonstrates how emails are useful, widely used, and open technology that is accessible to all.
HTML & CSS in Email
00:12:48 - 00:18:31
HTML & CSS in Email
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
Basic HTML Email
00:18:32 - 00:23:39
Basic HTML Email
Jason surveys the elements contained in a basic html template. - https://static.frontendmasters.com/resources/2019-09-26-html-email-v2/html-email-v2.pdf
CSS Resets
00:23:40 - 00:31:58
CSS Resets
Jason explores different CSS resets that improve readability, and the aesthetic of emails in certain browsers and mailboxes.
Email-Friendly HTML
00:31:59 - 00:33:49
Email-Friendly HTML
Jason reviews the email-friendly HTML tags that insure readability across clients.
Email Template Exercise
00:33:50 - 00:34:37
Email Template Exercise
The students are instructed to open the starter file and add some content to it.
Email Template Solution
00:34:38 - 00:43:29
Email Template Solution
Jason live codes a basic HTML template and adds some lorem ipsum content in order to show how it renders.
Adding the CSS Exercise
00:43:30 - 00:49:22
Adding the CSS Exercise
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. - https://litmus.com/coupon/FRONTENDMASTERS
Adding the CSS Solution
00:49:23 - 01:02:50
Adding the CSS Solution
Jason live codes the CSS style to the HTML template.
Email Best Practices
Links & Buttons
01:02:51 - 01:17:46
Links & Buttons
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. - https://static.frontendmasters.com/resources/2019-09-26-html-email-v2/html-email-v2.pdf
Adding Buttons Exercise
01:17:47 - 01:18:04
Adding Buttons Exercise
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.
Adding Buttons Solution
01:18:05 - 01:20:28
Adding Buttons Solution
Jason demonstrates how to add accessible, and client-agnostic buttons.
Images in Email
01:20:29 - 01:32:24
Images in Email
Jason demonstrates how to add accessible and scalable images in an HTML email, how to make them responsive across devices, email clients, and browsers.
Adding Images: Exercise & Solution
01:32:25 - 01:34:15
Adding Images: Exercise & Solution
Jason demonstrates how to add a few new images to the HTML template, and answers questions from the audience regarding the use of emmet.
Background Images
01:34:16 - 01:40:03
Background Images
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.
Accessible Emails
01:40:04 - 01:51:20
Accessible Emails
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.
Accessibility Tools
01:51:21 - 01:57:41
Accessibility Tools
Jason surveys different screen readers and browser extensions that test an email's accessibility.
Email Layouts
Tables Layout
01:57:42 - 02:04:55
Tables Layout
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. - https://static.frontendmasters.com/resources/2019-09-26-html-email-v2/html-email-v2.pdf
Tables Exercise
02:04:56 - 02:05:57
Tables Exercise
Students are instructs the students to create a single column layout using tables.
Tables Solution
02:05:58 - 02:14:19
Tables Solution
Jason live codes the solution to the tables exercise.
Multiple Column Layouts Exercise
02:14:20 - 02:17:04
Multiple Column Layouts Exercise
Jason introduces multiple column layouts and instructs the students to build a multiple column layout in an HTML email.
Multiple Column Layouts Solution
02:17:05 - 02:25:40
Multiple Column Layouts Solution
Jason live codes the solution to the multiple column layouts exercise.
Responsive Email
02:25:41 - 02:31:20
Responsive Email
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.
Responsive Email Exercise
02:31:21 - 02:31:58
Responsive Email Exercise
Jason instructs the students to build a multi-column layout and make the columns stack on mobile.
Responsive Email Solution
02:31:59 - 02:38:34
Responsive Email Solution
Jason live codes the solution to the responsive email exercise.
Hybrid or Spongy Coding
02:38:35 - 02:43:37
Hybrid or Spongy Coding
Jason explores non traditional approaches to target specific email rendering issues, including, MSO ghost tables, using max-width, and fluid by default responsive emails.
Hybrid Coding Example
02:43:38 - 02:54:40
Hybrid Coding Example
Jason demonstrates how to use the non traditional approaches discussed previously for clients that do not support embedded styles and media queries.
Interactivity
Animated & Interactive Emails
02:54:41 - 03:00:45
Animated & Interactive Emails
Jason discusses when and when not to use interactivity and animation in emails. - https://static.frontendmasters.com/resources/2019-09-26-html-email-v2/html-email-v2.pdf
Hover States
03:00:46 - 03:05:37
Hover States
Jason demonstrates a baseline way to add interactivity to an email by using hover states.
Keyframe Animations Introduction
03:05:38 - 03:08:29
Keyframe Animations Introduction
Jason introduces keyframe animations as another way of making emails interactive, demonstrate how to code keyframes, and how to add them to an email.
Keyframe Animations Example
03:08:30 - 03:12:25
Keyframe Animations Example
Jason sets up a keyframe animation called fade-in, and instructs the audience to create an interactive hover state for a button.
The Checkbox Hack
03:12:26 - 03:15:47
The Checkbox Hack
Jason explores additional ways to make an email more interactive, and focuses on a hack that tracks state using check boxes or radio inputs
Checkbox Hack Practice
03:15:48 - 03:27:24
Checkbox Hack Practice
Jason live codes an interactive HTML that contains a slideshow element using the checkbox hack.
Checkbox Hack Review
03:27:25 - 03:32:12
Checkbox Hack Review
Jason shares other examples of emails using the checkbox hack, and answers questions from the audience about the checkbox hack and linking stylesheets.
Checkbox Interactivity Example
03:32:13 - 03:32:57
Checkbox Interactivity Example
Jason instructs the students to add three inputs, three labels, and three slides to an HTML email.
AMP Email
03:32:58 - 03:38:56
AMP Email
Jason introduces the Amp tool used to build interactive emails.
Testing
Testing Emails
03:38:57 - 03:46:14
Testing Emails
Jason advises to test emails before sending an email campaign and introduces a few testing tools, such as putsmail.com and caniemail.com. - https://static.frontendmasters.com/resources/2019-09-26-html-email-v2/html-email-v2.pdf
Building Emails: Tools
03:46:15 - 03:55:23
Building Emails: Tools
Jason surveys tools that help email developers build HTML emails, and shares resources to dig deeper into the topic of HTML emails.
Wrapping Up
Wrapping Up
03:55:24 - 03:56:29
Wrapping Up
Jason wraps up the course by explaining how to get involved in the HTML community. - https://static.frontendmasters.com/resources/2019-09-26-html-email-v2/html-email-v2.pdf