Creating a Responsive HTML Email

(0 review)
Creating a Responsive HTML Email

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.

What are the requirements?

  • A modern web browser, capable or viewing responsive design
  • An HTML/code editor (free or commercial)
  • Willingness to learn something new
  • A little bit of patience

What am I going to get from this course?

  • 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

What is the target audience?

  • Designers, marketers, or anyone tasked with creating HTML Emails across a range of screens and devices.

Course Staff

Chris Converse

Chris Converse

Designer and Developer at Codify Design Studio

Chris has over 22 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 AngulatJS), 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.

Frequently Asked Questions

What web browser should I use?

The EnlightMe platform works best with current versions of Chrome, Firefox or Safari, or with Internet Explorer version 9 and above.

Course Features

  • Lectures 34
  • Quizzes 0
  • Duration 4 Hours/Week
  • Skill level
  • Language English
  • Students 687
  • Certificate No
  • Assessments Self
  • Section 1: Introduction and Set-up Files

    • Lecture 1.1 Lecture 1:About this course Locked 0m
    • Lecture 1.2 Lecture 2:What’s included in the exercise files. Locked 0m
    • Lecture 1.3 Lecture 3:Setting expectations for you and your clients. Locked 0m
    • Lecture 1.4 Lecture 4:Beginning the project. Locked 0m
  • Section 2: Creating the Graphics

    • Lecture 2.1 Lecture 5:Creating the Banner and Background Graphics. Locked 0m
    • Lecture 2.2 Lecture 6:Creating content graphics for multiple screen sizes. Locked 0m
  • Section 3: Creating the HTML Email

    • Lecture 3.1 Lecture 7:Creating the Base HTML Structure. Locked 0m
    • Lecture 3.2 Lecture 8:Formatting and styling the logo row. Locked 0m
    • Lecture 3.3 Lecture 9:Formatting and styling the headline row. Locked 0m
    • Lecture 3.4 Lecture 10:Formatting and styling the content row. Locked 0m
    • Lecture 3.5 Lecture 11:Formatting and styling the promos row. Locked 0m
    • Lecture 3.6 Lecture 12:Formatting and styling the callouts row. Locked 0m
    • Lecture 3.7 Lecture 13:Formatting and styling the footer row. Locked 0m
  • Section 4: Creating Buttons with HTML and CSS

    • Lecture 4.1 Lecture 14:Converting links to buttons with CSS. Locked 0m
    • Lecture 4.2 Lecture 15:Creating a call-to-action button. Locked 0m
  • Section 5: Adding CSS to the Email

    • Lecture 5.1 Lecture 16:Adding the media queries for medium and small screens. Locked 0m
    • Lecture 5.2 Lecture 17:Switching the headline and banner for smaller screen sizes. Locked 0m
    • Lecture 5.3 Lecture 18:Adjusting the layout for content and footer for smaller screens. Locked 0m
    • Lecture 5.4 Lecture 19:Adjusting the promos for smaller screens. Locked 0m
    • Lecture 5.5 Lecture 20:Adjusting the promos for callouts for medium screens. Locked 0m
    • Lecture 5.6 Lecture 21:Adjusting the promos for callouts for small screens. Locked 0m
  • Section 6: Pushing the Envelope

    • Lecture 6.1 Lecture 22:Setting custom inbox preview text. Locked 0m
    • Lecture 6.2 Lecture 23:Adding animation to your email. Locked 0m
    • Lecture 6.3 Lecture 24:Using web fonts in your email. Locked 0m
    • Lecture 6.4 Lecture 25:Adding HTML5 video into your email Locked 0m
    • Lecture 6.5 Lecture 26:Encoding and embedding base64 images Locked 0m
    • Lecture 6.6 Lecture 27:Using High Definition (Retina) graphics in your HTML Email Locked 0m
  • Section 7: Validation and Testing

    • Lecture 7.1 Lecture 28:Validating the code of you HTML email. Locked 0m
    • Lecture 7.2 Lecture 29:Testing your HTML email with an online service. Locked 0m
    • Lecture 7.3 Lecture 30:Suggested adjustments for Yahoo! Mail. Locked 0m
    • Lecture 7.4 Lecture 31:Suggested adjustments for Blackberry 5 OS. Locked 0m
    • Lecture 7.5 Lecture 32:Suggested adjustments for Lotus Notes 6.5, 7, and 8.5. Locked 0m
  • Section 8: Where to go from here

    • Lecture 8.1 Lecture 33:Where to go from here. Locked 0m
    • Lecture 8.2 Lecture 34:Recommendations for alternate layouts Locked 0m
Chris Converse
Chris Converse

Designer and Developer at Codify Design Studio

Chris has over 22 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 AngulatJS), 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.

Reviews

Average Rating

0
0 rating

Detailed Rating

5 stars
0
4 stars
0
3 stars
0
2 stars
0
1 stars
0