
Buy the workbook
Print book shipments are delayed by approximately one week due to coronavirus. There are no delays for ebooks.
We offer bulk order discounts
This book comes free with our Responsive HTML Email class
In this book you’ll learn best practices for executing a responsive email design that will ensure an excellent user experience for desktop, webmail, and mobile users. We’ll show you how easy it is to set up a single-column email with a fluid layout that will work across devices and email clients. We’ll also show you how to create a more complex newsletter that, with the help of media queries, will go from a 2-column layout to a single column on most mobile devices.
Includes Downloadable Class Files (works on Mac & PC)
ISBN: 978-1-941333-26-6
Setup & Introduction
Downloading the Class Files
Before You Begin
- Popular email clients
- Recommended software
Section 1
Setting Up: Do This Before Other Exercises!
- Setting up your class files
Simple Responsive Layout
- Coding the table structure
- Fixing a gap below images
- Making the email responsive
- Introduction to CSS media queries
2-Column Layout: Media Queries
- Coding the nested table structure
- Writing styles for desktop & mobile versions
- Media queries for fine-tuning mobile responsive design
- Modifying media queries
Mobile-Friendly Column Layout
- Coding the table for the 2-column content
- Converting the mobile layout to 1-column
- Adding the other date listings
- Refining the CSS
Section 2
Optimizing Images for Mobile
- HTML email image quality: a balancing act
- Dealing with hi-res/retina images
- Swapping the banner on mobile
- Further optimizing the mobile banner
Responsive Footer
- Structuring the footer layout
- Styling the footer
- Optimizing the footer for smaller mobile devices
Optimizing the Mobile Layout
- Changing font size across screen sizes
- Removing excess margins on mobile
- Removing the table borders
Best Practices: Preflight
- Adding a preheader to entice mobile users
- Inlining the styles with Mailchimp’s inliner
Bonus Material
Progressive Enhancement
- Rounding image corners with border radius
- Adding CSS box shadow
- Custom web fonts: adding Google Fonts
Alt Text on Banner Swap
- Adding an invisible shim image
- Assigning alt text to a shim
Bulletproof Buttons in Outlook
- VML
- Bulletproof buttons in Outlook
Reference Material
Overview of HTML Email Best Practices
- Links to Reference Websites