The Squishy Future of Content

Dave Olsen, @dmolsenWVU University Relations - WebJanuary 2014

@dmolsendmolsen.com

I. Where We AreII. An Opportunity to Reboot

III. Starting SmallIV. Content Choreography

V. Summing Up

THE SQUISHY FUTURE OF CONTENT

I. WHERE WE ARE

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

*insert jean-luc picard facepalm here*

http://flic.kr/p/69ZZhR

http://flic.kr/p/gS7txD

“My God, it’s full of devices...”

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)

51%Percentage of Email Opened

on Mobile in Dec. 2013

http://bit.ly/1iJ6XAH

OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS

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

This slide shows how the Boston Globe uses responsive design.

link to animation

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...

courtesy Ben Callahan, Sparkbox

FRONT-END BACK-ENDDESIGN

THINK ABOUTUSERS

THROW INSOME CONTENT

LAUNCH!

Linear Workflow

Redesign.A process driven by one word...

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

Pixel Perfect Previews

CONTENT GOES HERE

Our existing standards, workflows, & infrastructure

won’t hold up.

a Future Friendly truth...

II. AN OPPORTUNITY TO REBOOT

http://bit.ly/1gwTc6V

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

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

You Are Here

III. STARTING SMALL

http://flic.kr/p/bpVs1E

styletil.es

Identifying Content Examples

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

SELECT TYPES OF CONTENT CHUNKS

I. MediaII. FormsIII. TablesIV. Maps

V. Carousels

This slide shows how a media element like an image might react in a responsive design.

link to animation

Think about how info-graphics or the focus of an image might change as they’re resized.

This slide shows how a form might react in a responsive design.

link to animation

Think about how the form labels shift as they’re resized. Also the length of a form.

This slide shows how a table might react in a responsive design.

link to animation

Think about how the columns shift to rows on smaller screens. Just one option.

This slide shows how a table might react in a responsive design.

link to animation

Think about how less important columns are dropped on smaller screens.

This slide shows how a map might react in a responsive design.

link to animation

This isn’t the best example. Should be thinking about touch, width, focus and download size.

Exterminate the Carousel!

Exterminate the Carousels!

Editorial Calendars.

The rise of...

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

You Are Here

Styleguide

Developing a Component Style Guide

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

IV. CONTENT CHOREOGRAPHY

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

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

You Are Here

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

Content Influencing Layout

ELEMENTS OF CONTENT CHOREOGRAPHY

I. Defining a LayoutII. Content Layering

III. InterdigitationIV. Content-based Breakpoints V. When to Remove Content

Wireframing & Layout

Prioritize Content.

The need to...

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

CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES

Exterminate the Carousel!

NEVER REMOVE CONTENT!

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

V. 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