Course Overview
TOPIn this one-day class, you’ll discover how to create responsive HTML email marketing that is functional and well-designed across mobile, tablet, and desktop email clients. This email marketing course builds off the foundational skills taught in our introductory HTML Email class. It covers more advanced topics such as coding, using media queries, and optimizing images for mobile and mobile forms.
Scheduled Classes
TOP| 11/13/26 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
 |
| 12/18/26 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 01/22/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 02/26/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 04/02/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 05/07/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 06/11/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 07/16/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 08/20/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 09/24/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
| 10/29/27 - AGI - Virtual Instructor-Led - Virtual Instructor-Led | (click to enroll)
|
What You'll Learn
TOP- Identify the need for responsive email marketing
- Design and code mobile-friendly HTML email
- Create a fluid layout that works for any viewport
- Optimize images for mobile display
- Add a media query to address breakpoints
- Hide extraneous content for mobile users
Outline
TOPIdentifying the need for responsive HTML email marketing
- Common issues with mobile email
- Rise in mobile client usage
- ROI of responsive HTML email
- Differences in clients
- Support for media queries
Designing mobile-friendly HTML Email
- Taking a ‘design-first’ approach
- Differences in layout
- Column sizing
- Links and buttons
- Font size guidance for HTML email
- Defining messages in HTML email
- Hiding extraneous details
- Wireframing responsive HTML email versions
Coding mobile HTML email
- Defining mobile-specific CSS
- Using an @media declaration
- Applying the content table class
- Adding other declarations
Building responsive HTML email layouts
- Adapting multi-column layouts
- Working around CSS limitations
- Using HTML attributes in HTML email
- Adding a simple media query to a responsive HTML email
- Incorporating progressive disclosure
- Styling show/hide buttons
Targeting specific devices with media queries in your HTML email
- Addressing larger screen sizes
- Adjusting the focus of media queries
- Balancing effort vs. benefit
- Moving beyond breakpoints
- Designing fluid layouts for responsive HTML email
Optimizing HTML email images for mobile display
- Using supported CSS in responsive HTML email
- Swapping background images
- Setting background-size
- Serving high-res images
- Addressing Retina displays
Creating mobile forms for use with HTML email marketing
- Benefiting from optimized HTML forms
- Aligning form field labels
- Accessing the special keyboard
- Narrowing form layouts for responsive HTML email
- Setting initial scale/zoom
- Optimizing HTML email and plain-text email
