Email is one of the most important tools for connecting with people on the web. But, most web designers ridicule HTML email as outdated, difficult, and not worth the trouble. Learn the importance of HTML email and prove that building beautiful, responsive email campaigns isn’t as scary as you thought.
Justine is an email design critic and fervent advocate for table-based layouts. A regular industry speaker, she also organizes the world’s only conference for people who make email.
Responsive HTML Email Design
00:00 - 03:24
Justine Jordan begins the Responsive Email Design course by introducing herself and Jason Rodriguez. They both work at Litmus which is a SAAS company that helps their clients test and track emails. Justine also provides a link to download the course files.
- 03:25 - 11:54 Why Email Justine loves email because it’s direct, quantitative, and real-time. It can also be interactive and permissive. Justine talks about the advantages of using email and why it’s important to developers.
- 11:55 - 21:16 5 Rules A 2007 blog post highlighted 5 rules to sending effective emails. Justine shares the rules and talks about how they are still relevant today. She also shows these rules in action with a couple email examples that contain both plain-text and HTML versions.
- 21:17 - 25:16 Mobile Experience When it comes to email, mobile user experience is often overlooked. Companies will invest heavily to provide a mobile app or responsive website. However, email communications will be unreadable to mobile users. Justine provides a few examples of poor mobile experiences.
- 25:17 - 32:13 Mobile Email Statistics Justine shares some statistics regarding desktop, webmail, and mobile email opens. Since 2011, they have seen a 512% increase in mobile email. Currently 49% of their email opens are on a mobile device.
- 32:14 - 38:49 Email Strategies There are three different strategies for approaching mobile email: Mobile-First, Liquid, and Responsive. Justine walks through these strategies and talks about adaptive vs. responsive layouts. These strategies are very similar to those used in web design.
- 38:50 - 47:45 Web Design is not Email Design Email is not an image, print ad, or even a one-page website. While an email shares many of the attributes of a webpage, email clients do not support many web standards. This requires email designers to use different techniques. For example, web designers use <div> tags for layout. In emails, <table> tags are required. Justine compares many of these differences.
- 47:46 - 52:52 Email Rendering Gmail and Outlook both have rendering engines that create a lot of issues. For example, Gmail removes style blocks. Outlook on the other hand uses different rendering engines depending on version and platform.
- 52:53 - 01:00:40 Subscriber Experience Enhancing the subscriber experience is key to increasing open and click-through rates. From-names, subject lines, and preview text all affect this experience. Justine shares some examples of both good and bad inbox experiences and also gives a few resources on how to recognize what features are supported in different email clients.
01:00:41 - 01:10:39
State of Email Standards
Over the years, there have been an number of efforts to align email with web standards. This is difficult because each email client has their own set of priorities. Justine talks about the progress (or lack there of) and what hurdles still exist.
- 01:10:40 - 01:14:52 Why Email (again)? Justine reviews the state-of-the-union related to email. While many issues still exist, there are some really innovative solutions. She shares a few creative email designs and talks a bit about the future.
- 00:00 - 03:24 Introduction Justine Jordan begins the Responsive Email Design course by introducing herself and Jason Rodriguez. They both work at Litmus which is a SAAS company that helps their clients test and track emails. Justine also provides a link to download the course files.
Understanding Tables & Email Structures
01:14:53 - 01:23:42
Using the Example Files
Jason Rodriguez from Litmus takes over to start talking about building emails.The first step is forgetting how you build websites. Layout in emails start with tables. Jason talks about this and introduces the first example and shows the audience what the end project will look like.
- 01:23:43 - 01:34:28 Tables Using the 01-example-tables Codepen, Jason begins creating the email. He describes the table tag sytax and how table rows and cells are created. He also show how to reset all the default styling of a table so inline styles will have more control.
- 01:34:29 - 01:44:26 Audience Questions Jason takes a few minutes to answer a some audience questions. These include questions on his use of wrapper tables, vertical spacing, and inheriting widths.
- 01:44:27 - 01:52:49 Example 2: Adding Structure Structure in an email is created by using the align attribute for positioning content and inline padding for white space. Using file 02-example-structure, Jason leads the audience through this exercise.
- 01:14:53 - 01:23:42 Using the Example Files Jason Rodriguez from Litmus takes over to start talking about building emails.The first step is forgetting how you build websites. Layout in emails start with tables. Jason talks about this and introduces the first example and shows the audience what the end project will look like.
Images, Styles & Buttons
01:52:50 - 01:57:34
Automatic Image Blocking
According to Litmus, 43% of users view emails with images off. This is because most email clients block images by default and buttons to unblock images are often confusing.
01:57:35 - 02:02:44
Using ALT Text
While ALT text is not supported everywhere, it is supported in most email clients. On top of that, ALT text can often be styled to make it more readable or accessible. Justine demonstrates how to style ALT text and talks about where it’s supported.
- 02:02:45 - 02:05:25 Image Borders and Gaps Images wrapped in an <a> tag should have their border attribute reset. Setting their display style to “block” will eliminate gaps below images. Justine discusses this and shares a few more styling tips related to images.
- 02:05:26 - 02:17:27 Example 3: Images Using 03-example-images, Jason walks through the syntax for adding image to the email. He also answer a few audience questions and clarifies image sources should always use absolute URLs.
- 02:17:28 - 02:26:43 CSS In Emails On the web, styles live either in an external style sheet or within a <style> block. In emails, however, inline styles are the safest and most supported way to style elements. For consistency, Justine recommends only styling the <table>, <a>, <img>, and <span> elements. She also talks al little about CSS resets.
- 02:26:44 - 02:35:37 Example: Styles, part 1 Jason walks through the 03-example-styles file to demonstrate how to add CSS styles to an email. He starts with the styles in the head section. This includes client-specific resets and general resets.
- 02:35:38 - 02:48:25 Example: Styles, part 2 Jason continues his walk through of the style example file. He covers hidden pre-header text which can be used display text in email previews. He then moves on to inline styles.
02:48:26 - 02:59:56
Example: Styles, part 3
Jason wraps up the styling example discussing image and ALT text styles. He also answers a number of audience questions and tests the current design in Litmus Builder.
02:59:57 - 03:10:15
Traditionally, email designers created buttons with images. However, since images are blocked by default, it’s easy for users to miss crucial call-to-action elements. Jason demonstrates three approaches for creating bullet proof buttons that will look great even when images are blocked. He also briefly shows the code in action using example file 06-example-buttons.
- 01:52:50 - 01:57:34 Automatic Image Blocking According to Litmus, 43% of users view emails with images off. This is because most email clients block images by default and buttons to unblock images are often confusing.
Making Emails Responsive
- 03:10:16 - 03:18:53 Using Media Queries Media queries are sets of conditional statements added to CSS to change the layout/style of a document. They are not supported in every email client, though. Justine explains how to use media queries and the caveats they bring.
- 03:18:54 - 03:26:08 Mobile Email Quirks Before diving into the responsive code, Justine overviews a number of the concepts covered so far. She also talks about styles that are necessary to override unexpected client-specific behavior.
- 03:26:09 - 03:36:08 Example: Responsive Emails, part 1 Jason opens up the 07-example-responsive file and demonstrates how elements will hide/reflow as he resizes the browser. He then jumps to the code and explains what creates the responsive behavior.
- 03:36:09 - 03:44:18 Example: Responsive Emails, part 2 Jason continues his explanation of the responsive email example by walking through code affecting the button text. He also shows how the tables containing two columns are stacked to form a single column.
03:44:19 - 03:49:14
Where Emails are Opened
Justine takes a few minutes to talk about where emails are first opened. After sharing some Litmus research from 2012, she shows the audience a more recent article from Campaign Monitor. Justine also provides a link to more statistics on the Litmus blog.
- 03:49:15 - 03:54:23 Web Fonts There are three methods for adding web fonts: @font-face, @import, and the <link> tag. Fallback fonts will be displayed if the email client does not support web fonts.
- 03:54:24 - 03:59:17 Targeting Email Clients Just like with targeting browsers on the web, conditional HTML statements can be added to target specific email clients. These conditional statements typically wrap around style block. Jason demonstrates how to conditionally target different versions of Outlook and Firefox/Webkit-based clients.
- 03:59:18 - 04:08:45 CSS3, Interactivity, & Video Email clients that support CSS3 open the door to a lot of creativity. Altering border-radius, transforms, transitions, or @keyframe animations can make emails much more engaging. Jason gives a few examples of creative uses of CSS3. He also talks about adding interactivity and HTML5 video.
Advanced Topics, Tools, Resources & Q&A
- 04:08:46 - 04:15:00 Advanced Techniques While answering an audience question, Jason talks through a few advanced techniques to use when creating emails. This includes dealing with email clients like Gmail that strip out style blocks.
04:15:01 - 04:26:17
Tools & Resources
Jason provides a large number of resources for creating effective emails. These include resources the litmus.com website as well as third-party frameworks and templates.
- 04:26:18 - 04:32:31 Q&A, part 1 Jason and Justine answer audience questions. First set of questions include topics about email creation services and analytics tracking.
- 04:32:32 - 04:42:51 Q&A, part 2 Jason and Justine continue to answer audience questions. They share some insight on third-party frameworks and image compression.
- 04:42:52 - 04:50:28 Q&A, part 3 Jason and Justine wrap up the course with a few last audience questions about background images, animated GIFs, and CSS support.