Win a Free Class!

Join our email list for a chance to win

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. 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.

Upcoming Classes

Price: $650 Click for Discounts

  • 12 hours of Hands-On Training
  • Custom Written Workbook Included
  • Mac or PC
  • In New York City and Live Online

We Literally Wrote the Book!

Resp html email

To make the perfect class we had to write our own workbooks which are included with each class.

Can’t take a class? Our workbooks are the next best thing.

Buy Workbook

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

Why Train With Noble?

26 Years of Experience

Noble Desktop has been teaching computer graphics and web development since 1991. In all those years we have perfected the craft of teaching. If students get hung up on any issue, we tweak the class to make it work better. Every instructor uses the same time-tested curriculum we have developed. Ask around: Noble Desktop has a stellar reputation for exceptional computer graphics training.


Our Teaching Method is Better

We don't ask you to simply "follow along," copying what the instructor does. Instead we ask you to focus 100% attention on the lesson at hand. Only after the lesson do you then put into practice what you have learned by working on a computer with our step-by-step workbooks. This "learn, then practice" method results in the student learning and retaining much more than traditional "follow along" classes.


We Wrote the Book Ourselves

Most of our classes include a custom training workbook written by our top instructors. Take it home with you: with step-by-step exercises and power-user keyboard shortcut guides, it’s like having a refresher course right on your desk. We wrote the book ourselves because we couldn't find any book that was good enough. Now our books are being used by other schools and training centers worldwide.


We Provide Computers, Mac or PC

Since when did training centers expect you to "bring a laptop"? Noble Desktop has always had classrooms full of computers, Mac and PC. Each computer is loaded with software and has a 19-inch monitor. The next time you are asked to "bring a laptop," ask why you aren't being provided a computer. Noble Desktop always has up-to-date equipment in our state-of-the-art classrooms.


Not Just Anyone Can Teach

All our instructors are working professionals who bring on-the-job experience to the classroom. But we don't just let anyone teach a course. How many experts do you know who can't teach? We've learned to audition and test our instructors. Only after they have been through our screening process will they be put in front of students. And they are required to use our time-tested curriculum, assuring a positive learning experience for all our students. Read our instructor bios.


Money-Back Guarantee

We’re the only school to offer an unconditional money-back guarantee. If you don’t absolutely LOVE your class, we’ll give you a full refund! Compare that to other "schools" that have a no-refund policy. Is that even legal? It certainly isn't right. At Noble we treat our students with respect and common sense.


We Are NY State-Licensed, and Adobe Authorized

When looking at a computer training school, check to see if they are NY State-licensed. Any school in New York should be licensed by law. Noble Desktop follows state-issued guidelines for curriculum development and teacher licensing. Adobe Authorized means our instructors have passed the rigorous Adobe Certification Exam, and that we follow Adobe's quality-control standards.


Our Students Love Us! 2100+ Testimonials and Counting

We offer our guarantee because we think we’re the best—but don’t take our word for it. Ask more than 2100 industry professionals who have enjoyed our classes and are putting what they learned to use on the job. Read their testimonials.