Yelp Facebook LinkedIn YouTube Twitter Instagram

Responsive HTML Email

Optimize Your Email for the Mobile Market

Mobile email is in the lead, surpassing webmail and desktop client usage by a large margin.

Make Responsive Emails

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.

Read more
  • Small Classes
  • Computer Provided
  • Book included
  • Free Retake

Register for a Class
  • $650
  • 12 Hours
  • Mac or PC
  • 185 Madison Ave, NYC or live online
  • FAQ •
  • Discounts
    Discounts

    Shorter courses such as this are already affordably priced and are not eligible for discounts.

    Payment Plan

    This course is not eligible for a payment plan, which is only available for programs priced at $2,495 and above. Read our Payment Plan FAQ for more details.

    Take this course as part of a certificate program and save:
  • • Policies

Corporate training available

Email

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

  • “This is the second class that I have participated in with Noble Desktop and it was another great experience. Our instructor David was helpful and patient. He also helped troubleshoot when I ran into some issues. We were able to easily find the issue. Overall this was a fantastic experience and I am looking forward to using these new skills and techniques at work.”

    Holly Taquinto

    Email Marketing Campaign Manager, Chubb Insurance

  • “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 2,656 testimonials
5
4.9
4.9

Frequently Asked Questions

  • Are there prerequisites? Do I need to come in with any prior coding knowledge?

    Students should have some experience coding emails with HTML & CSS. This class builds on our HTML Email class, so you should have equivalent knowledge.

  • Must I do anything before coming to class?

    You’ll want to be able to send test emails to the main webmail providers, so please create a free email account with Gmail, Yahoo Mail, and Outlook.com (all three) if you don’t already one. (You can use a Hotmail account for testing on Outlook.com.)

  • Do I need to bring anything to the class?

    No. We provide computers (Mac or PC) with a coding editor installed. Choose your operating system at checkout.

  • Do you offer discounts or a payment plan for this course?

    Discounts

    Shorter courses such as this are already affordably priced and are not eligible for discounts.

    Payment Plan

    This course is not eligible for a payment plan, which is only available for programs priced at $2,495 and above. Read our Payment Plan FAQ for more details.

    Take this course as part of a certificate program and save:

  • Can I take this course online (remote learning)?

    You may attend this training virtually (online) at the scheduled time the course is offered (New York, Eastern Time).

    How does attending “live online” work?
    • Students can attend this training remotely through screen sharing software (we use Zoom).
    • Participants can hear the instruction, ask questions, and even share their screen with the instructor.
    • For audio you can use your computer’s microphone/speakers or call a phone number that we’ll provide.
    • Classes are activity-based and taught by a live instructor, so we strongly encourage students who are local to the area to attend in person!

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

Related Classes & Certificates

HTML Email

6 Hours

$325

More details

Intro to HTML & CSS

3 Hours

$150

More details

Web Development Level 1

18 Hours

$975

More details
See all related HTML Email classes

Create responsive emails that work across desktop, webmail, and mobile devices

HTML Email
  • To create attractive emails with custom layouts and graphics, we use HTML and CSS.
  • Emails require some different approaches to code than webpages. Get started in our HTML Email class.
  • Emails can be responsive, which means they adapt to different size screens. Learn how to create them in our Responsive Email class.
HTML
  • To create webpages and emails we use HTML code (Hypertext Markup Language).
  • HTML tags mark up (label) content to indicate headings, paragraphs, lists, links, images, and more.
  • You can get a quick start in our 3-hour Intro to HTML & CSS class, dive deeper in our 18-hour Web Development Level 1 class, or for the most thorough training earn a Certificate in Web Design.
CSS
  • CSS (Cascading Style Sheets) code is used to style the contents of a webpage (or email), based on the HTML markup.
  • CSS controls the appearance of everything, from fonts and color, to building responsive page layouts that look good across screen sizes (mobile, tablet, and desktop).
  • Start learning CSS in our Web Development Level 1 class. Dive deeper in our Web Development Level 2 class where we cover many important CSS concepts, such as media queries. Learn more advanced ways to optimize for mobile devices and building responsive pages in our Mobile & Responsive Web Design class. The classes can be taken individually, or as part of our Web Design Certificate program.
Responsive Web Design
  • Responsive webpages (and emails) adapt to any size screen: phone, tablet, desktop, etc.
  • Web developers use media queries in CSS to tell browsers to apply different styles for different size screens