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

Hands down, the best training one can get over the web! The instructor was really amazing. She took her time with everyone and was able to address our questions.
Vinson Cornejo
Logos Technlogies
The class provides project based learning. I've always found hands on learning to be the best way to keep me focused to learn. The course book used is excellent. It outlines each project step-by-step for referencing once you've gotten out of the class.
Samantha Hayden
Auveco
The online experience gave me the ability to focus on the training from my computer. I did not have to fly somewhere for a week. The course covered enough material to get me started with iOS development.
Edwin Alvarez
The Walt Disney Company
The trainer was very experienced and knowledgeable, and she was very nice and patient too!
Denisse Bays
Pure Romance, LLC

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

60,541

Students who have taken Instructor-led Training

11,682

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