Responsive Web Bloopers at Viki
summary
Company shifts to low-fidelity prototyping so engineers prototype constraints before high-fidelity design, cutting back-and-forth. CSS conventions and mobile‑first media queries standardize code; CSS Grid and feature queries replace float-based row wrappers. Fonts load dynamically with defer fonts with Font Face Observer, images lazy-load with lazySizes and IntersectionObserver, dropping mobile content requests ~65% and improving fully-loaded time ~40%. Deferring scripts plus SpeedCurve monitoring speeds a video page from 13.8s to 4.9s (~64% faster). PhantomCSS catches visual regressions.
AI-written summary · about
chapters (10)
- 0:00Introduction
- 3:52Design-developer communication breakdown
- 8:52Code maintainability challenges
- 13:25Technical debt and refactoring
- 18:42CSS frameworks and style guides
- 21:11Modern CSS tools and techniques
- 26:35Early device testing importance
- 33:42Visual regression testing
- 34:03Performance optimization journey
- 42:39Q&A and closing
related talks
30mResponsive Web Bloopers at Viki
58mNew Adventures in Responsive Web Design
25mBetting on the web: Ensuring fine-tuned performance for dynamic web apps
46mResponsive Typography
43mResponsive Design, Past, Present and Future
49mPanel 4: Responsive Layout
17mPerformance Engineering in Dynamic Web
43mGetting serious about Responsive Web Design