In The Year 2000... Designing Responsive Emails
summary
Shows concrete rules and fixes: tables are coming for wrappers, inline styles because Gmail strips head CSS, and media queries work only on some clients so pair them with fluid layouts. Demonstrates when to use !important, how Outlook ignores max-width and needs a max-width bypass, and a retina background-image trick for Outlook that doesn’t resize images. Provides a reusable template, testing workflow with Litmus/Campaign Monitor, and exact client quirks and workarounds that actually shipped.
AI-written summary · about
chapters (20)
- 0:00Intro
- 0:36Who am I
- 2:42Dgogo
- 3:37Takeaways
- 4:45Plan
- 6:17Minimum touchable area
- 7:43Tables are coming
- 8:13Table in emails
- 8:55Inline styles
- 9:55Comments
- 11:45Media Queries
- 12:43Device Pixel Ratio
- 13:01Important
- 14:03Gray Border
- 14:47Retina Images
- 15:49Max Width
- 16:19Rendering Engines
- 18:49Border Radius
- 20:21Resources
- 22:16Questions
related talks
50mModern CSS and interactive email
33mCutting-Edge Responsive Web Design
42mDirty little front-end tricks
40mFuture-Proofing Responsive Web Design in 2023
15mResponsive Design vs. Adaptive Design
51mWeb Design Engineering With the New CSS
48mSmart Layout Patterns with Modern CSS
01h 01mThe Evolution of Responsive Web Design: What's Next?