Learn your way! Get started

Responsive HTML Email, Part 2: Media and Mobile

with expert John Wiley & Sons


Watch trailer


Course at a glance


Release date 4/13/2015
Level Beginner
Runtime 1h 3m
Closed captioning N/A
Transcript N/A
eBooks / courseware N/A
Hands-on labs N/A
Sample code N/A
Exams N/A


Enterprise Solutions

Need reporting, custom learning tracks, or SCORM? Learn More



Course description

In this 3 part learning series, you will learn how to design attractive, responsive emails that will look consistent across mobile devices. You’ll learn the steps and strategies needed to design, code, and optimize responsive email messages. From identifying the differences among mobile clients, to writing concise, well-position messages, this course covers it all. Learn how to design a single-column mobile friendly email, use HTML attributes with CSS, create forms and style email buttons. Discover how to target devices with media queries and enhance images for mobile displays. The course also covers how to optimize subscribe forms and plain text emails.

Prerequisites

This course assumes familiarity with HTML5 and CSS3 scripting language. This course is part of a 3 part learning series; Responsive HTML Email: Design; Responsive HTML Email: Media, Mobile & Benefits; and Responsive HTML Email: CSS, Form & Drafts. Please be sure to view the courses in order if you are new to the material.

Meet the expert

John Wiley & Sons Our Creative Design courses are presented by experts from Wiley Publishing. Wiley is a global provider of knowledge and knowledge-enabled services that improve outcomes in areas of research, professional practice, and education. They are the publisher of award-winning journals, encyclopedias, books, and online products and services.


Course outline



Media, Mobile & Benefits

Media Queries (25:00)
  • Introduction (00:10)
  • Media Queries (04:21)
  • Using Media Queries (02:35)
  • Media Query Details (03:03)
  • Applying Content Table Classes (03:36)
  • The !important Declaration (02:03)
  • !important Details (03:59)
  • Adding Other Media Types (04:59)
  • Summary (00:10)
Coding Techniques for Mobile (19:45)
  • Introduction (00:10)
  • Column Numbers Transitions (03:34)
  • HTML vs CSS styling (03:59)
  • Layout Columns & Media Queries (02:54)
  • Progressive Disclosure (03:33)
  • Using CSS in Lieu of Images (02:12)
  • CSS Example Code (03:11)
  • Summary (00:10)
Responsive Efforts vs Benefits (18:32)
  • Introduction (00:10)
  • Techniques for Screen Sizes (02:47)
  • The Good & the Bad (04:33)
  • Widen Testing Scope (04:35)
  • Efforts of Responsive Layouts (04:09)
  • Benefits of Responsive Layouts (02:06)
  • Summary (00:10)