Designing in the Browser

on YouTube ↗29m

" summary

Argues that websites should be prototyped in the browser using HTML5 so interaction and real data drive design rather than Photoshop mock-ups; recommends scaffolding with DocPad or Jekyll and HTML5 Boilerplate, styling with Sass/LESS and Twitter Bootstrap, and seeding content with faker.js and LoremPixel to reveal layout breakage (example: a rolodex prototype shows the logo fails with long names). Advises low‑fidelity first, ignore pixel perfection and old IE during prototyping.

AI-written summary · about

" chapters (15)

1. 0:00Start
2. 2:32Text Wrapping
3. 3:11What Is Web Design
4. 4:25Design the Interaction
5. 9:37Lorem Ipsum
6. 13:16Wireframing for Web Apps
7. 14:34Responsive Web Design
8. 14:59Responsive Design Workflow
9. 15:17Html Prototypes
10. 16:17Pointless Semantics
11. 17:18Old Ie Compatibility
12. 18:33Static Site Generator
13. 19:35Style Preprocessors
14. 20:13Naming Conventions
15. 25:37Documenting Your Styles with Style Doc

" related talks

• 48mResponsive Design WorkflowStephen Hay · Mobilism 2012
• 42mBack to the Future: No More Static Mockups!Mark Conroy · Frontend United 2017
• 53mLess look, more feel. Improving the user experience as a frontenderRoy Scholten · Frontend United 2016
• 39mDesigning with ComponentsMark Dalgleish · ComponentsConf 2019
• 02mPrototypingKedar · Meta Refresh 2013
• 40mTen Pro Tips for PrototypingFred Beecher · Web Unleashed 2017
• 29mRethinking Design PracticesMark Dalgleish · ReactConf AU 2020
• 43mGetting serious about Responsive Web DesignArpan Chinta · Meta Refresh 2013