Creating a Responsive HTML Email

Course details

Designing HTML emails can be challenging, considering the limited capabilities of desktop and web email readers, combined with the small screen sizes of mobile devices. Enter responsive HTML email. Let Chris Converse show you how to design an elegant email that will adapt to varying screen sizes and render correctly in over 30 different mail clients, including Gmail, Yahoo, AOL, and multiple versions of Outlook, as well as Android, iOS, and Windows phones. Learn to add complex features like background graphics, rounded corners, and shadows that don't break your email when they can't be displayed. Then create call-to-action buttons, add animation, and style the whole thing with CSS. Plus, explore tools and services that will help you test your campaigns. Start now and learn what is possible with HTML email.

Learning objectives
Creating the graphics
Setting up the base layout structure
Styling the table rows for the headline, banner, etc.
Creating buttons
Adding CSS media queries
Styling the content
Incorporating animation and web fonts
Validating your code
Testing in various email clients

Concepts

0. Introduction

01 - Previewing the final project
02 - About the exercise files
03 - What you should know
04 - A look at the beginning project

1. Creating the Graphics

05 - Creating the banner and background graphics
06 - Creating the content graphics

2. Creating the HTML Email

07 - Setting up the base layout structure
08 - Styling the table row for the logo
09 - Styling the table row for the headline
10 - Styling the table row for the banner and content
11 - Styling the table row for the promos
12 - Styling the table row for the callouts
13 - Styling the table row for the footer

3. Creating Buttons with HTML and CSS

14 - Styling anchor links as buttons
15 - Creating a call-to-action button

4. Adding CSS to the Email

16 - Adding CSS media queries to your HTML email
17 - Styling the headline and banner for smaller screens
18 - Styling the content and footer for smaller screens
19 - Styling the promos for smaller screens
20 - Rearranging the callouts for medium screens
21 - Stacking the callouts for small screens

5. Pushing the Envelope

22 - Adding inbox preview text
23 - Adding animation to your HTML email
24 - Using web fonts with your HTML email
25 - Adding HTML5 video into HTML email
26 - Encoding and embedding Base64 images
27 - Using high-definition graphics in your HTML email

6. Validation and Testing

28 - Validating your HTML code
29 - Testing your email in 30+ HTML email clients
30 - Suggestion for Yahoo Mail incompatibilities
31 - Suggestions for BlackBerry 5 layout correction
32 - Suggestion for supporting Lotus Notes 6.5, 7, and 8.5

Conclusion

33 - Exploring alternative layouts
34 - Where to go from here