View
108
Download
1
Category
Tags:
Preview:
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.
Citation preview
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
courtesy Ben Callahan, Sparkbox
FRONT-END BACK-ENDDESIGN
THINK ABOUTUSERS
THROW INSOME CONTENT
LAUNCH!
Linear Workflow
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)
FLUID LAYOUT ANIMATIONstand-in slide
Layout informs content. Content informs layout.
Neither is more important than the other.
this is really important...
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?
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
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
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
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: 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/ejCiT2
Ever Expanding Outlets for Content
Layout informs content. Content informs layout.Both inform architecture.
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.
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
Recommended