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

Introduction to Google Adwords was a great class full of information for beginner users! I loved the personal attention I received in this class.
Samantha Mills
mywedding.com
The instructor was very helpful and she explained everything. I look forward to the other trainings. I can now apply what has been learned to my job.
Andrea Shuster
University of Pennsylvania School of Medicine
This class is very beneficial to beginners as well as to those who have some experience with Visio.
Dawnn Johnson
Georgia Vocational Rehabilitation Agency (GVRA)
Good class. Great way to get an instructor to your location when on a tight budget. Webucator was aware of our needs and made sure that all of them were met. Thanks.
Rocco Rosa
Public Health Agency of Canada

No cancelation for low enrollment

Certified Microsoft Partner

Registered Education Provider (R.E.P.)

GSA schedule pricing

61,011

Students who have taken Instructor-led Training

11,714

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