Big Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case Study
summary
Smashing Magazine moves off WordPress to a JAM Stack with a GitHub editorial workflow, Hugo + webpack, and serverless deployment to CDN, using HTTP/2 and service workers to cut start render to 0.6s start render in tests. The team replaces ads with memberships after a 50% ad revenue drop and 66% adblock use, fragments CSS per component for perceived speed, bundles JS into ~10 packages, and ships a site that contains 56 cats as a design signature.
AI-written summary · about
chapters (22)
- 0:00Welcome
- 1:53Generic web design challenge
- 7:10Personality and storytelling
- 10:45Tijuana Flats case study
- 13:33Signature details
- 17:49New visual identity
- 20:56Text-first design
- 23:22Typefaces and cats
- 24:4811-degree tilt design
- 27:12Prototyping and checkout
- 29:03CSS emoji quirks
- 30:10Components and performance
- 31:53Avoided jQuery
- 33:42Fluid modular scales
- 40:46HTTP/2 optimization
- 43:32JavaScript bundling
- 45:17WordPress to JAMStack
- 47:44Serverless architecture
- 50:15Progressive enhancement
- 51:40Service workers
- 53:11Results and delays
- 54:14Final thoughts
related talks
01h 06mBig Bang Redesign Smashing Magazine’s 2017 Relaunch, a Case Study
49mBig Bang Redesign: Smashing Magazine’s 2017 Relaunch, a Case Study
55mA Little Story About A Big Bang Redesign
30mRise of the Jamstack — Mathias Biilmann
50mDo we really need this JAMstack thing? And what even is it?
40mDid We(b Development) Lose the Right Direction?
35mThe Rise of JAMStack
29mPreprocessors, Components, and CSS in JS or: How I Learned to Stop Worrying and Love the Website