Designing Future-Friendly Content

WITH

`^RR f b =e^kb=abkkfplk=jfhb =^qebRqlk

mRbs fbt=prjj^Rv=crii Ja^v=L =eîc Ja^v=tlRhpelm

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

THE 21ST CENTURY.tb i `ljb = ql = q e b = c r qrR b


a b p f dk = f p = ^ = m i ^k = clR = ^RR^kd fkd =b i bj bk q p = f k = pr è = ^ =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


a b p f dk = f p = q e b =R bka bR f kd =l c = f k q bk qK

— JARED SPOOL


i ^kdr^db = f p = q e b =j^q bR f ^ i =l c = f k q bk qK

— ABBY COVERT

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


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


b^è=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î

Rbpq^rR^kq

^qqR^`qflk

è^R^`qbR

`Rb^qlR

tlRh

crqrRbJcR fbkaiv=`lkqbkqSTORED, STRUCTURED, AND CONNECTED FOR PEOPLE AND COMPUTERS, BEYOND THE USER INTERFACE.


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.


CONCEPTS & RELATIONSHIPS_R f ad b p =l c = rka bR p q^ka fkd

CONCEPTS ARE GENERALISED TYPES130


b^è=`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


RELATIONSHIP EXAMPLES150


jllk mi^kbq

^rqelR _llh

fkdRbafbkq Rb`fmb

jlsfb _llh

qeb=Rbi^qflkpefm=sîrb=abp`R f_bp=elt=qtl=`lk`bmqp=^Rb=`lkkb`qbaK

orbits

wrote

partOf

adaptationOf

DOMAIN MODELSR b mR b p bk q fkd =R b ^ i f q v

MAPPING THE DOMAIN FROM CONTENT170


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


Environment

Craft type Pilot

Creative workCraft

Inventor

qeb=alj^fk=jlabi=peltp=b^è=`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

INTERMISSION

STRUCTURED CONTENT cRlj = _ il_ p = ql = èrkhp


Ú 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â^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


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


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


a^q^=fk=^=pqRr`qrRba=`lkqbkq=bkqfqv=fp=afpmi^vba=fk=afccbRbkq=t^vp

AUTOMATIC CONTENT NAVIGATION270


pqRr`qrRba=`lkqbkq=îiltp=qeb=`ljmrqbR=ql=`Rb^qb=^ka=rma^qb=fkabubp=^rqlj^qf`îivK

ADVANTAGES OF STRUCTURED CONTENT

tev = èrkhp = _ b^q = _ il_ p

CREATE ONCE, PUBLISH EVERYWHERE290


qeb=p^jb=`lkqbkq=pqRr`qrRbp=j^v=_b=èlRbldR^meba=afccbRbkqiv=^`Rlpp=absf`bpK

FUTURE-FRIENDLY IS ROBOT-READABLE300


`lkqbkq=pqRr`qrRba=clR=`ljmrqbRp=`^k=qR^sbi=^kvtebRbK

Google Images

iMDbRotten Tomatoes

Tribune Media Services

Google Play / Amazon

WikiData

EDITORIAL COLLECTIONS AS CURATION310


Ú`liib`qflkÛ=fp=^=jlabiba=`lk`bmq=tefè=RbcbRbk`bp=`lkqbkq=cRlj=bipbtebRb=fk=qeb=jlabiK

BBC IPLAYER AND BBC FOOD. WWW.BBC.CO.UK

EDITORIAL PAGE AS STRUCTURED CONTENT320


^=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

CONTENT MODELINGcRlj = `lk` b m q = ql = a b p f dk

alj^fk=fp=`lkqbuqI=`lkqbkq=fp=bumRbppflkKDOMAIN MODELS CAPTURE AN OVERALL CONTEXT.

CONTENT MODELS ZOOM IN TO SPECIFIC STRUCTURE.


PREPARING FOR THE CONTENT MODEL350


qeb=`lkqbkq=jlabi=abp`R f_bp=qeb=j^glR=`lkqbkq=`lk`bmqp=^ka=qeb=mRlmbRqfbp=lc=b^è=`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


^=`lkqbkq=jlabi=`^k=_b=aR^tk=ifhb=^=alj^fk=jlabi=tfqe=mRlmbRqv=cfbiap=âabaK

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

CONTENT PLANNINGmR b m^R f kd = clR = q e b =j^è fk b

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


CONTENT PLANNING WORKSHEET390


abcfkb=qeb=`lkqbkq=qvmbp=clR=`jp=fjmibjbkq^qflk

COMPLETING THE WORKSHEET400


`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



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

THE FUTURE IS NOW.^ =dR b ^q = _ f d = _ b^r q f c r i = qljlRRltK

`lkqbkq=fp=qeb=telib=a^jk=mlfkqKWE CONNECT WITH PEOPLE TO CONNECT THEM TO INFORMATION.


qefkh=afccbRbkqKUNDERSTANDING HOW DEVELOPERS, WRITERS, AND COMPUTERS THINK WILL MAKE YOU A BETTER DESIGNER.


alkÛq=_b=^cR^fa=lc=`ljjfqjbkqKBEING FUTURE-FRIENDLY MEANS DESIGNING FOR LONG-TERM BENEFITS AND BUILDING ON STABLE FOUNDATIONS.


pbb=qeb=telib=_l^RaKCREATE GREATER VALUE BY MODELING THE COMPLETE DOMAIN, AND STITCHING YOUR CONTENT INTO THE FABRIC OF THE WIDER WEB.


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

http://alistapart.com/article/for-a-future-friendly-web

http://karenmcgrane.com/2013/05/23/drupalcon-keynote-video-and-talk-notes/

http://www.lukew.com/ff/entry.asp?1393

http://alistapart.com/article/battle-for-the-body-field

http://www.bbc.co.uk/blogs/radiolabs/2009/01/how_we_make_websites.shtml

FURTHER READING: SLOW LINKS490

@CARRIEHD / @MIKEATHERTON SHOUT OUT TO GERRY MCGOVERN @GERRYMCGOVERN

`lkqbkq=bsbRvtebRb=p^R^=t^èqbRJ_lbqqèbR

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

qeb=_bpq=t^v=ql=mRbaf`q=qeb=crqrRb=fp=ql=fksbkq=fqKTHANKS FOR COMING.


Internet

Designing Future-Friendly Content