Upgrade to Pro — share decks privately, control downloads, hide ads and more …

A Layout Customiser for The Sun

Avatar for John Blackbourn John Blackbourn
December 05, 2016
Technology
4
410

A Layout Customiser for The Sun

Presented at BigWP on 5th December 2016

Avatar for John Blackbourn

John Blackbourn

December 05, 2016
Tweet

More Decks by John Blackbourn

See All by John Blackbourn
Investigating Regressions Quickly using Git Bisect
Avatar for John Blackbourn johnbillion
1
2.1k
WP CLI: An Intro and Interesting Use Cases
Avatar for John Blackbourn johnbillion
0
2k
Zen Mode: Developing While You're Offline
Avatar for John Blackbourn johnbillion
3
2.3k
An Explanation of HTTPS for the Inexperienced
Avatar for John Blackbourn johnbillion
0
1.6k
The A to Z of WordPress Multisite
Avatar for John Blackbourn johnbillion
3
2k
A Deep Dive into the Roles and Capabilities API
Avatar for John Blackbourn johnbillion
3
2.6k
Unit Testing: What? Why? How?
Avatar for John Blackbourn johnbillion
0
170
Debugging as a Key Skill - WCSOF - WCMIL
Avatar for John Blackbourn johnbillion
1
1.8k
An Introduction to Character Encoding - WCNO - WCNL
Avatar for John Blackbourn johnbillion
0
2.1k

Other Decks in Technology

See All in Technology
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
Avatar for did0es shuta13
6
540
AIに頼りすぎない新人育成術
Avatar for CUEBiC Inc. cuebic9bic
3
330
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
Avatar for BrainPad brainpadpr
2
560
20250818_KGX・One Hokkaidoコラボイベント
Avatar for tohge05 tohgeyukihiro
0
120
Telemetry APIから学ぶGoogle Cloud ObservabilityとOpenTelemetryの現在 / getting-started-telemetry-api-with-google-cloud
Avatar for 逆井（さかさい） k6s4i53rx
0
160
AIエージェントを現場で使う / 2025.08.07 著者陣に聞く！現場で活用するためのAIエージェント実践入門（Findyランチセッション）
Avatar for Shumpei Miyawaki smiyawaki0820
7
1.3k
datadog-distribution-of-opentelemetry-collector-intro
Avatar for tetsuya28 tetsuya28
0
130
Engineering Failure-Resilient Systems
Avatar for Mark Irozuru infraplumber0
0
130
家族の思い出を形にする 〜 １秒動画の生成を支えるインフラアーキテクチャ
Avatar for Ojima Hikaru ojima_h
3
1.4k
Backboneとしてのtimm2025
Avatar for yu4u yu4u
2
430
Intro to Software Startups: Spring 2025
Avatar for Arnab Nandi arnabdotorg
0
290
結局QUICで通信は速くなるの？
Avatar for kota-yata kota_yata
9
7.5k

Featured

See All Featured
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
18
1.1k
Facilitating Awesome Meetings
Avatar for Lara Hogan lara
55
6.5k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
470
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.4k
Docker and Python
Avatar for Tania Allard trallard
45
3.5k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
7
810
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
279
23k

Transcript

  1. A Layout Customiser for The Sun

  2. John Blackbourn @johnbillion | humanmade.co.uk

  3. Largest print newspaper by circulation Second largest newspaper website by

    viewers Migrated to WordPress.com VIP Go 400,000+ articles 1TB images Switched to HTTPS

  4. Building a Layout Customiser (not a Page Builder)

  5. None

  6. Editorial Requirements Quickly alter the content and layout of the

    home page and section pages

  7. Editorial Requirements Visually and technically accurate representation

  8. Editorial Requirements Editorially scalable to a large number of articles

  9. Editorial Requirements Well-formatted storage of the content and presentation data

  10. UX Workshops Identified the typical journey of a news story

  11. UX Workshops Free-form control over layout is overwhelming, slow, and

    unnecessary

  12. UX Workshops Editing content inline for: 1. Context 2. Expediency

  13. Solutions "The layout customiser"

  14. None
  15. None
  16. None

  17. Solutions "The cascade"

  18. None
  19. None
  20. None
  21. None
  22. None
  23. None
  24. None

  25. Solutions Maintaining accuracy of the preview

  26. None
  27. None

  28. Next Steps Scheduling layouts (for sections) Inline image editing REACT

    or ?...

  29. Want to see more? Come and see me

  30. John Blackbourn @johnbillion | humanmade.co.uk