Embed Size (px)
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 - 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
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
http://flic.kr/p/gS7txD
“My God, it’s full of devices...”
futurefriend.ly
FLUID LAYOUT ANIMATIONstand-in slide
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
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
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
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: 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/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
