Creating Responsive Html Email

  1. Home
  2. Html
  3. Creating Responsive Html Email

Tags: HTML

Create attractive, responsive, HTML Emails, that work in over 30 combinations of the most commonly used email clients.

Last updated 2022-01-10 | 4.3

- 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

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

* 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.

Course content

8 sections • 34 lectures

Introduction and Set-up Files 4 lectures

About this course. Preview 00:42

What's included in the exercise files. Preview 00:53

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

Setting expectations for you and your clients. Preview 01:31

Beginning the project. Preview 01:49

Creating the Graphics 2 lectures

Creating the Banner and Background Graphics. Preview 03:26

Creating content graphics for multiple screen sizes. Preview 02:20

Creating the HTML Email 7 lectures

Creating the Base HTML Structure. Preview 03:37

Formatting and styling the logo row. Preview 02:24

Formatting and styling the headline row. Preview 02:32

Formatting and styling the content row. Preview 02:51

Formatting and styling the promos row. Preview 02:55

Formatting and styling the callouts row. Preview 02:47

Formatting and styling the footer row. Preview 01:10

Creating Buttons with HTML and CSS 2 lectures

Converting links to buttons with CSS. Preview 02:06

Creating a call-to-action button. Preview 04:33

Adding CSS to the Email 6 lectures

Adding the media queries for medium and small screens. Preview 04:22

Switching the headline and banner for smaller screen sizes. Preview 03:14

Adjusting the layout for content and footer for smaller screens. Preview 03:04

Adjusting the promos for smaller screens. Preview 04:45

Adjusting the promos for callouts for medium screens. Preview 05:35

Adjusting the promos for callouts for small screens. Preview 05:29

Pushing the Envelope 6 lectures

Setting custom inbox preview text. Preview 01:39

Adding animation to your email. Preview 01:59

Using web fonts in your email. Preview 02:20

Adding HTML5 video into your email Preview 06:13

Encoding and embedding base64 images Preview 04:44

Using High Definition (Retina) graphics in your HTML Email Preview 10:50

Validation and Testing 5 lectures

Validating the code of you HTML email. Preview 01:42

Testing your HTML email with an online service. Preview 05:09

Suggested adjustments for Yahoo! Mail. Preview 01:12

Suggested adjustments for Blackberry 5 OS. Preview 00:54

Suggested adjustments for Lotus Notes 6.5, 7, and 8.5. Preview 01:14

Where to go from here 2 lectures

Where to go from here. Preview 00:58

Recommendations for alternate layouts Preview 02:31