This course has been updated! We now recommend you take the HTML Email Development, v2 course.
Table of Contents
Why Email?
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Understanding Tables & Email Structures
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.
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.
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.
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.
Images, Styles & Buttons
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.
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.
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.
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.
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.
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.
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.
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.
Bulletproof Buttons
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.
Making Emails Responsive
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
Q&A, part 1
Jason and Justine answer audience questions. First set of questions include topics about email creation services and analytics tracking.
Q&A, part 2
Jason and Justine continue to answer audience questions. They share some insight on third-party frameworks and image compression.
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.