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
160
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
2k

Other Decks in Technology

See All in Technology
IIWレポートからみるID業界で話題のMCP
Avatar for Naohiro Fujie fujie
0
770
Oracle Audit Vault and Database Firewall 20 概要
Avatar for oracle4engineer oracle4engineer
PRO
3
1.7k
プロダクトエンジニアリング組織への歩み、その現在地 / Our journey to becoming a product engineering organization
Avatar for hiro-torii hiro_torii
0
120
実践！ AIエージェント導入記
Avatar for 森本タカヒロ 1mono2prod
0
160
20250623 Findy Lunch LT Brown
Avatar for Brown 3150
0
840
第9回情シス転職ミートアップ_テックタッチ株式会社
Avatar for forester3003 forester3003
0
220
Windows 11 で AWS Documentation MCP Server 接続実践/practical-aws-documentation-mcp-server-connection-on-windows-11
Avatar for emi emiki
0
910
解析の定理証明実践＠Lean 4
Avatar for H Segawa dec9ue
0
170
GitHub Copilot の概要
Avatar for tomokusaba tomokusaba
1
130
製造業からパッケージ製品まで、あらゆる領域をカバー！生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
130
_第3回__AIxIoTビジネス共創ラボ紹介資料_20250617.pdf
Avatar for AIxIoTビジネス共創ラボ iotcomjpadmin
0
150
～宇宙最速～ 2025年AWS Summit レポート
Avatar for sleepingsato satodesu
1
1.8k

Featured

See All Featured
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
330
24k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
24
1.7k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
5
210
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
357
30k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k
Visualization
Avatar for Eitan Lees eitanlees
146
16k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k

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