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

I. WHERE WE ARE

http://flic.kr/p/87gkH5

courtesy Ben Callahan, Sparkbox

FRONT-END BACK-ENDDESIGN

THINK ABOUTUSERS

THROW INSOME CONTENT

LAUNCH!

Linear Workflow

http://flic.kr/p/8cPU9D

Pixel Perfect Previews

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)

What do we do?!

http://flic.kr/p/6qidN1

FLUID LAYOUT ANIMATIONstand-in slide

http://flic.kr/p/9ux7kJ

Content Flows Like Water?

glasses with chunky content

http://flic.kr/p/8AE4ha

http://flic.kr/p/fJ9GEX

http://flic.kr/p/6DxS9D

The Reality: Chunky Water

Layout informs content. Content informs layout.

Neither is more important than the other.

this is really important...

II. AN OPPORTUNITY TO REBOOT

http://bit.ly/1gwTc6V

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?

http://flic.kr/p/8cPU9D

No More Pixel Perfection(

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

III. STARTING SMALL

http://flic.kr/p/bpVs1E

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

Identify a Small Projecthttp://flic.kr/p/5Tbchf

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

IV. CONTENT CHOREOGRAPHY

http://flic.kr/p/49YSYK

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

http://bit.ly/12xuLR1

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/8BPQ2q

V. WHERE WE’RE GOING

Leaving Layout Behind

http://flic.kr/p/7V8ZUR

http://flic.kr/p/ejCiT2

Ever Expanding Outlets for Content

http://bit.ly/15w4AZc

Content Shifting

http://flic.kr/p/96Hbsq

http://flic.kr/p/5DdC9v

Dumb Blobs to Smart Chunks

Layout informs content. Content informs layout.Both inform architecture.

SUMMING UP

http://flic.kr/p/byKgrf

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.

http://flic.kr/p/agyEkb

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