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
420

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
2.1k
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
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ：検査・適応で未来を開発 / AI-driven product owner. scrummat2025
Avatar for yosuke nagai yosuke_nagai
4
580
extension 現場で使えるXcodeショートカット一覧
Avatar for とんとんぼ ktombow
0
210
自動テストのコストと向き合ってみた
Avatar for SmartHR 品質保証部 qa
0
110
SOC2取得の全体像
Avatar for shonansurvivors shonansurvivors
1
370
AIAgentの限界を超え、 現場を動かすWorkflowAgentの設計と実践
Avatar for Koji Miyata miyatakoji
0
130
リーダーになったら未来を語れるようになろう/Speak the Future
Avatar for Genki Sano sanogemaru
0
280
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
Avatar for BrainPad brainpadpr
23
17k
職種別ミートアップで社内から盛り上げる アウトプット文化の醸成と関係強化/ #DevRelKaigi
Avatar for Ichiro Nishiuma nishiuma
2
130
PLaMoの事後学習を支える技術 / PFN LLMセミナー
Avatar for Preferred Networks pfn
PRO
9
3.8k
[2025-09-30] Databricks Genie を利用した分析基盤とデータモデリングの IVRy の現在地
Avatar for 和田 悠佑 wxyzzz
0
470
Pure Goで体験するWasmの未来
Avatar for asuka askua
1
180
about #74462 go/token#FileSet
Avatar for tom twinkle tomtwinkle
1
290

Featured

See All Featured
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
224
10k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
188
55k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
71
11k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
4
680
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
32
2.2k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
75
5k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
5.8k
Practical Orchestrator
Avatar for Shlomi Noach shlominoach
190
11k

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