HTML Email Training

Customized Onsite Training

  • Customized Content
  • For Groups of 5+
  • Online or On-location
  • Expert Instructors

Live Online Training

or 2 vouchers
  • Live Online Training
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

Upcoming Classes

  • See More Classes

Please select a class.

In this HTML Email training class, students will learn how to create a responsive email design that will look great, regardless of the viewing device. The course covers responsive email design for the desktop, webmail, and hand-held devices.

  1. Learn to create single- and multiple-column layouts.
  2. Learn to work with multiple email clients.
  3. Learn to create a fluid layout that goes from a two-column layout to a one-column layout for mobile devices.
  4. Learn to fix and optimize images.
  5. Learn to optimize the layout depending on the device.
  6. Learn about media queries.
  7. Learn to fix image issues.
  8. Learn to deal with banners on mobile devices.
  9. Learn to work with Gmail.
  10. Learn to use MailChimps inliner.
  1. Setting Up
    1. Setting up your class files
  2. Simple Responsive Layout: Part 1
    1. Coding the outer table
    2. Placing the header image
    3. Nesting an inner table
    4. Adding the text-based content
    5. Fixing a gap below images
  3. Simple Responsive Layout: Part 2
    1. Styling the content using embedded styles
    2. Managing bulleted lists
    3. Making the email responsive
    4. Introduction to media queries
  4. Two-Column Layout: Media Queries
    1. Coding the nested table structure
    2. Writing styles for desktop and mobile versions
    3. Media queries for fine-tuning mobile responsive design
    4. Modifying media queries
  5. Mobile-Friendly Column Layout
    1. Coding the table for the two-column content
    2. Converting the mobile layout to one-column
    3. Adding the other date listings
    4. Refining the CSS for a classier look
  6. Optimizing Images for Mobile
    1. HTML email image quality: a balancing act
    2. Dealing with hi-res/retina images
    3. Swapping the banner on mobile
    4. Further optimizing the mobile banner
  7. Responsive Footer
    1. Structuring the footer layout
    2. Styling the footer
    3. Optimizing the footer for smaller mobile devices
  8. Optimizing the Mobile Layout
    1. Sizing up paragraph text on mobile
    2. Removing excess margins on mobile
    3. Removing the table borders
  9. Best Practices: Preflight
    1. Adding a preheader to entice mobile users
    2. Inlining the styles with Mailchimp's inliner
    3. Fixing margins for
  10. Hybrid Technique: Mobile-First Development
    1. Previewing the finished design
    2. Normalizing styles for consistency
    3. Understanding the mobile first approach
    4. Wireframing the email structure
  11. Hybrid Technique: Content Modules
    1. Creating a modular layout with nested tables
    2. Placing the content
    3. Adding a footer
  12. Hybrid Technique: Styling Content
    1. Deleting the wireframe styles
    2. Styling the header table
    3. Creating a clickable call to action with large borders
    4. Refining the styles for the main content and footer
    5. Adding a light background and softening the text color
  13. Hybrid Technique: Going Responsive
    1. Adding desktop widths and styles
    2. Coding responsive columns that work in Gmail
    3. Stacking columns in reverse order
  14. Hybrid Technique: Microsoft Outlook Tables
    1. Creating a fixed structure for Outlook
    2. Framing fixed tables with placeholder comments
  15. Hybrid Technique: Conditional Comments
    1. Understanding conditional comments for Outlook
    2. Wrapping conditional comments around the fixed table structure
  16. Hybrid Technique: Preflight and Testing
    1. Inlining the code
    2. Keeping some key embedded styles
    3. Sending tests
    4. Checking results across clients
    5. The @media Yahoo fix
  17. Progressive Enhancement
    1. Rounding image corners with border radius
    2. Adding CSS box shadow
    3. Using Google Fonts
  18. Alt Text on Banner Swap
    1. Adding an invisible shim image
    2. Assigning alt text to a shim
  19. Bulletproof Buttons in Outlook
    1. VML
    2. Bulletproof buttons in Outlook
Class Materials

Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.

Class Prerequisites

Experience in the following would be useful for this HTML class:

  • Some HTML and CSS experience.
Preparing for Class

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing


Students who have taken Live Online Training


Organizations who trust Webucator for their training needs


Satisfaction guarantee and retake option


Students rated our trainers 9.42 out of 10 based on 5,208 reviews

Contact Us or call 1-877-932-8228