Responsive HTML Email Training Book | Learn to Code HTML Emails for Mobile-Optimized Display Through Projects

Buy the workbook

This book comes free with our Responsive HTML Email class

Overview
Table of Contents

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.

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.

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