the squishy future of content - key communicators edition
DESCRIPTION
TRANSCRIPT
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
*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
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...
CONTENT GOES HERE
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
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
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
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 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!
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.
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