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

A Layout Customiser for The Sun

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for John Blackbourn John Blackbourn
December 05, 2016
Technology
460
4

A Layout Customiser for The Sun

Presented at BigWP on 5th December 2016

Avatar for John Blackbourn

John Blackbourn

December 05, 2016

More Decks by John Blackbourn

See All by John Blackbourn
Investigating Regressions Quickly using Git Bisect
Avatar for John Blackbourn johnbillion
1
2.2k
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.4k
An Explanation of HTTPS for the Inexperienced
Avatar for John Blackbourn johnbillion
0
1.7k
The A to Z of WordPress Multisite
Avatar for John Blackbourn johnbillion
3
2.2k
A Deep Dive into the Roles and Capabilities API
Avatar for John Blackbourn johnbillion
3
2.9k
Unit Testing: What? Why? How?
Avatar for John Blackbourn johnbillion
0
220
Debugging as a Key Skill - WCSOF - WCMIL
Avatar for John Blackbourn johnbillion
1
1.9k
An Introduction to Character Encoding - WCNO - WCNL
Avatar for John Blackbourn johnbillion
0
2.1k

Other Decks in Technology

See All in Technology
dbt と Snowflake と tag
Avatar for Kosaku Ono kevinrobot34
2
310
紙 to デジタル
Avatar for ichien178 ichien178
0
440
アクセスキーが漏れた日にやるべきこと- 無効化の先にある本当の対応
Avatar for kazzpapa3 kazzpapa3
0
370
マイナンバーカード本人確認の実装比較（OAuth/OIDC Numa (Immersion) Workshop 2026） / 20260825 numa-12
Avatar for OpenID Foundation Japan oidfj
PRO
0
370
みてねにおけるAI-DLC導入活動とAIドリブン開発の現在地/JAWS-UG AI-DLC #2
Avatar for Isao Shimizu isaoshimizu
2
300
医療の現場を変革に挑戦した半年間の軌跡 - PythonとAIで現場を変える / From Code to Care
Avatar for soudai sone soudai
PRO
1
640
全社に広がるMCPサーバーを、 どう安全に管理するか MCPass開発の舞台裏
Avatar for k.muguruma mtpooh
3
200
Guerilla InnerSource in enterprises, during the AI hype
Avatar for Oleg Nenashev onenashev
PRO
0
120
[RSJ26] Flow as Flow: Modeling Robot Velocity Fields as Probability Velocity Fields
Avatar for Semantic Machine Intelligence Lab., Keio Univ. keio_smilab
PRO
0
160
分割40%キーボードにスムーズに入門するには
Avatar for Yuki Ishikawa hoto17296
1
200
書籍『生成AIの安全性入門』の入門
Avatar for Koki Wataoka wataoka
0
140
ブラウザで変わるID連携（OAuth/OIDC Numa (Immersion) Workshop 2026）
Avatar for OpenID Foundation Japan oidfj
PRO
0
390

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
183
10k
The Director’s Chair: Orchestrating AI for Truly Effective Learning
Avatar for Mike Taylor tmiket
1
290
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
69
63k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
1
2.6k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
52k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
1k
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
270
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
10k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
5.7k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k

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