Yelp Facebook YouTube Twitter Instagram

Step-by-Step Training Workbook

Responsive HTML Email Book

Build Mobile-Friendly Emails

Responsive html email edition2.1 2x

Buy the workbook

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

Download Sample Exercise
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: Part I
  • Coding the outer table
  • Placing the header image
  • Nesting an inner table
  • Adding the text-based content
  • Fixing a gap below images
Simple Responsive Layout: Part II
  • Styling the content using embedded styles
  • Managing bulleted lists
  • Making the email responsive
  • Introduction to 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
Section 2
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 for a classier look
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
  • Sizing up paragraph text on mobile
  • Removing excess margins on mobile
  • Removing the table borders
Section 3
Best Practices: Preflight
  • Adding a preheader to entice mobile users
  • Inlining the styles with Mailchimp’s inliner
Hybrid Technique: Mobile-First Development
  • Previewing the finished design
  • Normalizing styles for consistency
  • Understanding the mobile first approach
  • Wireframing the email structure
Hybrid Technique: Content Modules
  • Creating a modular layout with nested tables
  • Placing the content
  • Adding a footer
Hybrid Technique: Styling Content
  • Deleting the wireframe styles
  • Styling the header table
  • Creating a clickable call to action with large borders
  • Refining the styles for the main content & footer
  • Adding a light background & softening the text color
Section 4
Hybrid Technique: Going Responsive
  • Adding desktop widths & styles
  • Coding responsive columns without media queries
  • Stacking columns in reverse order
Hybrid Technique: Microsoft Outlook Tables
  • Creating a fixed structure for Outlook
  • Framing fixed tables with placeholder comments
Hybrid Technique: Conditional Comments
  • Understanding conditional comments for Outlook
  • Wrapping conditional comments around the fixed table structure
Hybrid Technique: Preflight & Testing
  • Inlining the code
  • Keeping some key embedded styles
  • Sending tests
  • Checking results across clienst
Bonus Material
Progressive Enhancement
  • Rounding image corners with border radius
  • Adding CSS box shadow
  • Using 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

How our eBooks Work Buying eBooks for Someone Else

Features of Noble Desktop eBooks
  • Searchable, with live text that you can copy and paste.
  • Printable.
  • eBook graphics are in color (printed books are black and white).
  • Widely compatible: We provide the most common eBook formats (EPUB, MOBI, & PDF) so you can load them onto the device or app you choose; such as Mac, PC, iPhone, iPad, Kindle, Android, and more.
  • Free updates for the edition you buy. When we make major changes to a book (requiring a new edition), an affordable upgrade option will be available.
  • DRM-free: Files are subtly watermarked with your name and email, but we do not restrict the devices or apps you can use to view our eBooks.
  • Lifetime access to downloads from free your Noble Desktop account.
The Best Way to Enjoy Our Books

Our workbooks are meant to be used while you work on your computer. They typically contain step-by-step exercises that walk you through doing tasks on your computer. An ideal setup would be to have the eBook loaded onto a device (like a tablet/smartphone) or on a second computer monitor, so you can read the book as you work on your computer. You can also print the PDF if you prefer.

Which File Format Is Right for You?
PDF
  • Ideal for printing.
  • An exact match to the printed book. If the text reflow of an EPUB or MOBI file is confusing please refer to the PDF.
  • PDF is compatible with most devices, but it’s not optimized for small screens. If using a smaller screen you’ll likely want to use the EPUB or MOBI files.
EPUB
  • The industry standard eBook format which works with all devices, except for the Amazon Kindle. EPUB can be read on Mac, PC, iPhone, iPad, iPod Touch, Nook, Sony Reader, Kobo, Android, and many more.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
MOBI (Kindle)
  • Amazon’s format for Kindle devices and Kindle app.
  • Ideal for smaller screens as the layout reflows to fit the current device (at the type size of your choice).
  • Using an iOS Device such as iPhone & iPad? The Kindle app for Apple iOS devices requires a specialized format which we do not support. While our MOBI will work in the Kindle app, it will not render well on iOS devices. We recommend using the EPUB format with Apple’s iBooks app if reading on an iOS device.
Recommended Reading Apps
iPhone, iPad
  • iBooks (EPUB)
Mac
Windows PC
Android
Can You Share the eBook or Printouts?

Noble Desktop books are intended for use by you, the owner. They are not intended to be loaned or given to others. The files are subtly watermarked with your name and email, but we do not apply any DRM. You can copy your eBooks to any of your own devices without restriction. You can print the PDF files for your own use, but not to give to others. You cannot sell used eBooks. Ownership is solely yours and cannot be transferred to someone else.

Teachers and training centers wishing to print copies for students should email for licensing options and pricing.

Buying an eBook for Someone Else
  • When you buy an eBook for yourself, it will be added into your account. It will be watermarked with your information and is intended for use only by you.
  • You can purchase eBooks for someone else, such as a friend or colleague. Schools and training centers can purchase eBooks for their students (be sure to apply for teacher pricing).
  • When buying eBooks for someone else, you will receive an eBook voucher code. Send that code to the recipient and they can redeem it. An eBook voucher code can be redeemed once, for the specific book you purchase for them.
  • The recipient of the eBook voucher code will need to log into their Noble Desktop account, or create a free account. In their account they will enter the code on their My eBooks page and the eBook will be added immediately into their account.
  • The recipient receives all the same benefits of Noble Desktop eBooks, which includes lifetime access to download their eBook, as well as free updates to that edition. When the next edition is released, an affordable upgrade option will be available to them.

Examples of What You Learn

  • Fixing Gaps Below Images
  • Introduction to Media Queries
  • Writing Styles for Desktop and Mobile Versions
  • Optimizing Images for Mobile
  • Dealing with Hi-Res/Retina Images
  • Swapping the Banner on Mobile
  • Optimizing the Mobile Layout
  • Adding a Preheader to Entice Mobile Users
  • Coding Responsive Columns that Work on Gmail
  • Inlining the Styles with MailChimp’s Inliner

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.

Buy the Responsive HTML Email Book

This book comes free with our Responsive HTML Email class