When you enroll through our links, we may earn a small commission—at no extra cost to you. This helps keep our platform free and inspires us to add more value.
Creating a Responsive HTML Email
Unlock creativity with Skillshare! Learn acrylic painting, AI writing, graphic design, and photography.
This Course Includes
skillshare
3.9 (1.3K reviews )
1 hours 43 minutes 
english
Online - Self Paced
course
SkillShare
About Creating a Responsive HTML Email
Preview the final project
About the exercise files
Setting expectations about HTML email
Beginning the project
Creating the banner and background graphics
Creating the content graphics
Setting up the base layout structure
Styling the table row for the logo
Styling the table row for the headline
Styling the table row for the banner and content
Styling the table row for the promos
Styling the table row for the callouts
Styling the table row for the footer
Styling anchor links as buttons
Creating a call-to-action button
Adding CSS media queries to your HTML email
Styling the headline and banner for smaller screens
Styling the content and footer for smaller screens
Styling the promos for smaller screens
Rearranging the callouts for medium screens
Stacking the callouts for small screens
Adding inbox preview text
Adding animation to your HTML email
Using web fonts with your HTML email
Adding HTML5 video into HTML email
Encoding and embedding Base64 images
Using High Definition (Retina®) graphics in your HTML Email
Validating your HTML code
Testing your email in 30+ HTML email clients
Suggestion for Yahoo! Mail incompatibilities
Suggestions for Blackberry 5 layout correction
Suggestion for supporting Lotus Notes 6.5, 7, and 8.5
Planning alternate layouts
Where to go from here
What You Will Learn?
- Designing HTML emails can be challenging, considering the limited capabilities of desktop and web email readers, combined with the small screen sizes of mobile devices. Enter responsive HTML email. Let Chris Converse show you how to design an elegant email that will adapt to varying screen sizes and render correctly in over 30 different mail clients, including Gmail, Yahoo, AOL, and multiple versions of Outlook, as well as Android, iOS, and Windows phones. Learn to add complex features like background graphics, rounded corners, and shadows that don't break your email when they can't be displayed. Then create call-to-action buttons, add animation, and style the whole thing with CSS. Plus, explore tools and services that will help you test your campaigns. Start now and learn what is possible with HTML email..
- Topics include:.