HTML Email Training

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.

Goals
  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.
Outline
  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 Outlook.com
  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

Training for your Team

Length: 2 Days
  • Private Class for your Team
  • Online or On-location
  • Customizable
  • Expert Instructors

Training for Yourself

$790.00 or 2 vouchers

Upcoming Live Online Classes

  • See More Classes

Please select a class.
  • Live Online Training
  • For Individuals
  • Expert Instructors
  • Guaranteed to Run
  • 100% Free Re-take Option
  • 1-minute Video

What people say about our training

I never thought I would be able to say that I could be knowledgeable in ANY design program, but after the three day InDesign course with Webucator, I can actually make my job much easier and appealing (without the frustration of knowing nothing)!
Ashley Nelson
Alterman, Inc.
I have taken several Webucator classes. I love the ability to gain knowledge without the expense of travel and time away from home. The instructors are wonderful and very knowledgeable. Webucator is a great experience!!!
Maria Jaul
wyle laboratories
Every single minute spent, was a minute I learned something.
Alejandro Ross
Experian
I began the class with a limited knowledge base of Crystal Reports so I really enjoyed everything about the class. It was great to learn so much about this program.
Melissa Castle
People, Inc.

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,488

Students who have taken Instructor-led Training

11,768

Organizations who trust Webucator for their Instructor-led training needs

100%

Satisfaction guarantee and retake option

9.44

Students rated our HTML Email Training trainers 9.44 out of 10 based on 4 reviews

Contact Us or call 1-877-932-8228