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
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
Oracle MCP Servers Explained
Avatar for thatjeffsmith thatjeffsmith
1
510
:syncing_time:
Avatar for sksat sksat
2
760
フィジカルAIの知識ゼロの僕でも AIを使えばここまでできた
Avatar for tatsuya1970 tatsuya1970
0
180
[potatotips #96] Give Your AI Agent the Flutter Playbook
Avatar for Kenichi Kambara korodroid
0
170
Eight Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
3
8.3k
Android skills に学ぶ
Avatar for kokiko kokiko
0
180
GopherCon @シアトル に行ってきました
Avatar for Takuto Nagami logica0419
0
270
tamachi.go 誕生の裏側
Avatar for ryoji miyamoto rymiyamoto
1
210
EMの役割で 変わったこと・変わらなかったこと
Avatar for SansanTech sansantech
PRO
0
120
Introduction to Sansan Meishi Maker Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
460
Introduction to Bill One Development Engineer
Avatar for Sansan, Inc. sansan33
PRO
0
470
Contract One Engineering Unit 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
0
20k

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
51
53k
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
290
JAMstack: Web Apps at Ludicrous Speed - All Things Open 2022
Avatar for David Neal reverentgeek
1
580
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
270
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
31
6.2k
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
490
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
9.7k
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
2
650
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.9k
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
300
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.8k

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