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
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.
Udemy | English | 1h 44m | 1.47 GB
Created by: Chris Converse