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.7k
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
GPUをつかってベクトル検索を 扱う手法のお話し ~NVIDIA cuVSとCAGRA~
Avatar for fshuhe fshuhe
0
270
アノテーション作業書作成のGood Practice
Avatar for Cierpa & Company cierpa0905
PRO
0
300
20251024_TROCCO／COMETAアップデート紹介といくつかデモもやります！_#p_UG 東京：データ活用が進む組織の作り方
Avatar for D soysoysoyb
0
130
ラスベガスの歩き方 2025年版（re:Invent 事前勉強会）
Avatar for JunjiKoide junjikoide
0
570
CLIPでマルチモーダル画像検索 →とても良い
Avatar for Motoi Washida wm3
1
620
Raycast AI APIを使ってちょっと便利なAI拡張機能を作ってみた
Avatar for ryo kawamataryo
0
150
知覚とデザイン
Avatar for Rinchoku rinchoku
1
630
AI駆動で進める依存ライブラリ更新 ─ Vue プロジェクトの品質向上と開発スピード改善の実践録
Avatar for sayn0 sayn0
1
340
DMMの検索システムをSolrからElasticCloudに移行した話
Avatar for 小山凌太 hmaa_ryo
0
270
プロダクト開発と社内データ活用での、BI×AIの現在地 / Data_Findy
Avatar for Sansan R&D sansan_randd
1
640
Okta Identity Governanceで実現する最小権限の原則
Avatar for 株式会社出前館 demaecan
0
200
激動の時代を爆速リチーミングで乗り越えろ
Avatar for SansanTech sansantech
PRO
1
170

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
930
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3.1k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
Designing for Performance
Avatar for Lara Hogan lara
610
69k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
37
2.6k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
1.7k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.2k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
45
7.7k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
Avatar for mongodb mongodb
48
9.7k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
34
2.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