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
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
Avatar for Preferred Networks pfn
PRO
1
880
【新卒研修資料】LLM・生成AI研修 / Large Language Model・Generative AI
Avatar for BrainPad brainpadpr
23
17k
Oracle Base Database Service 技術詳細
Avatar for oracle4engineer oracle4engineer
PRO
11
77k
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
Avatar for maroon1st maroon1st
0
190
M5製品で作るポン置きセルラー対応カメラ
Avatar for Hisaya OKADA sayacom
0
140
コンテキストエンジニアリングとは? 考え方と応用方法
Avatar for ファインディ株式会社（イベント資料アップ用） findy_eventslides
4
890
GA technologiesでのAI-Readyの取り組み@DataOps Night
Avatar for yuto16 yuto16
0
270
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
Avatar for GMO Flatt Security flatt_security
0
350
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
Avatar for mtskhs matsu0228
6
2.3k
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
Avatar for you（@youtoy） you
PRO
0
210
社内お問い合わせBotの仕組みと学び
Avatar for Tomoyuki Nishimura nish01
0
180
10年の共創が示す、これからの開発者と企業の関係 ～ Crossroad
Avatar for SORACOM soracom
PRO
1
170

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
36
6.9k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
9k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.6k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
84
9.2k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
9
960
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k

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