Overview
-
Design a responsive HTML email that will adapt to varying screen sizes and render correctly in over 30 different email clients, including Gmail, Outlook, and Yahoo.
Syllabus
-
Introduction
- Previewing the final project
- About the exercise files
- What you should know
- A look at the beginning project
- Creating the banner and background graphics
- Creating the content graphics
- Setting up the base layout structure
- Styling the table row for the logo
- Styling the table row for the headline
- Styling the table row for the banner and content
- Styling the table row for the promos
- Styling the table row for the callouts
- Styling the table row for the footer
- Styling anchor links as buttons
- Creating a call-to-action button
- Adding CSS media queries to your HTML email
- Styling the headline and banner for smaller screens
- Styling the content and footer for smaller screens
- Styling the promos for smaller screens
- Rearranging the callouts for medium screens
- Stacking the callouts for small screens
- Adding inbox preview text
- Adding animation to your HTML email
- Using web fonts with your HTML email
- Adding HTML5 video into HTML email
- Encoding and embedding Base64 images
- Using high-definition graphics in your HTML email
- Validating your HTML code
- Testing your email in 30+ HTML email clients
- Suggestion for Yahoo! Mail incompatibilities
- Suggestions for BlackBerry 5 layout correction
- Suggestion for supporting Lotus Notes 6.5, 7, and 8.5
- Exploring alternative layouts
- Where to go from here
