The Squishy Future of Content
Dave Olsen, @dmolsenWVU University Relations - WebJanuary 2014
@dmolsendmolsen.com
’99 Geography
I. Where We AreII. An Opportunity to Reboot
III. Starting SmallIV. Content Choreography
V. Where We’re Going
THE SQUISHY FUTURE OF CONTENT
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
CONTENT GOES HERE
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
Redesign.A process driven by one word...
*insert jean-luc picard facepalm here*
http://flic.kr/p/69ZZhR
http://flic.kr/p/gS7txD
“My God, it’s full of devices...”
www.wvu.edu: 23%mountainlair.wvu.edu: 45%parentsclub.wvu.edu: 33%
braxton.housing.wvu.edu: 32%construction.wvu.edu: 30%
visit.wvu.edu: 30%fashion.wvu.edu: 27%
president.wvu.edu: 25%tuition.wvu.edu: 21%
admissions.wvu.edu: 15%
“MOBILE” IS A BIG PART OF OUR TRAFFIC
51%Percentage of Email Opened
on Mobile in Dec. 2013
http://bit.ly/1iJ6XAH
OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS
THE RISE OF THE MOBILE-ONLY USER
34% of current mobile internet users mostly go online using their phone. (source)
50% of teen smartphone owners aged 12-17 and 50% of young adults aged 18-29 say they use the internet
mostly on their mobile phone. (source)
77% of mobile searches take place at home or work, only 17% on-the-go, according to Google. (source)
Blacks, Hispanics, low-income Americans, less-educated Americans, and young adults are more likely
to be mobile-only users. (source)
FLUID LAYOUT ANIMATIONstand-in slide
Layout informs content. Content informs layout.
Neither is more important than the other.
this is really important...
futurefriend.ly
Our existing standards, workflows, & infrastructure
won’t hold up.
a Future Friendly truth...
Redesign.The process can no longer be driven by this word...
Refresh?Reboot?Blow up all the things?
What to call it?
Process
WaterfallPhotoshop
Lorem Ipsum
http://flic.kr/p/7M8Uf5http://flic.kr/p/a2AZv1
The Death of Lorem Ipsum
We Need to Build Teams
http://flic.kr/p/fhQFu
DEVELOPERSWRITERS
DESIGNERS
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
change management
http://bit.ly/1eeYB09
http://bit.ly/1eeYB09
http://bit.ly/1eeYB09
UTILIZING CHANGE MANAGEMENT
UTILIZING CHANGE MANAGEMENT
I. AwarenessII. Desire
III. KnowledgeIV. Ability
V. Reinforcement
ADKAR is a registered trademark of Prosci Research
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
You Are Here
styletil.es
Identifying Content Examples
http://flic.kr/p/6DhBCd
SELECT TYPES OF CONTENT CHUNKS
I. MediaII. FormsIII. TablesIV. Maps
V. Carousels
MEDIA ANIMATIONstand-in slide
FORM ANIMATIONstand-in slide
TABLE EXAMPLEstand-in slide
TABLE EXAMPLEstand-in slide
TABLE EXAMPLEstand-in slide
Exterminate the Carousel!
Exterminate the Carousels!
Editorial Calendars.
The rise of...
bit.ly/ZtqUmV
Styleguide
Developing a Component Style Guide
http://flic.kr/p/9VewrY
Wireframing & Layout
pattern-lab.info
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
You Are Here
ELEMENTS OF CONTENT CHOREOGRAPHY
I. Defining a LayoutII. Content-based Breakpoints
III. Content LayeringIV. Interdigitation
V. When to Remove Content
Prioritize Content.
The need to...
CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
SCROLLING... SCROLLING... SCROLLING...
CONTENT LAYERING: MINIMIZING INFORMATION
only viewable after selecting an element...
III
{
CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX
also only viewable after selecting an element...
III
INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT
changing order to encourage an action
Desc.
Buy!
Title
Buy!Description
Specs
Related
Title
Specs
Related
Exterminate the Carousel!
NEVER REMOVE CONTENT!
http://flic.kr/p/ejCiT2
Ever Expanding Outlets for Content
Layout informs content. Content informs layout.Both inform architecture.
CONTENT UX
FRONT-END
DESIGNBACK-END
“1 Deliverable” Workflow
courtesy Ben Callahan, Sparkbox
OUR NEW PROCESS
I. Start Small: Chunks & StyleII. Prioritize Your Content
III. Wireframe in the BrowserIV. Content-based Breakpoints
IV. Profit
Real content is critical to the entire process.Be an advocate for it early & often.
Modern web design can’t be done by one person. Find help, be helpful & reboot.
This sh!t is complicated.Don’t get discouraged.
http://flic.kr/p/7jWpEb
Maybe by being Future Friendly...
...and forging future-ready partnerships...
http://flic.kr/p/gidRPX
...we can find unicorns & rainbows.
building.seesparkbox.com
THANKS TO...
Ben Callahan@bencallahan
Brad Frost@brad_frost
Chris Coyier@chriscoyier
Doug Gapinski@douggapinski
Eileen Webb@webmeadow
THANKS FOR LISTENING!QUESTIONS?
@dmolsendmolsen.com