Modern CSS and interactive email
summary
Shows concrete techniques and results: gallery, hotspots and a whack-a-mole game built with CSS-only controls, a multi‑page shopping email that does price calculations and analytics, and a version with 117 radio buttons that actually works in WebKit clients while falling back for Outlook. Claims support numbers — 63% interactive-capable opens — and explains tooling and limits: CSS/HTML size ~102 KB, Gmail CSS ~12k chars. Covers the Checkbox Hack and Punched Card Coding and which clients actually render them.
AI-written summary · about
chapters (26)
- 0:00Intro
- 1:27What is interactive email
- 2:40The checkbox hack
- 3:58Examples
- 5:52Linking clicks to inputs
- 7:23Nesting
- 9:05Email clients
- 11:50Punch card
- 14:29Flack
- 15:54Radio Buttons
- 21:20Email Analytics
- 24:08Limitations
- 27:14Fun examples
- 30:10More examples
- 31:33Blend modes
- 32:28Time to build
- 33:38Most annoying email client
- 34:33Tools for debugging
- 36:05Nested labels
- 36:55Email Acid
- 38:01Email Standards
- 39:21Lotus Notes
- 42:38Time investment
- 43:23Thunderbird
- 44:37Principles
- 47:12Creative ideas
related talks
33mCutting-Edge Responsive Web Design
24mIn The Year 2000... Designing Responsive Emails
43mCSS is Awesome!
31mThe Power of CSS
17mHow I Learn To CSS
01h 00mThe CSS You Don’t Know About
42m3.14 Things You Didn't Know About CSS (Updated)
27mCSS as a Game Engine: Building Playful, Stateful Web Experiences Without JS