Creating a Responsive HTML Email
3.9 (670 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,280 students enrolled

Creating a Responsive HTML Email

Create attractive, responsive, HTML Emails, that work in over 30 combinations of the most commonly used email clients.
3.9 (672 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
4,280 students enrolled
Created by Chris Converse
Last updated 4/2017
English
English [Auto]
Current price: $13.99 Original price: $19.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 2 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
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
Course content
Expand all 34 lectures 01:43:30
+ Introduction and Set-up Files
4 lectures 04:55

The exercise files are located in Section 1, Lecture 4 (look for the resources links).

Preview 00:53
Beginning the project.
01:49
+ Creating the Graphics
2 lectures 05:46
Creating the Banner and Background Graphics.
03:26
Creating content graphics for multiple screen sizes.
02:20
+ Creating the HTML Email
7 lectures 18:16
Creating the Base HTML Structure.
03:37
Formatting and styling the logo row.
02:24
Formatting and styling the headline row.
02:32
Formatting and styling the content row.
02:51
Formatting and styling the promos row.
02:55
Formatting and styling the callouts row.
02:47
Formatting and styling the footer row.
01:10
+ Creating Buttons with HTML and CSS
2 lectures 06:39
Converting links to buttons with CSS.
02:06
Creating a call-to-action button.
04:33
+ Adding CSS to the Email
6 lectures 26:29
Adding the media queries for medium and small screens.
04:22
Switching the headline and banner for smaller screen sizes.
03:14
Adjusting the layout for content and footer for smaller screens.
03:04
Adjusting the promos for smaller screens.
04:45
Adjusting the promos for callouts for medium screens.
05:35
Adjusting the promos for callouts for small screens.
05:29
+ Pushing the Envelope
6 lectures 27:45
Setting custom inbox preview text.
01:39
Using web fonts in your email.
02:20
Adding HTML5 video into your email
06:13
Encoding and embedding base64 images
04:44
+ Validation and Testing
5 lectures 10:11
Validating the code of you HTML email.
01:42
Suggested adjustments for Blackberry 5 OS.
00:54
Suggested adjustments for Lotus Notes 6.5, 7, and 8.5.
01:14
Requirements
  • 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
Description

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

Who this course is for:
  • Designers, marketers, or anyone tasked with creating HTML Emails across a range of screens and devices.