Creating a Responsive HTML Email
4.6 (190 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,547 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Creating a Responsive HTML Email to your Wishlist.

Add to Wishlist

Creating a Responsive HTML Email

Create attractive, responsive, HTML Emails, that work in over 30 combinations of the most commonly used email clients.
4.6 (190 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
2,547 students enrolled
Created by Chris Converse
Last updated 4/2017
English
Price: $20
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 2 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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 loosing the design integrity
  • Add CSS to your HTML Email to take advantage of newer email clients and varying screen sizes
View Curriculum
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 is the target audience?
  • Designers, marketers, or anyone tasked with creating HTML Emails across a range of screens and devices.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
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
+
Where to go from here
2 Lectures 03:29
About the Instructor
Chris Converse
4.5 Average rating
808 Reviews
43,388 Students
8 Courses
Designer and Developer at Codify Design Studio

Chris has over 25 years experience in graphic design and interactive media, with a unique focus on both design and development. Chris possesses development skills across such languages as HTML, CSS, JavaScript (including jQuery and AngularJS), and PHP, making his design execution optimal across various media. In addition to designing and teaching online, Chris speaks at number of industry-related conferences, including HOW Design, Adobe MAX, Adobe ADIM, AIGA, and the Creative Publishing Network.