1h 32m – Beginner
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.
This course was created and produced by Chris Converse. We are honored to host this content in our library.
Topics include:
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
Introduction – 4m 58s
Previewing the final project – 46s
About the exercise files – 52s
What you should know – 1m 31s
A look at the beginning project – 1m 49s
1. Creating the Graphics – 5m 46s
Creating the banner and background graphics – 3m 26s
Creating the content graphics – 2m 20s
2. Creating the HTML Email – 18m 15s
Setting up the base layout structure – 3m 36s
Styling the table row for the logo – 2m 24s
Styling the table row for the headline – 2m 32s
Styling the table row for the banner and content – 2m 51s
Styling the table row for the promos – 2m 55s
Styling the table row for the callouts – 2m 47s
Styling the table row for the footer – 1m 10s
3. Creating Buttons with HTML and CSS – 6m 39s
Styling anchor links as buttons – 2m 6s
Creating a call-to-action button – 4m 33s
4. Adding CSS to the Email – 26m 29s
Adding CSS media queries to your HTML email – 4m 22s
Styling the headline and banner for smaller screens – 3m 14s
Styling the content and footer for smaller screens – 3m 4s
Styling the promos for smaller screens – 4m 45s
Rearranging the callouts for medium screens – 5m 35s
Stacking the callouts for small screens – 5m 29s
5. Pushing the Envelope – 16m 55s
Adding inbox preview text – 1m 39s
Adding animation to your HTML email – 1m 59s
Using web fonts with your HTML email – 2m 20s
Adding HTML5 video into HTML email – 6m 13s
Encoding and embedding Base64 images – 4m 44s
6. Validation and Testing – 10m 10s
Validating your HTML code – 1m 42s
Testing your email in 30+ HTML email clients – 5m 9s
Suggestion for Yahoo! Mail incompatibilities – 1m 11s
Suggestions for BlackBerry 5 layout correction – 54s
Suggestion for supporting Lotus Notes 6.5, 7, and 8.5 – 1m 14s
Conclusion – 3m 36s
Exploring alternative layouts – 2m 31s
Where to go from here – 1m 5s