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
Examples of What You Learn
Why Our Books Are Unique
Our books are packed with step-by-step exercises that walk you through projects. You’ll learn by doing exercises, not reading long explanations. The goal is to give you hands-on practice with the program, getting you started quickly with the things that are most important for real life work.
