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 |
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
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)