About the course
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: 78 minutes
Who Should Attend?
Graphic Designers, Email Marketers, Front-end Web Developers
Curriculum
Lesson 1: Introduction and Set-up Files
-
Lecture 1: What's included in the exercise files
00:00:53
-
00:01:31
-
Lecture 3: Beginning the project
00:01:49
Lesson 2: Creating the Graphics
-
Lecture 1: Creating the Banner and Background Graphics
00:03:26
-
00:02:20
Lesson 3: Creating the HTML Email
-
Lecture 1: Creating the Base HTML Structure
00:03:36
-
Lecture 2: Formatting and styling the logo row
00:02:24
-
Lecture 3: Formatting and styling the headline row
00:02:32
-
Lecture 4: Formatting and styling the content row
00:02:51
-
Lecture 5: Formatting and styling the promos row
-
Lecture 6: Formatting and styling the callouts row
00:02:47
-
Lecture 7: Formatting and styling the footer row
00:01:10
Lesson 4: Creating Buttons with HTML and CSS
-
Lecture 1: Converting links to buttons with CSS
00:02:06
-
Lecture 2: Creating a call-to-action button
00:04:33
Lesson 5: Adding CSS to the Email
-
00:04:22
-
00:03:14
-
00:03:04
-
Lecture 4: Adjusting the promos for smaller screens
00:04:45
-
00:05:35
-
00:05:29
Lesson 6: Pushing the Envelope
-
Lecture 1: Setting custom inbox preview text
00:01:39
-
Lecture 2: Adding animation to your email
00:01:59
-
Lecture 3: Using web fonts in your email
00:02:20
-
Lecture 4: Adding HTML5 video into your email
00:06:13
-
Lecture 5: Encoding and embedding base64 images
00:04:44
Lesson 7: Validation and Testing
-
Lecture 1: Validating the code of you HTML email
00:01:42
-
00:05:09
-
Lecture 3: Suggested adjustments for Yahoo! Mail
00:01:11
-
Lecture 4: Suggested adjustments for Blackberry 5 OS
00:00:54
-
00:01:14
Lesson 8: Where to go from here
-
Lecture 1: Recommendations for alternate layouts
00:02:31
-
Lecture 2: Where to go from here
00:00:58
Library
Storage
-
.zip 01_02_exercisefiles
Related Courses
Creating a Responsive Web Design
Chris Converse
Creating a Web App for iPad