Big Bang Redesign Smashing Magazine’s 2017 Relaunch, a Case Study
summary
Eighteen months of work replaces a multi-platform LAMP mess with a static prebuild with Hugo served from a CDN, plus JavaScript APIs and service workers to glue the shop, job board and new membership — removing the traditional server and boosting performance by fivefold speed increase so pages often start render <0.5s on good connections and ~0.9s on mid‑range 3G. Ad revenue had fallen to one‑sixteenth over five years, prompting the rebuild; CSS Grid, calc‑based fluid scaling, CSS custom properties and per‑category critical CSS also ship and improve maintainability.
AI-written summary · about
chapters (16)
- 0:00Introduction to redesign
- 1:14Legacy site challenges
- 7:14Ad blockers impact
- 9:03New product vision
- 12:12Component-first approach
- 15:22Brand personality and cats
- 17:51Tilted design signature
- 19:55Fluid sizing without media queries
- 26:39CSS calc for responsive scaling
- 30:35CSS namespacing and BEM
- 36:55CSS Grid layout power
- 43:13CSS Grid layout demo
- 49:09CSS custom properties logic
- 55:30Progressive CSS techniques
- 59:04Critical CSS implementation
- 1:03:58Lessons learned and conclusion
related talks
56mBig Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case Study
49mBig Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case Study
30mRise of the Jamstack — Mathias Biilmann
58mNew Adventures in Responsive Web Design
59mNew Adventures In Responsive Web Design
28mThe 90s Called and They Want Their Websites Back
20mLeveraging the power of service design to boost web performance
42mBack to the Future: No More Static Mockups!