HTML Emails: The Old School Method

Posted in HTML Emails, Screencasts, Tutorials

HTML Emails - The Old School Method

I’ve recently created a video training course that covers what I like to call The Old School Method of building HTML emails. Using a series of carefully prepared screencasts, I walk through all the steps necessary to plan, organize, and code foolproof HTML emails that work across a wide variety of email applications, operating systems, and mobile devices.

The sample email that I use to demonstrate the method is a real-world example, but the techniques covered in the course will definitely work for general purpose emails as well. It’s a tried and true method that I’ve used for several years. I’ve found it to be one of the best methods to ensure that your emails reach the highest number of email clients as possible. There’s even a handy bundle of exercise files in case you want to follow along with the videos. HTML emails may not be fun to build, but why not learn how to build them using a proven method that could eliminate a lot of the typical frustration and guesswork that you might be experiencing with other methods? Sound good? Then let’s get to it…

Recommended Viewing Order

The course can be viewed in a linear fashion, as a baseline for beginners; or out of order, as a refresher for experienced email developers. If you view them out of order, it’s recommended to view parts 1 – 3 before proceeding to parts 4 – 7, which can be viewed in any order. The short Course Introduction provides a good overview of topics covered in the course as well as some words of encouragement for all developers.

Total training time for this course: 1 hour, 37 minutes

Don’t forget to download the bundle of exercise files so that you can follow along.


Part 0: Course Introduction

Welcome! This video screencast provides a brief introduction to The Old School Method of building HTML emails. We also cover a few helpful points to consider in your own workflow as well as some words of encouragement.

Video duration: 3:15

Play Video ›


Part 1: Photoshop Comp Tour

In the first part of our HTML email training series, we take a close look at the Photoshop design comp and carefully consider the task ahead.

Video duration: 2:23

Play Video ›


Part 2: Planning the Hero Section

In the second part of our HTML email training series, we take a critical look at the underlying structure of the “hero” section and plan out our coding strategy.

Video duration: 10:07

Play Video ›


Part 3: Boilerplate and Workspace Tour

In the third part of our HTML email training series, we take a walk through our HTML boilerplate and consider our workspace and tools.

Video duration: 7:58

Play Video ›


Part 4: Coding the Hero Section

In the fourth part of our HTML email training series, we dive headlong into the HTML code. No more planning; it’s time to do some actual development.

Video duration: 24:48

Play Video ›


Part 5: Coding the Details & Questions Section

In the fifth part of our HTML email training series we continue down the Photoshop comp and add another section of code for the details and questions section. Just a couple more simple sections to go and we’re done.

Video duration: 25:10

Play Video ›


Part 6: Coding the My Banfield & Next Email Section

In the sixth part of our HTML email training series we add the next section of code from our Photoshop comp. One more simple section to go and we’re done.

Video duration: 15:31

Play Video ›


Part 7: Coding the Contact Us Section

In the seventh part of our HTML email training series, we finish coding the last section of our Photoshop comp and take a final look at the completed email.

Video duration: 7:53

Play Video ›