The Squishy Future of Content
Upcoming SlideShare
Loading in...5
×
 

The Squishy Future of Content

on

  • 8,185 views

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

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.

Statistics

Views

Total Views
8,185
Views on SlideShare
6,291
Embed Views
1,894

Actions

Likes
40
Downloads
112
Comments
0

16 Embeds 1,894

http://dmolsen.com 884
http://brightercollective.com 481
http://www.dmolsen.com 253
https://twitter.com 117
http://www.brightercollective.com 70
http://blogs.helsinki.fi 54
http://beta.brightercollective.com 12
http://eventifier.co 5
http://localhost 5
http://www.google.com 3
http://www.linkedin.com 3
https://www.linkedin.com 2
http://translate.googleusercontent.com 2
http://eventifier.com 1
http://blaze.apphb.com 1
http://www.wearebrighter.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

The Squishy Future of Content The Squishy Future of Content Presentation Transcript

  • The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web Confab Higher Ed, November 2013
  • @dmolsen dmolsen.com
  • THE SQUISHY FUTURE OF CONTENT I. Where We Are II. Opportunity to Reboot III. Starting Small IV. Content Choreography V. Where We’re Going
  • I. WHERE WE ARE http://flic.kr/p/87gkH5
  • Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  • Pixel Perfect Designs http://flic.kr/p/8cPU9D
  • CONTENT GOES HERE
  • Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  • *facepalm* http://flic.kr/p/69ZZhR
  • “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
  • It’s Overwhelming! http://flic.kr/p/6qidN1
  • II. OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
  • futurefriend.ly
  • stand-in slide FLUID LAYOUT ANIMATION
  • http://flic.kr/p/9ux7kJ Content Flows Like Water?
  • http://flic.kr/p/8AE4ha glasses with chunky content
  • http:/ /flic.kr/p/fJ9GEX
  • The Reality: Chunky Water http:/ /flic.kr/p/6DxS9D
  • Layout informs content. Content informs layout.
  • this is really important... Neither is more important than the other.
  • a Future Friendly truth... Our existing standards, workflows, & infrastructure won’t hold up.
  • “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • ( No More Pixel Perfection http://flic.kr/p/8cPU9D
  • Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /flic.kr/p/a2AZv1 http://flic.kr/p/7M8Uf5
  • We Need to Build Teams WRITERS DEVELOPERS DESIGNERS http://flic.kr/p/fhQFu
  • III. STARTING SMALL http://flic.kr/p/bpVs1E
  • Identify a Small Project http://flic.kr/p/5Tbchf
  • “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • styletil.es
  • Identifying Content Examples http://flic.kr/p/6DhBCd
  • SELECT TYPES OF CONTENT CHUNKS I. Media II. Forms III. Tables IV. Maps V. Carousels
  • stand-in slide MEDIA ANIMATION
  • stand-in slide FORM ANIMATION
  • stand-in slide TABLE EXAMPLE
  • stand-in slide TABLE EXAMPLE
  • stand-in slide TABLE EXAMPLE
  • Exterminate the Carousels! Exterminate the Carousel!
  • bit.ly/ZtqUmV
  • Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
  • IV. CONTENT CHOREOGRAPHY http://flic.kr/p/49YSYK
  • “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • Wireframing & Layout
  • ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content-based Breakpoints III. Content Layering IV. Interdigitation V. When to Remove Content
  • FINDING MEANING IN ORDER I. Sequential Order II. Visual Hierarchy III. Associative Connections IV. Usage Patterns from “Responsive Layouts Beyond the Sidebar” by Jen Simmons http:/ /responsivelayouts.jensimmons.com
  • Content-based Breakpoints http://bit.ly/12xuLR1
  • CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
  • CONTENT LAYERING: MINIMIZING INFORMATION III { only viewable after selecting an element...
  • CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX III also only viewable after selecting an element...
  • INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT Title Desc. Buy! Title Description Buy! Specs Related Specs changing order to encourage an action Related
  • NEVER REMOVE CONTENT! Exterminate the Carousel!
  • V. WHERE WE’RE GOING http://flic.kr/p/8BPQ2q
  • Leaving Layout Behind http://flic.kr/p/7V8ZUR
  • Ever Expanding Outlets for Content http:/ /flic.kr/p/ejCiT2
  • http://bit.ly/15w4AZc
  • Content Shifting http://flic.kr/p/96Hbsq
  • Dumb Blobs vs. Smart Chunks http:/ /flic.kr/p/5DdC9v
  • Layout informs content. Content informs layout. Both inform architecture.
  • SUMMING UP http://flic.kr/p/byKgrf
  • “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • OUR NEW PROCESS I. Start Small: Chunks & Style II. Prioritize Your Content III. Wireframe in the Browser IV. Content-based Breakpoints IV. Profit
  • Real content is critical to the entire process. Be an advocate for it early & often.
  • This sh!t is complicated. Don’t get discouraged. Modern web design can’t be done by one person. Find help, be helpful & reboot.
  • Maybe By Being Future Friendly... http://flic.kr/p/7jWpEb
  • ...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 Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
  • THANKS FOR LISTENING! QUESTIONS?
  • @dmolsen dmolsen.com