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.
Public Classes: Delivered live online via WebEx and guaranteed to run . Join from anywhere!
Private Classes: Delivered at your offices , or any other location of your choice.
- Learn to create single- and multiple-column layouts.
- Learn to work with multiple email clients.
- Learn to create a fluid layout that goes from a two-column layout to a one-column layout for mobile devices.
- Learn to fix and optimize images.
- Learn to optimize the layout depending on the device.
- Learn about media queries.
- Learn to fix image issues.
- Learn to deal with banners on mobile devices.
- Learn to work with Gmail.
- Learn to use MailChimps inliner.
- Setting Up
- Setting up your class files
- Simple Responsive Layout: Part 1
- 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 2
- Styling the content using embedded styles
- Managing bulleted lists
- Making the email responsive
- Introduction to media queries
- Two-Column Layout: Media Queries
- Coding the nested table structure
- Writing styles for desktop and mobile versions
- Media queries for fine-tuning mobile responsive design
- Modifying media queries
- Mobile-Friendly Column Layout
- Coding the table for the two-column content
- Converting the mobile layout to one-column
- Adding the other date listings
- Refining the CSS for a classier look
- Optimizing Images for Mobile
- 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
- Structuring the footer layout
- Styling the footer
- Optimizing the footer for smaller mobile devices
- Optimizing the Mobile Layout
- Sizing up paragraph text on mobile
- Removing excess margins on mobile
- Removing the table borders
- Best Practices: Preflight
- Adding a preheader to entice mobile users
- Inlining the styles with Mailchimp's inliner
- Fixing margins for Outlook.com
- Hybrid Technique: Mobile-First Development
- Previewing the finished design
- Normalizing styles for consistency
- Understanding the mobile first approach
- Wireframing the email structure
- Hybrid Technique: Content Modules
- Creating a modular layout with nested tables
- Placing the content
- Adding a footer
- Hybrid Technique: Styling Content
- Deleting the wireframe styles
- Styling the header table
- Creating a clickable call to action with large borders
- Refining the styles for the main content and footer
- Adding a light background and softening the text color
- Hybrid Technique: Going Responsive
- Adding desktop widths and styles
- Coding responsive columns that work in Gmail
- Stacking columns in reverse order
- Hybrid Technique: Microsoft Outlook Tables
- Creating a fixed structure for Outlook
- Framing fixed tables with placeholder comments
- Hybrid Technique: Conditional Comments
- Understanding conditional comments for Outlook
- Wrapping conditional comments around the fixed table structure
- Hybrid Technique: Preflight and Testing
- Inlining the code
- Keeping some key embedded styles
- Sending tests
- Checking results across clients
- The @media Yahoo fix
- Progressive Enhancement
- Rounding image corners with border radius
- Adding CSS box shadow
- Using Google Fonts
- Alt Text on Banner Swap
- Adding an invisible shim image
- Assigning alt text to a shim
- Bulletproof Buttons in Outlook
- Bulletproof buttons in Outlook
Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.
Experience in the following would be useful for this HTML class:
- Some HTML and CSS experience.