the squishy future of content - penn state edition

82
The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web January 2014

Upload: dave-olsen

Post on 27-Jan-2015

108 views

Category:

Technology


1 download

DESCRIPTION

With the adoption of responsive design, we’re finding that our pixel-perfect content is no longer being placed in pixel-perfect boxes on pixel-perfect websites. Placeholder content no longer suffices during development. Copy-and-paste doesn’t work in migrating between designs. Rather, website design is more strongly informed by our content than ever before. With these changes we need to rethink how content affects our development workflow as well as understand how content and messaging affect layouts. • Learn why you need to be an advocate for content at all phases of a project. • Explore the fundamental content types and content rules that will shape how your content flows and is viewed by visitors. • Learn how content choreography can help you keep your most important message the focus of your site.

TRANSCRIPT

Page 1: The Squishy Future of Content - Penn State Edition

The Squishy Future of Content

Dave Olsen, @dmolsenWVU University Relations - WebJanuary 2014

Page 2: The Squishy Future of Content - Penn State Edition

@dmolsendmolsen.com

’99 Geography

Page 3: The Squishy Future of Content - Penn State Edition

I. Where We AreII. An Opportunity to Reboot

III. Starting SmallIV. Content Choreography

V. Where We’re Going

THE SQUISHY FUTURE OF CONTENT

Page 4: The Squishy Future of Content - Penn State Edition

I. WHERE WE ARE

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

Page 5: The Squishy Future of Content - Penn State Edition

courtesy Ben Callahan, Sparkbox

FRONT-END BACK-ENDDESIGN

THINK ABOUTUSERS

THROW INSOME CONTENT

LAUNCH!

Linear Workflow

Page 6: The Squishy Future of Content - Penn State Edition

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

Pixel Perfect Previews

Page 7: The Squishy Future of Content - Penn State Edition

CONTENT GOES HERE

Page 8: The Squishy Future of Content - Penn State Edition

courtesy Ben Callahan, Sparkbox

FRONT-END BACK-ENDDESIGN

THINK ABOUTUSERS

THROW INSOME CONTENT

LAUNCH!

Linear Workflow

Page 9: The Squishy Future of Content - Penn State Edition

Redesign.A process driven by one word...

Page 10: The Squishy Future of Content - Penn State Edition

*insert jean-luc picard facepalm here*

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

Page 11: The Squishy Future of Content - Penn State Edition

http://flic.kr/p/gS7txD

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

Page 12: The Squishy Future of Content - Penn State Edition

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

Page 13: The Squishy Future of Content - Penn State Edition

51%Percentage of Email Opened

on Mobile in Dec. 2013

http://bit.ly/1iJ6XAH

OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS

Page 14: The Squishy Future of Content - Penn State Edition

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)

Page 15: The Squishy Future of Content - Penn State Edition

What do we do?!

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

Page 16: The Squishy Future of Content - Penn State Edition
Page 17: The Squishy Future of Content - Penn State Edition

FLUID LAYOUT ANIMATIONstand-in slide

Page 18: The Squishy Future of Content - Penn State Edition

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

Content Flows Like Water?

Page 19: The Squishy Future of Content - Penn State Edition

glasses with chunky content

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

Page 20: The Squishy Future of Content - Penn State Edition

http://flic.kr/p/fJ9GEX

Page 21: The Squishy Future of Content - Penn State Edition

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

The Reality: Chunky Water

Page 22: The Squishy Future of Content - Penn State Edition

Layout informs content. Content informs layout.

Page 23: The Squishy Future of Content - Penn State Edition

Neither is more important than the other.

this is really important...

Page 24: The Squishy Future of Content - Penn State Edition

II. AN OPPORTUNITY TO REBOOT

http://bit.ly/1gwTc6V

Page 25: The Squishy Future of Content - Penn State Edition

futurefriend.ly

Page 26: The Squishy Future of Content - Penn State Edition

Our existing standards, workflows, & infrastructure

won’t hold up.

a Future Friendly truth...

Page 27: The Squishy Future of Content - Penn State Edition

Redesign.The process can no longer be driven by this word...

Page 28: The Squishy Future of Content - Penn State Edition

Refresh?Reboot?Blow up all the things?

What to call it?

Page 29: The Squishy Future of Content - Penn State Edition

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

No More Pixel Perfection(

Page 30: The Squishy Future of Content - Penn State Edition

Process

WaterfallPhotoshop

Lorem Ipsum

http://flic.kr/p/7M8Uf5http://flic.kr/p/a2AZv1

The Death of Lorem Ipsum

Page 31: The Squishy Future of Content - Penn State Edition

We Need to Build Teams

http://flic.kr/p/fhQFu

DEVELOPERSWRITERS

DESIGNERS

Page 32: The Squishy Future of Content - Penn State Edition

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

Page 33: The Squishy Future of Content - Penn State Edition

III. STARTING SMALL

http://flic.kr/p/bpVs1E

Page 34: The Squishy Future of Content - Penn State Edition

change management

http://bit.ly/1eeYB09

http://bit.ly/1eeYB09

http://bit.ly/1eeYB09

UTILIZING CHANGE MANAGEMENT

Page 35: The Squishy Future of Content - Penn State Edition

UTILIZING CHANGE MANAGEMENT

I. AwarenessII. Desire

III. KnowledgeIV. Ability

V. Reinforcement

ADKAR is a registered trademark of Prosci Research

Page 36: The Squishy Future of Content - Penn State Edition

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

Page 37: The Squishy Future of Content - Penn State Edition

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

You Are Here

Page 38: The Squishy Future of Content - Penn State Edition

styletil.es

Page 39: The Squishy Future of Content - Penn State Edition

Identifying Content Examples

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

Page 40: The Squishy Future of Content - Penn State Edition

SELECT TYPES OF CONTENT CHUNKS

I. MediaII. FormsIII. TablesIV. Maps

V. Carousels

Page 41: The Squishy Future of Content - Penn State Edition

MEDIA ANIMATIONstand-in slide

Page 42: The Squishy Future of Content - Penn State Edition

FORM ANIMATIONstand-in slide

Page 43: The Squishy Future of Content - Penn State Edition

TABLE EXAMPLEstand-in slide

Page 44: The Squishy Future of Content - Penn State Edition

TABLE EXAMPLEstand-in slide

Page 45: The Squishy Future of Content - Penn State Edition

TABLE EXAMPLEstand-in slide

Page 46: The Squishy Future of Content - Penn State Edition

Exterminate the Carousel!

Exterminate the Carousels!

Page 47: The Squishy Future of Content - Penn State Edition

Editorial Calendars.

The rise of...

Page 48: The Squishy Future of Content - Penn State Edition

bit.ly/ZtqUmV

Page 49: The Squishy Future of Content - Penn State Edition

Styleguide

Developing a Component Style Guide

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

Page 50: The Squishy Future of Content - Penn State Edition

Wireframing & Layout

Page 51: The Squishy Future of Content - Penn State Edition

pattern-lab.info

Page 52: The Squishy Future of Content - Penn State Edition

IV. CONTENT CHOREOGRAPHY

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

Page 53: The Squishy Future of Content - Penn State Edition

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

You Are Here

Page 54: The Squishy Future of Content - Penn State Edition

ELEMENTS OF CONTENT CHOREOGRAPHY

I. Defining a LayoutII. Content-based Breakpoints

III. Content LayeringIV. Interdigitation

V. When to Remove Content

Page 55: The Squishy Future of Content - Penn State Edition

Prioritize Content.

The need to...

Page 56: The Squishy Future of Content - Penn State Edition

Content-based Breakpoints

http://bit.ly/12xuLR1

Page 57: The Squishy Future of Content - Penn State Edition

CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES

Page 58: The Squishy Future of Content - Penn State Edition

SCROLLING... SCROLLING... SCROLLING...

Page 59: The Squishy Future of Content - Penn State Edition

CONTENT LAYERING: MINIMIZING INFORMATION

only viewable after selecting an element...

III

{

Page 60: The Squishy Future of Content - Penn State Edition

CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX

also only viewable after selecting an element...

III

Page 61: The Squishy Future of Content - Penn State Edition

INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT

changing order to encourage an action

Desc.

Buy!

Title

Buy!Description

Specs

Related

Title

Specs

Related

Page 62: The Squishy Future of Content - Penn State Edition

Exterminate the Carousel!

NEVER REMOVE CONTENT!

Page 63: The Squishy Future of Content - Penn State Edition

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

V. WHERE WE’RE GOING

Page 64: The Squishy Future of Content - Penn State Edition

Leaving Layout Behind

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

Page 65: The Squishy Future of Content - Penn State Edition

http://flic.kr/p/ejCiT2

Ever Expanding Outlets for Content

Page 66: The Squishy Future of Content - Penn State Edition

http://bit.ly/15w4AZc

Page 67: The Squishy Future of Content - Penn State Edition

Content Shifting

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

Page 68: The Squishy Future of Content - Penn State Edition

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

Dumb Blobs to Smart Chunks

Page 69: The Squishy Future of Content - Penn State Edition

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

Page 70: The Squishy Future of Content - Penn State Edition

SUMMING UP

http://flic.kr/p/byKgrf

Page 71: The Squishy Future of Content - Penn State Edition

CONTENT UX

FRONT-END

DESIGNBACK-END

“1 Deliverable” Workflow

courtesy Ben Callahan, Sparkbox

Page 72: The Squishy Future of Content - Penn State Edition

OUR NEW PROCESS

I. Start Small: Chunks & StyleII. Prioritize Your Content

III. Wireframe in the BrowserIV. Content-based Breakpoints

IV. Profit

Page 73: The Squishy Future of Content - Penn State Edition

Real content is critical to the entire process.Be an advocate for it early & often.

Page 74: The Squishy Future of Content - Penn State Edition

Modern web design can’t be done by one person. Find help, be helpful & reboot.

This sh!t is complicated.Don’t get discouraged.

Page 75: The Squishy Future of Content - Penn State Edition

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

Maybe by being Future Friendly...

Page 76: The Squishy Future of Content - Penn State Edition

...and forging future-ready partnerships...

http://flic.kr/p/gidRPX

Page 77: The Squishy Future of Content - Penn State Edition

...we can find unicorns & rainbows.

Page 78: The Squishy Future of Content - Penn State Edition

http://flic.kr/p/agyEkb

Page 79: The Squishy Future of Content - Penn State Edition

building.seesparkbox.com

Page 80: The Squishy Future of Content - Penn State Edition

THANKS TO...

Ben Callahan@bencallahan

Brad Frost@brad_frost

Chris Coyier@chriscoyier

Doug Gapinski@douggapinski

Eileen Webb@webmeadow

Page 81: The Squishy Future of Content - Penn State Edition

THANKS FOR LISTENING!QUESTIONS?

Page 82: The Squishy Future of Content - Penn State Edition

@dmolsendmolsen.com