Autoplay
Autocomplete
HTML5
Flash
Player
Speed
Previous Lecture
Complete and continue
ZURB MASTER CLASS: Responsive Emails
Learn the Basics of Foundation for Emails
High Level Overview of Foundation for Emails (2:03)
Alternatives to Foundation for Emails (1:18)
Getting Started (4:10)
What Comes With Foundation for Emails (5:59)
Installation & the Basics of Coding With Foundation for Emails (5:12)
Learn About Panini, ZURB's Flat File Generator (6:32)
Quiz: Intro to Foundation for Emails
The Foundation for Emails Grid
Understanding the Grid (11:21)
Quiz: In depth with the Grid
Basic Components
Menus (1:31)
Buttons (5:41)
Quiz: Common Components
Common Patterns
Callout (1:22)
Thumbnails (2:14)
Wrappers (2:44)
Spacers (1:43)
Media Objects (1:55)
Sidebar (2:04)
Complete This Challenge Before Moving On
Test What You've Learned
Structuring Email Marketing Opportunities
The P.L.E.A.S.E. Method - Download the Tool
The P.L.E.A.S.E. Method Explained (2:28)
Step 1: Structuring Persuasion (5:04)
Step 2: Funnel Analytics (4:10)
Step 3: Tease out Opportunities (3:12)
Quiz
Moving Opportunities Forward with Sketching
Sketching Primer: Excerpt From ZURB's Sketching Class (2:49)
Sketching Examples Case Study Context
Basics of Interface Sketching (3:13)
Opportunity Sketches (2:37)
Ideation Sketches (1:44)
Low-Fi Sketch (1:14)
Quiz: Sketching
Wireframing
Moving a Low-Fi into a Wireframe (20:50)
Instructor's Wireframe Examples
Code Your Email
Download the Code
Background & Header (7:12)
Header - Part 2 (3:39)
Main Image (5:03)
Header, Text, and Centered Button (5:09)
Callout Section - Part 1 (9:19)
Callout Section - Part 2 (2:07)
Image Gallery - Part 1 (6:38)
Image Gallery - Part 2 (6:07)
Quiz: Scaffolding an Email
Coding Exercise - Feature Callout
Coding Exercise - Check Your Code
Style Your Email
Link Images (5:49)
Getting Started With Styling (11:44)
Quiz: Styling Your Email
Move components into partials (12:16)
Styling Header Elements (23:32)
Coding Exercise - Styling the Header
Styling Callout Elements (11:21)
Styling an Image Gallery (9:21)
Styling an Article Block (5:42)
Styling the Footer (11:26)
Check Styling for Small Screens (6:02)
Exercise - Check Your SCSS
Exercise - Check Your HTML
Test Your Email
Intro to Testing (6:45)
Processing Your Test (14:34)
Completing Your Test (12:36)
Email Marketing Best Practices
Understanding Your List (1:15)
Avoid Buying Lists (1:06)
Basics of Building Trust (1:29)
Basic Metrics (1:28)
Sending Days/Times General Guidelines (1:09)
What is an ESP? (0:56)
What is CAN-SPAM? (0:51)
Case Challenge A: Create a Promotional Email
Introduction to the Challenge: Promotional Email
1) Sketch Your Email
2) Scaffold Your Email
3) Style Your Email
Assets to complete the challenge
Case Challenge B: Compose a Transactional Email
Introduction to the Challenge: Transactional Email
Deliverables
Assets
Case Challenge C: Create a Drip Campaign Email
Introduction to the Challenge: Drip Email
Deliverables
Coding Exercise - Styling the Header
Lecture content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock