Course: Creating a Responsive HTML Email

Creating a Responsive HTML Email

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
  • Self-Paced
About this 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: 88 minutes

Who is the target audience?

  • Designers, marketers, or anyone tasked with creating HTML Emails across a range of screens and devices
Basic knowledge
  • 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
What you will 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
Number of Lectures: 34
Total Duration: 01:43:47
Introduction and Set-up Files
  • About this course  
  • What's included in the exercise files  
  • Setting expectations for you and your clients  
  • Beginning the project  
Creating the Graphics
  • Creating the Banner and Background Graphics  
  • Creating content graphics for multiple screen sizes  
Creating the HTML Email
  • Creating the Base HTML Structure  
  • Formatting and styling the logo row  
  • Formatting and styling the headline row  
  • Formatting and styling the content row  
  • Formatting and styling the promos row  
  • Formatting and styling the callouts row  
  • Formatting and styling the footer row  
Creating Buttons with HTML and CSS
  • Converting links to buttons with CSS  
  • Creating a call-to-action button  
Adding CSS to the Email
  • Adding the media queries for medium and small screens  
  • Switching the headline and banner for smaller screen sizes  
  • Adjusting the layout for content and footer for smaller screens  
  • Adjusting the promos for smaller screens  
  • Adjusting the promos for callouts for medium screens  
  • Adjusting the promos for callouts for small screens  
Pushing the Envelope
  • Setting custom inbox preview text  
  • Adding animation to your email  
  • Using web fonts in your email  
  • Adding HTML5 video into your email  
  • Encoding and embedding base64 images  
  • Using High Definition (Retina) graphics in your HTML Email  
Validation and Testing
  • Validating the code of you HTML email  
  • Testing your HTML email with an online service  
  • Suggested adjustments for Yahoo! Mail  
  • Suggested adjustments for Blackberry 5 OS  
  • Suggested adjustments for Lotus Notes 6.5, 7, and 8.5  
Where to go from here
  • Where to go from here  
  • Recommendations for alternate layouts  
Reviews (0)