Responsive HTML Email

Optimize Your Email for the Mobile Market

It’s official: mobile email is now in the lead, surpassing webmail and desktop client usage by a large margin.

Build Responsive Emails

In this class 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.

This advanced level course is designed for people who are already familiar with web development and have prior experience coding HTML email. If you have some experience with HTML and CSS but have never coded an HTML email before, we recommend you take our HTML Email course to learn the basics before you take this class.

12 Hours
Mac or PC provided
Book included
Free retake

Register for a class

$650 Discounts • Policies

NYC or Live Online

What You’ll Learn

Create responsive emails that work across all devices
Create a 2-column responsive layout with tables
Optimize images and swap content for mobile devices
Use media queries to fine tune mobile styles

View full syllabus

Responsive HTML Email Class Syllabus

What You’ll Learn

Section 1

Simple Responsive Layout: Part I

Topics

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

Topics

Styling the Content Using Embedded Styles
Managing Bulleted Lists
Making the Email Responsive
Introduction to Media Queries

2-Column Layout: Media Queries

Topics

Coding the Nested Table Structure
Writing Styles for Desktop and Mobile Versions
Media Queries for Fine Tuning Mobile Responsive Design
Modifying Media Queries

Section 2

Mobile-Friendly Column Layout

Topics

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

Topics

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

Topics

Structuring the Footer Layout
Styling the Footer
Optimizing the Footer for Smaller Mobile Devices

Optimizing the Mobile Layout

Topics

Sizing Up Paragraph Text on Mobile
Removing Excess Margins on Mobile
Removing the Table Borders

Section 3

Best Practices: Preflight

Topics

Adding a Preheader to Entice Mobile Users
Inlining the Styles with MailChimp’s Inliner
Reviewing Email Client Results

Hybrid 2-Column Layout: Mobile-First Development

Topics

Normalizing Styles for Consistency
Wireframing the Email Structure
Structuring the Sidebar
Coding the Footer

Hybrid 2-Column Layout: Part II

Topics

Adding the Logo
Placing the Content
Adding a Preheader
Refining the Appearance with CSS

Hybrid 2-Column Layout: Responsive Techniques

Topics

Adding Desktop Widths and Styles
Coding Responsive Columns that Work on Gmail
Stacking Columns in Reverse Order

Section 4

Client-Specific Fixes

Topics

Adding Microsoft Conditional Statements
Fine-Tuning with Media Queries
Optimizing Font Sizes on Mobile
Adding CSS3 Support for Windows Phone

Progressive Enhancement

Topics

Using Border-Radius
Bulletproof Buttons
Adding Box Shadows
Embedding Google Fonts

Preflight and Testing

Topics

Removing Table Borders
Inlining the CSS
Sending Tests with PutsMail

Responsive HTML Email example

Learn Responsive Design for Email Marketing

By the end of this course, you’ll have the skills to boost your company’s email marketing campaigns. Take this course with Intro to HTML and HTML Email to earn a New York State Approved Certificate.

“The class is very detailed and easy to follow. Instructors are always eager to help and very informative. Noble Desktop is such a great organization for being a great source of knowledge and resources! This is a genuine group that really wants to help students develop skills.”

Kriska Ocampo

Learning to design and code responsive HTML emails
“Responsive HTML Email is a great course that addresses a critical aspect of email marketing for anyone who has clients or subscribers with whom they communicate regularly. Considering how many non-responsive emails I get, it's a real advantage to have the skills in your pocket.”

Wilma Dull

East Side Consulting
“I really enjoyed the class on responsive HTML email design. The way the instructor broke down the steps made it easy for me to grasp the concepts and recreate on my own.”

Lisa Rosenberg

Jobson Healthcare Information

Attended the Responsive HTML Email class
“The Responsive HTML Email course was amazing and the amount of resources and instruction you cover in class ensure that you'll be getting it right. The instructor is a true expert on the subject and had a wealth of knowledge about properly creating, laying out and testing emails which she passed down to the class.”

German Hernandez

Multimedia Designer
“I went in with a bunch of questions and walked out with all of them answered. Very knowledgeable teacher who was extremely patient and understanding. Loved this class. Would recommend to anyone and everyone who would like to learn more about responsive HTML emails.”

Rena Abelson

Marketing Coordinator, Reach Marketing LLC

Learned about optimizing HTML emails with responsive design

See our 2346 testimonials

Learn HTML Email Best Practices

“Throughout the year, I had the opportunity to design and code emails. Trying to code emails which would display correctly on many different email clients and screens sizes I found perplexing and tedious... The knowledge learned by taking this course going forward will enable me to better code them, in addition to being taught best practices as well as valuable tips and tricks. They no longer are a mystery.”
Darryl Kaalund

Student coding HTML emails for marketing campaign

Custom Workbook Included

Our Responsive HTML Email class comes with a custom step-by-step training manual sold to universities and schools around the world. Recreate the class projects and refresh the material anytime after the class.

Responsive HTML email course workbook

Part of a Certificate Program

This course is part of the HTML Email certificate program; the one and only HTML Email certificate in NYC. Take the other courses to earn the certificate.

Students earning a certification in HTML email

Register for Responsive HTML Email

$650 Discounts • Policies

NYC or Live Online