The Shady Web: Using CSS for Good, not Evil
summary
Argues CSS animation reduces cognitive load and can make waits feel 12 percent faster with progress cues rather than GIFs; shows concrete patterns that work — shaking invalid fields (Stripe), in-place device demos (MailChimp, ZoomCare), cart-drawer and animated icon states — and notes mixed results for skeleton screens. Recommends concrete workflow: start animation early, sketch storyboards, prototype in Framer/Principle or GreenSock/CodePen, run legibility and feeling tests, A/B where possible, then document durations, easings and class names.
AI-written summary · about
chapters (16)
- 0:00Start
- 0:59About Me
- 3:22Abuse New Technologies
- 3:53Business Goals and Metrics over the User Experience
- 4:59Good Design When Done Well Becomes Invisible
- 5:20Use for Using Animation
- 6:10Cognitive Load
- 7:47Connecting Context
- 9:10Color Response
- 10:34Animation
- 11:50Shopping Cart
- 12:33Icons
- 13:52Skeleton Screens
- 14:34Challenges
- 15:31Use Storyboards To Brainstorm Ideas Quickly
- 18:19Keep Learning and Have Fun
related talks
43mDesigning Meaningful Animation
37mPractical Web Animation
47mResponsible Web Animation: Move Things Without Weighing Them Down
38mCSS in motion: Animations for fun and profit
01h 00mAnimating Web Experiences
37mAnimating the User Experience
43mPurpose and Style: Using Motion with Meaning in Interfaces
25mLets move!