Video description

In this one-of-a-kind video training course, you will learn how to design attractive, responsive emails that will look consistent across mobile devices. Our instructors provide expert, straight-forward, user-friendly training to help you tackle 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. If you’re looking for comprehensive beginning-intermediate video instruction on building a responsive email, you’ll find it here.

---

Table of Contents

Part 1

Common Issues with Mobile Email 00:04:26

Rise in Mobile Client Usage 00:06:02

Effect on ROI 00:04:14

Differences in Mobile Clients 00:05:53

Support for Media Queries 00:04:44

Part 2

Taking a ‘Design-First’ Approach 00:02:51

Differences in Layout 00:03:00

Single-Column Sizing 00:03:38

Links and Buttons 00:02:39

Font Sizing 00:05:56

Concise, Well-Positioned Message 00:06:55

Hiding Extraneous Details 00:02:29

Wireframing Two Versions 00:05:15

Part 3

Defining Mobile-Specific CSS 00:04:20

Using an @media Declaration 00:05:37

Applying the contenttable Class 00:03:34

Making Styles Important 00:06:00

Adding Other Declarations 00:04:58

Part 4

Adapting 2-Column Layouts 00:03:31

Using HTML Attributes with CSS 00:03:57

Adding a Simple Media Query 00:02:53

Incorporating Progressive Disclosure 00:03:32

Styling Email Buttons 00:05:22

Part 5

Addressing Different Screen Sizes 00:07:20

Adjusting the Focus of Media Queries 00:04:33

Balancing Effort vs. Benefit 00:06:13

Moving Beyond Breakpoints 00:07:00

Designing Fluid Layouts 00:06:09

Part 6

Using Supported CSS 00:05:19

Swapping Background Images 00:04:04

Setting background-size 00:04:07

Serving High-Res Images 00:04:11

Addressing Retina Displays 00:06:01

Part 7

Benefiting from Optimized Forms 00:09:22

Aligning Form Field Labels 00:04:26

Accommodating the Special Keyboard 00:04:28

Narrowing Form Layouts 00:03:50

Setting Initial Scale/Zoom 00:05:02

Optimizing Plain-Text Email 00:06:05