Creating a Responsive HTML Email

Create attractive, responsive, HTML Emails, that work in over 30 combinations of the most commonly used email clients.
Creating a Responsive HTML Email
File Size :
1.47 GB
Total length :
1h 44m



Chris Converse


Last update

Last updated 4/2017



Creating a Responsive HTML Email

What you’ll learn

Learn to create an HTML Email layout compatible with a wide range of email clients
Discover techniques to design elements that will “gracefully degrade” in older email clients without losing the design integrity
Add CSS to your HTML Email to take advantage of newer email clients and varying screen sizes

Creating a Responsive HTML Email


A modern web browser, capable or viewing responsive design
An HTML/code editor (free or commercial)
Willingness to do some coding
A little bit of patience


Did you know that over 46% of email is now read on mobile devices? Designing HTML email can be quite challenging, considering the limited capabilities of many email clients (readers). In contrast, most new email readers supports many of the latest trends in web design. What to do? Enter Responsive HTML Email. This course will show you how to design and construct an HTML email design that will render properly in such email readers and Outlook 2003 and Gmail, all the way through modern Android, Apple, and Windows phones. We will also explore online tools and services that will help you test your campaigns. Learn what is possible with HTML email. Running Time: 88 minutes


Section 1: Introduction and Set-up Files

Lecture 1 About this course.

Lecture 2 What’s included in the exercise files.

Lecture 3 Setting expectations for you and your clients.

Lecture 4 Beginning the project.

Section 2: Creating the Graphics

Lecture 5 Creating the Banner and Background Graphics.

Lecture 6 Creating content graphics for multiple screen sizes.

Section 3: Creating the HTML Email

Lecture 7 Creating the Base HTML Structure.

Lecture 8 Formatting and styling the logo row.

Lecture 9 Formatting and styling the headline row.

Lecture 10 Formatting and styling the content row.

Lecture 11 Formatting and styling the promos row.

Lecture 12 Formatting and styling the callouts row.

Lecture 13 Formatting and styling the footer row.

Section 4: Creating Buttons with HTML and CSS

Lecture 14 Converting links to buttons with CSS.

Lecture 15 Creating a call-to-action button.

Section 5: Adding CSS to the Email

Lecture 16 Adding the media queries for medium and small screens.

Lecture 17 Switching the headline and banner for smaller screen sizes.

Lecture 18 Adjusting the layout for content and footer for smaller screens.

Lecture 19 Adjusting the promos for smaller screens.

Lecture 20 Adjusting the promos for callouts for medium screens.

Lecture 21 Adjusting the promos for callouts for small screens.

Section 6: Pushing the Envelope

Lecture 22 Setting custom inbox preview text.

Lecture 23 Adding animation to your email.

Lecture 24 Using web fonts in your email.

Lecture 25 Adding HTML5 video into your email

Lecture 26 Encoding and embedding base64 images

Lecture 27 Using High Definition (Retina) graphics in your HTML Email

Section 7: Validation and Testing

Lecture 28 Validating the code of you HTML email.

Lecture 29 Testing your HTML email with an online service.

Lecture 30 Suggested adjustments for Yahoo! Mail.

Lecture 31 Suggested adjustments for Blackberry 5 OS.

Lecture 32 Suggested adjustments for Lotus Notes 6.5, 7, and 8.5.

Section 8: Where to go from here

Lecture 33 Where to go from here.

Lecture 34 Recommendations for alternate layouts

Designers, marketers, or anyone tasked with creating HTML Emails across a range of screens and devices.

Course Information:

Udemy | English | 1h 44m | 1.47 GB
Created by: Chris Converse

You Can See More Courses in the Developer >> Greetings from

New Courses

Scroll to Top