Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Harmonising content and code
Search
Richard Saunders
November 09, 2017
Technology
0
100
Harmonising content and code
Richard Saunders
November 09, 2017
Tweet
Share
More Decks by Richard Saunders
See All by Richard Saunders
Content modelling workshop: Brighton University
rdsaunders
0
280
Contensis User Group - Spring 2019
rdsaunders
0
160
Rocket Conf 2018 - Contensis update
rdsaunders
0
120
Contensis User Group 2017 - Product update
rdsaunders
0
180
Rocket 2017 - Contensis Product Update
rdsaunders
0
280
Rocket 2017 - Future of Contensis
rdsaunders
0
100
Contensis User Group 2016 - Product Update
rdsaunders
0
200
The Future of Contensis - 2016
rdsaunders
0
150
Contensis Product Update 2016
rdsaunders
0
260
Other Decks in Technology
See All in Technology
Agentic Workflowという選択肢を考える
tkikuchi1002
1
500
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
2
210
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.2k
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
140
地図も、未来も、オープンに。 〜OSGeo.JPとFOSS4Gのご紹介〜
wata909
0
110
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
270
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
29
11k
あなたの声を届けよう! 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
kondoyuko
4
440
Wasm元年
askua
0
140
2025-06-26_Lightning_Talk_for_Lightning_Talks
_hashimo2
2
100
~宇宙最速~2025年AWS Summit レポート
satodesu
1
1.8k
CI/CD/IaC 久々に0から環境を作ったらこうなりました
kaz29
1
170
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
The Cost Of JavaScript in 2023
addyosmani
51
8.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.2k
Building an army of robots
kneath
306
45k
For a Future-Friendly Web
brad_frost
179
9.8k
Agile that works and the tools we love
rasmusluckow
329
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Transcript
content & code harmonising
Design systems
A set of connected patterns and shared practices, coherently organised
to serve the purposes of a digital product. – Alla Kholmatova “
– Alla Kholmatova Design Systems A practical guide to creating
design languages for digital products
None
None
None
None
None
– Brad Frost Atomic Design Creating and maintaining robust design
systems http://atomicdesign.bradfrost.com/
– Richard Saunders, Zengenti Design systems in websites and apps
https://www.youtube.com/watch?v=z_ZLkEZtwLk
– Louis Rosenfeld Every large website is a complex adaptive
system “
?
100
100000
1000 - 5000
Static content
Dynamic content
Curated content
Personalised content
French German Multilingual content
None
– Louis Rosenfeld Every large website is a complex adaptive
system “
Modelling Create better content
None
None
None
None
None
None
Components Grouping small pieces of content
Components are groups of fields you can use in your
content types. – Richard Saunders “
Allow you to group unique chunks of content together that
do not make sense on their own. – Richard Saunders “
SEO Address Opening hours Video banner Image carousel Social open
graph Feature areas Small stories Course module Blood results
None
None
None
None
None
None
None
Interface inventory An audit of the elements of your website
None
None
Content + Code = Delivery Component
Video banner
Logo block
Feature block
Hero feature
Summary - centred
DEMO Component builder
Componentise content delivery
Video banner { "type": "videoHeroBlock", "value": { "title": "Work for
us", "subtitle": null, "callToAction": "https://www.zengenti.com/jobs”, "videoURL": "https://www.youtube.com/watch? v=04cANjthus0" } }
None
None
None
Brings consistency
None
Simpler testing
Monitor and improve performance
– Airbnb Airbnb Design Painting with code https://airbnb.design/painting-with-code/
None
None
None
None
Summary
Work towards establishing a design system
– Alla Kholmatova Design Systems A practical guide to creating
design languages for digital products
Focus on your content
Content first
Define common reusable components
This process takes time
But establishes a foundation for the future
Thank you