Learn your way! Get started

Responsive HTML Email, Part 3: CSS, Form & Drafts

with expert John Wiley & Sons

Watch trailer

Course at a glance

Release date 4/13/2015
Level Beginner
Runtime 1h 11m
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.


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

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

CSS, Form & Drafts

Beyond Common Break Points (13:32)
  • Introduction (00:10)
  • Beyond Common Break Points (04:15)
  • Content First Approach (02:46)
  • Fluid Width Design (03:22)
  • Disadvantages of Fluid Design (02:48)
  • Summary (00:10)
CSS & Image Techniques (24:11)
  • Introduction (00:10)
  • More About CSS (05:21)
  • Substitute & Optimize Images (04:06)
  • The Background Size Attribute (04:08)
  • Serving Hi-Resolution Images (04:13)
  • Accomodating Hi-Res Screens (02:14)
  • Hi-Res Screen Solution (03:48)
  • Summary (00:10)
Create an Email Subscribe Form (18:44)
  • Introduction (00:10)
  • Create an Email Subscribe Form (04:43)
  • A Form Example (04:41)
  • Aligning Form Field Labels (04:29)
  • Avoiding Keyboard Limitations (04:30)
  • Summary (00:10)
Readability, Viewport, & Drafts (15:23)
  • Introduction (00:10)
  • Improve Readabiltiy in Forms (03:53)
  • Using the Viewport Metatag (05:03)
  • HTML & Plain Text Drafts (03:32)
  • Plain Text Considerations (02:34)
  • Summary (00:10)