Learn how to code custom-designed emails that adapt to different screen sizes. From responsive layouts to optimizing images, this course covers all aspects of coding effective emails.
Overview
Syllabus
Section 1
Simple Responsive Layout
- Coding the table structure
- Fixing a gap below images
- Making the email responsive
- Introduction to CSS media queries
2-Column Layout: Media Queries
- Coding the nested table structure
- Writing styles for desktop & mobile versions
- Media queries for fine-tuning mobile responsive design
- Modifying media queries
Mobile-Friendly Column Layout
- Coding the table for the 2-column content
- Converting the mobile layout to 1-column
- Adding the other date listings
- Refining the CSS
Section 2
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 screens
Sending Tests & Email Fixes (Preflighting)
- Adding a preheader to entice mobile users
- Inlining the CSS
- Sending test emails
