HTML Email Book

Step-by-Step Training Workbook: Lay Out and Code HTML Emails

HTML email is a staple of communication. Everyone can benefit from sending HTML email, from large corporations to small businesses and freelancers. Give your emails some personality and life!

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. You’ll learn how easy it is to set up a single-column email with a fluid layout that will work across devices and email clients. Then you’ll learn 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-934624-47-0

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 Layout
  • Working with tables
  • Centering the email
  • Text styling with inline CSS
  • Adding a border
  • Closing the gap below images
eNewsletter Layout
  • Nesting tables for a more complex layout
  • Non-centered columns
Styling Content
  • Email-friendly CSS
  • Streamlining your workflow with embedded CSS
  • Closing the gap below images
Section 2
Adding More Content
  • Creating new events
  • HTML attributes vs. CSS rules
  • Adding a footer
  • Setting a background color
Adding Links
  • Coding links to open in a new tab or window
  • Converting links & image paths to absolute URLs
  • Styling links
Best Practices: Alt Text & Preheader
  • Adding alt text
  • Styling alt text
  • Adding a preheader message
  • Improving your open rate
Sending Tests & Email Fixes
  • Using an inlining tool to convert embedded CSS
  • Testing in various email clients
  • Fixes for Outlook.com, Gmail, Yahoo! Mail, iOS Mail, & Outlook 2007/2010
Bonus Material
Creating a Table of Contents
  • Making a table of contents
  • Named anchors
Creating & Naming Slices in Photoshop
  • Slicing a Photoshop file
  • Naming slices
  • Adding alt text
  • Adding link URLs
Optimizing & Exporting HTML
  • Optimizing slices as GIF, PNG, or JPEG
  • Exporting HTML & images
Reference Material
Overview of HTML Email Best Practices
Online Resources

How our eBooks Work Buying eBooks for Someone Else

Examples of What You Learn

Responsive HTML Email visual 1-column email layout 2-column email layout

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.

demonstration of different book formats: print, kindle, & mobile devices

Get this workbook as part of the Intro to HTML Email

Yelp Facebook LinkedIn YouTube Twitter Instagram