Responsive Design Workflow
summary
Argues that old Photoshop-heavy handoffs slow projects and proposes a content-out workflow that starts with a content inventory, quick content-reference wireframes, writing real text, converting to HTML and building a static prototype. Introduces breakpoint graphs to document where layouts and capabilities change and a documentation pipeline using Dexy + PhantomJS + CasperJS to auto-generate screenshot-driven style guides. Claims this cuts dozens of Photoshop variants and ships faster on real client projects.
AI-written summary · about
chapters (12)
- 0:00Intro
- 1:55Responsive Design Workflow
- 11:21Workflow
- 19:02Content Inventory
- 26:02Zero Interface
- 27:47Breakpoints
- 32:48The Problem
- 40:11Documentation
- 41:30Dexy
- 44:07Frames
- 44:43PhantomJS
- 46:22Outro
related talks
28mBecause F$%k Photoshop
42mBack to the Future: No More Static Mockups!
46mThe New Photoshop, Part 2: The Revenge of The Web
29mDesigning in the Browser
33mA Modern Designer's Workflow
29mEffective user interface design with HTML prototyping
53mLess look, more feel. Improving the user experience as a frontender
29mWorkflow in the Age of the Design System