The Squishy Future of Content

Dave Olsen, @dmolsenWVU University Relations - WebConfab Higher Ed, November 2013

@dmolsendmolsen.com

I. Where We AreII. 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 Designs

CONTENT GOES HERE

courtesy Ben Callahan, Sparkbox

FRONT-END BACK-ENDDESIGN

THINK ABOUTUSERS

THROW INSOME CONTENT

LAUNCH!

Linear Workflow

*facepalm*

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

http://flic.kr/p/gS7txD

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

It’s Overwhelming!

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

II. OPPORTUNITY TO REBOOT

http://bit.ly/1gwTc6V

futurefriend.ly

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

Our existing standards, workflows, & infrastructure

won’t hold up.

a Future Friendly truth...

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

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

III. STARTING SMALL

http://flic.kr/p/bpVs1E

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

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

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!

bit.ly/ZtqUmV

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

Wireframing & Layout

ELEMENTS OF CONTENT CHOREOGRAPHY

I. Defining a LayoutII. Content-based Breakpoints

III. Content LayeringIV. Interdigitation

V. When to Remove Content

FINDING MEANING IN ORDER

I. Sequential OrderII. Visual Hierarchy

III. Associative ConnectionsIV. Usage Patterns

from “Responsive Layouts Beyond the Sidebar” by Jen Simmonshttp://responsivelayouts.jensimmons.com

Content-based Breakpoints

http://bit.ly/12xuLR1

CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES

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