designing future-friendly content
TRANSCRIPT
PREFACE FOR EVENT ORGANISERS2
‘Designing Future-Friendly Content’ is a hands-on workshop, introducing the concepts of structured content, domain modeling, content modeling, and content planning for a content management system.
It is ideally suited for UX designers, content strategists, web developers, or other business stakeholders with a responsibility for content publishing.
We can run the session as a full-day or half-day event at your company or conference event. Contact us for details.
Mike and Carrie
0
@CARRIEHD / @MIKEATHERTON
@CARRIEHD / @MIKEATHERTON
a b p f dk = f p = ^ = m i ^k = clR = ^RR^kd fkd =b i bj bk q p = f k = pr `e = ^ =t^v = ^ p = _ b p q = ql =^ ` `ljm i f pe = ^ = m^R q f ` r i^R = m rR mlp b K
— CHARLES EAMES
LANGUAGE IS INFRASTRUCTURE7
Design starts from sharing a common language.
Information spaces have contextual concepts, relationships, and rules.
Our fundamental design is a model of connected concepts in a ‘subject domain’.
The interfaces we then create are representations of that abstract space.
0
@CARRIEHD / @MIKEATHERTON SHOUT OUT TO ANDREW HINTON @INKBLURT
“So we’re putting on a ÅçåÑÉêÉåÅÉ=ÉîÉåí about ru. This óÉ~ê it’s
going to be in máííëÄìêÖÜI=m^. Our éêçÖê~ã has ÑìääJäÉåÖíÜ=and=
äáÖÜíåáåÖ=í~äâë from fantastic ëéÉ~âÉêë and âÉóåçíÉë, and other
Ñçäâë giving ÑìääJÇ~ó=and=Ü~äÑJÇ~ó=ïçêâëÜçéë, on íçéáÅë like
Future-Friendly Content. _ççâ=É~êäó for that one! The main event
has Ü~åÇëJçå=sessions for ÄÉÖáååÉêë and ÉñéÉêíë.
We host ëÉëëáçåë and ëçÅá~ä=ÉîÉåíë in different îÉåìÉë all over
the cityI=with the help of our îçäìåíÉÉêë and ëéçåëçêë.”
GETTING HOLD OF THE WORDS80
@CARRIEHD / @MIKEATHERTON
i s each event an i nstance o f the overa l l ‘ conference ’ ?
i s the top i c a lways the same?
new locat i on each year ?i s th i s a type o f
ta l k or a durat i on ?
can a speaker a l so g i ve a workshop ?
Is a keynote d i f f erent to a speaker ?what are peop le g i v i ng
workshops ca l l ed ?
a l l sess i ons have var i ab l e durat i on ?
i s th i s k i nd o f top i c l i k e the ma in event top i c ?
t i c ket i ng ? ava i l ab i l i ty ? workshops on ly ?
d i f f i cu l ty ? wh i ch sess i on types ?
d i f ferent venue for each sess i on !
i s soc i a l just a k i nd o f sess ion ?
can vo lunteers a l so be speakers ? what about
i n the future ?
i s a sponsor a lways assoc i a ted w i th a
sess i on ?
abp`R f_fkd=qeb=pr_gb`q=alj^fk=rkm^`hp=`lk`bmqpI=qbRjpI=Rbi^qflkpefmp=^ka=RribpK
INTERFACES ARE WINDOWS ON THE WORLD90
@CARRIEHD / @MIKEATHERTON
b^`e=fkqbRc^`b=fp=^=afccbRbkq=RbmRbpbkq^qflk=lc=qeb=p^jb=pqRr`qrRba=`liib`qflk=lc=RbplrR`bpK
il`^qflk
RbplRq
m^Rh
elqbi
tbbkfb
i^ka
jb^i
Rbpq^rR^kq
^qqR^`qflk
`e^R^`qbR
`Rb^qlR
tlRh
crqrRbJcR fbkaiv=`lkqbkqSTORED, STRUCTURED, AND CONNECTED FOR PEOPLE AND COMPUTERS, BEYOND THE USER INTERFACE.
@CARRIEHD / @MIKEATHERTON
RbplrR`b=_bclRb=RbmRbpbkq^qflkKYOUR FIRST DESIGN DOESN’T CARE ABOUT YOUR PLATFORM OR WHAT CONTENT YOU HAVE.
FORGET WEBSITES. FORGET SITEMAPS.
CONSIDER THE pr_gb`q=alj^fk=AND THE RESOURCES WITHIN.
@CARRIEHD / @MIKEATHERTON
CONCEPTS ARE GENERALISED TYPES130
@CARRIEHD / @MIKEATHERTON
b^`e=`lk`bmq=fp=Rbrp^_ib=^`Rlpp=jriqfmib=pmb`fcf`=bu^jmibpK
qvmb Rbdflk
_lqqibR
_R^ka
mRllc
`lrkqRv sfkq^db
`^ph afpqfiibRv
TYPE OF WHISK(E)Y; E.G.
SCOTCH, IRISH, RYE,
BOURBON, SOUR MASH
ORIGIN COUNTRY; E.G.
SCOTLAND, IRELAND,
WALES, USA , JAPAN
ORIGIN REGION; E.G.
HIGHLANDS, ISLAY,
SPEYSIDE, CAMPBELLTOWN
PRODUCT BRAND; E.G.
PAPPY VAN WINKLE, JIM
BEAM, GLENMORANGIE
YEAR OF BOTTLING; E.G.
1990, 1962
ALCOHOL BY VOLUME; E.G.
65% ABV
CASK TYPE USED; E.G.
BOURBON, PORT, MADEIRA
DISTILLERY USED; E.G.
ARDBEG, BALVENIE, OBAN
BOTTLING PLANT; E.G.
ACORN, KINGSBURY
pr_gb`q=alj^fkW=tefphv
RELATIONSHIPS14
Relationship values explain how concepts connect in reality.
They help to define the structure of the working model outside of an interface.
Explaining in an interface ‘how’ ideas connect supports learning through linking.
0
@CARRIEHD / @MIKEATHERTON
RELATIONSHIP EXAMPLES150
@CARRIEHD / @MIKEATHERTON
jllk mi^kbq
^rqelR _llh
fkdRbafbkq Rb`fmb
jlsfb _llh
qeb=Rbi^qflkpefm=s^irb=abp`R f_bp=elt=qtl=`lk`bmqp=^Rb=`lkkb`qbaK
orbits
wrote
partOf
adaptationOf
MAPPING THE DOMAIN FROM CONTENT170
@CARRIEHD / @MIKEATHERTON
rkabRpq^kafkd=qeb=alj^fk=`^k=pljbqfjbp=jb^k=tlRhfkd=_^`ht^Rap=cRlj=`lkqbkq=bu^jmibpK=
different examples of a ‘craft’
different examples of a ‘craft type’overall subject domain
BUILDING A DOMAIN MODEL180
@CARRIEHD / @MIKEATHERTON
Environment
Craft type Pilot
Creative workCraft
Inventor
qeb=alj^fk=jlabi=peltp=b^`e=`lk`bmq=bkqfqv=^ka=abp`R f_bp=qeb=Rbi^qflkpefmpK
hasTypeOperatesIn InventedBy
FlownBy
AppearsIn
AppearsIn
bumbRqp=j^m=qeb=tlRiaI=rpbRp=j^Rh=qeb=mlfkqp=lc=fkqbRbpqKGOOD MODEL-BASED DESIGN HAS COMPLEXITY BEHIND THE SCENES AND CLARITY UP FRONT.
FIND A BALANCE BETWEEN AUTHORITATIVE AND ACCESSIBLE.
@CARRIEHD / @MIKEATHERTON@CARRIEHD / @MIKEATHERTON
@CARRIEHD / @MIKEATHERTON
Ú p qRr` qrR b a = `lkq bk q Û =R b c bR p = ql =f k clRj^q flk =lR = `lk q bk q = q e^q = e^ p =_ b bk = _Rlhbk = altk =^ka = ` i^ p p f c f b a =
r p fkd =j b q^a^q^ K =
— WIKIPEDIA
qR^mmba=fk=qeb=_lav=cfbiaWHEN CONTENT IS UNSTRUCTURED IN A ‘BLOB,’ CORE CONCEPT ATOMS ARE INVISIBLE.
@CARRIEHD / @MIKEATHERTON SHOUT OUT TO JEFF EATON @EATON
UNSTRUCTURED ‘BLOB’ CONTENT240
@CARRIEHD / @MIKEATHERTON
qeb=rkpqRr`qrRba=`jp=qefkhp=fk=m^dbpI=qfqibpI=^ka=_lav=cfbiapK
*’What You See Is What You Get’ (if you’re very lucky)
Generic ‘post’ - nothing which defines this as a ‘session’ the than the menu category it’s placed in. WYSIWYG* tools which will add
formatting to this post only, potentially clashing with global
stylesheets.
Title, though not defined as specifically a session title.
Images added directly into post body, with no explicit relationship stated.
Dumb links to speakers added by hand to this post only.Three important pieces of
information (track, time, duration) added to the body as text.
This description is appropriate for a body-type field, but one explicitly
for ‘session description’.
STRUCTURED CONTENT IN A CMS250
@CARRIEHD / @MIKEATHERTON
qeb=pqRr`qrRba=`jp=qefkhp=fk=klabpI=`lkqbkq=qvmbpI=^ka=Rbi^qflkpefmpK
2015 IA SUMMIT, EDITING INTERFACE IN DRUPAL 8
STRUCTURED CONTENT IN THE INTERFACE260
@CARRIEHD / @MIKEATHERTON
a^q^=fk=^=pqRr`qrRba=`lkqbkq=bkqfqv=fp=afpmi^vba=fk=afccbRbkq=t^vp
AUTOMATIC CONTENT NAVIGATION270
@CARRIEHD / @MIKEATHERTON
pqRr`qrRba=`lkqbkq=^iiltp=qeb=`ljmrqbR=ql=`Rb^qb=^ka=rma^qb=fkabubp=^rqlj^qf`^iivK
CREATE ONCE, PUBLISH EVERYWHERE290
@CARRIEHD / @MIKEATHERTON
qeb=p^jb=`lkqbkq=pqRr`qrRbp=j^v=_b=`elRbldR^meba=afccbRbkqiv=^`Rlpp=absf`bpK
FUTURE-FRIENDLY IS ROBOT-READABLE300
@CARRIEHD / @MIKEATHERTON
`lkqbkq=pqRr`qrRba=clR=`ljmrqbRp=`^k=qR^sbi=^kvtebRbK
Google Images
iMDbRotten Tomatoes
Tribune Media Services
Google Play / Amazon
WikiData
EDITORIAL COLLECTIONS AS CURATION310
@CARRIEHD / @MIKEATHERTON
Ú`liib`qflkÛ=fp=^=jlabiba=`lk`bmq=tef`e=RbcbRbk`bp=`lkqbkq=cRlj=bipbtebRb=fk=qeb=jlabiK
BBC IPLAYER AND BBC FOOD. WWW.BBC.CO.UK
EDITORIAL PAGE AS STRUCTURED CONTENT320
@CARRIEHD / @MIKEATHERTON
^=tb_=m^db=`^k=pqfii=e^sb=jlRb=mRlmbRqfbp=qe^k=^=qfqib=^ka=_lavK
Optionally add a header image
Intro area is a different style than body
Body contains only basic HTML
alj^fk=fp=`lkqbuqI=`lkqbkq=fp=bumRbppflkKDOMAIN MODELS CAPTURE AN OVERALL CONTEXT.
CONTENT MODELS ZOOM IN TO SPECIFIC STRUCTURE.
@CARRIEHD / @MIKEATHERTON
PREPARING FOR THE CONTENT MODEL350
@CARRIEHD / @MIKEATHERTON
qeb=`lkqbkq=jlabi=abp`R f_bp=qeb=j^glR=`lkqbkq=`lk`bmqp=^ka=qeb=mRlmbRqfbp=lc=b^`e=`lk`bmqK
“type’ of each spacecraft (name, description?)
photo of the spacecraft
a spacecraft (name and description)
the properties of this craft (length,
speed, weight, service year)
THE CONTENT MODEL360
@CARRIEHD / @MIKEATHERTON
^=`lkqbkq=jlabi=`^k=_b=aR^tk=ifhb=^=alj^fk=jlabi=tfqe=mRlmbRqv=cfbiap=^aabaK
bksfRlkjbkq
`R^cq=qvmb mfilq
`Rb^qfsb=tlRh
pm^`b`R^cq
fksbkqlR
FIRST NAME / LAST NAME PHOTO
AFFILIATION YEAR OF BIRTH
BIOGRAPHY
NAME PHOTO
DESCRIPTION LENGTH SPEED
WEIGHT SERVICE YEAR
FIRST NAME / LAST NAME YEAR OF BIRTH
PHOTO BIOGRAPHY
TITLE AUTHOR
DESCRIPTION RELEASE YEAR
NAME PHOTO
DESCRIPTION
NAME DESCRIPTION
MEASURE TWICE, CUT ONCE38
Content planning is done before CMS configuration.
By considering all the parts of the model first, we save time and money later.
Content planning can’t be avoided — either you do it or your developers will.
0
@CARRIEHD / @MIKEATHERTON
CONTENT PLANNING WORKSHEET390
@CARRIEHD / @MIKEATHERTON
abcfkb=qeb=`lkqbkq=qvmbp=clR=`jp=fjmibjbkq^qflk
COMPLETING THE WORKSHEET400
@CARRIEHD / @MIKEATHERTON
`lkqbkq=qvmbp=abp`R f_ba=tfqe=mRlmbRqv=cfbiap
k^jb abp`R fmqflk qfqib=cfbia=i^_bi _lav=cfbia=i^_bi cfbiap=L=qvmbp
Person Info about people associated with IAS
Full name Bio First Name / Text (plain)Middle / Text (plain)Last Name / Text (plain)Suffix / Text (plain)Photo / Image
WRAP UP41
Content needs to be designed.
Auditing and decision making is more meaningful with domain knowledge.
Structuring content frees it from the interface to be useful in multiple contexts.
Planning how the structure will be implemented is essential to success.
0
@CARRIEHD / @MIKEATHERTON
@CARRIEHD / @MIKEATHERTON
a b p f dk = f p = m r q q f kd = clRj =^ka = `lkq bk q = qld b qe bR K
— PAUL RAND
`lkqbkq=fp=qeb=telib=a^jk=mlfkqKWE CONNECT WITH PEOPLE TO CONNECT THEM TO INFORMATION.
@CARRIEHD / @MIKEATHERTON
qefkh=afccbRbkqKUNDERSTANDING HOW DEVELOPERS, WRITERS, AND COMPUTERS THINK WILL MAKE YOU A BETTER DESIGNER.
@CARRIEHD / @MIKEATHERTON
alkÛq=_b=^cR^fa=lc=`ljjfqjbkqKBEING FUTURE-FRIENDLY MEANS DESIGNING FOR LONG-TERM BENEFITS AND BUILDING ON STABLE FOUNDATIONS.
@CARRIEHD / @MIKEATHERTON
pbb=qeb=telib=_l^RaKCREATE GREATER VALUE BY MODELING THE COMPLETE DOMAIN, AND STITCHING YOUR CONTENT INTO THE FABRIC OF THE WIDER WEB.
@CARRIEHD / @MIKEATHERTON
FURTHER READING: QUICK LINKS48
For a Future-Friendly Web — Brad Frost
Thriving in a World of Change — Karen McGrane
Breaking Dev: There is No Mobile Web — Luke Wroblewski
The Battle for the Body Field — Jeff Eaton
How we make Websites — Michael Smethurst
0
@CARRIEHD / @MIKEATHERTON SHOUT OUT TO GERRY MCGOVERN @GERRYMCGOVERN
FURTHER READING: SLOW LINKS490
@CARRIEHD / @MIKEATHERTON SHOUT OUT TO GERRY MCGOVERN @GERRYMCGOVERN
`lkqbkq=bsbRvtebRb=p^R^=t^`eqbRJ_lbqq`ebR
j^k^dfkd=bkqbRmR fpb=`lkqbkq=
^kk=Rl`hibv
`lkqbkq=pqR^qbdv=clR=jl_fib=
h^Rbk=j`dR^kb
alj^fkJaR fsbk=abpfdk=bR f`=bs^kp
alj^fkJaR fsbk=abpfdk=nrf`hiv=fkcln
CONTACT US]`^RR f b ea =]j f h b^qe bR qlk =
tb = `^k =Rrk = qe f p = ^ p = ^ = e^ i c J a^v =lR =c r i i J a^v =tlRhpelm = ^q = vlrR = b s bk qK