The Squishy Future of Content
42 likes29,464 views
The document discusses the challenges of creating content for the modern web where there are many devices and form factors. It advocates starting small by focusing on individual content chunks and prioritizing content over pixel-perfect design. Developing a content style guide and using content-based breakpoints that consider things like line length are also recommended. The goal is to have a process where content and design inform each other and to build teams with different skills like writing and development to better create content for the fluid web.
The Squishy Future of Content
- 1. The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web Confab Higher Ed, November 2013
- 3. THE SQUISHY FUTURE OF CONTENT I. Where We Are II. Opportunity to Reboot III. Starting Small IV. Content Choreography V. Where We’re Going
- 4. I. WHERE WE ARE http://flic.kr/p/87gkH5
- 5. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
- 8. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
- 10. “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
- 12. II. OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
- 13. futurefriend.ly
- 15. stand-in slide FLUID LAYOUT ANIMATION
- 19. The Reality: Chunky Water http:/ /flic.kr/p/6DxS9D
- 20. Layout informs content. Content informs layout.
- 21. this is really important... Neither is more important than the other.
- 22. a Future Friendly truth... Our existing standards, workflows, & infrastructure won’t hold up.
- 23. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
- 24. ( No More Pixel Perfection http://flic.kr/p/8cPU9D
- 25. Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /flic.kr/p/a2AZv1 http://flic.kr/p/7M8Uf5
- 26. We Need to Build Teams WRITERS DEVELOPERS DESIGNERS http://flic.kr/p/fhQFu
- 28. Identify a Small Project http://flic.kr/p/5Tbchf
- 29. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
- 30. styletil.es
- 32. SELECT TYPES OF CONTENT CHUNKS I. Media II. Forms III. Tables IV. Maps V. Carousels
- 38. Exterminate the Carousels! Exterminate the Carousel!
- 39. bit.ly/ZtqUmV
- 40. Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
- 42. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
- 44. ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content-based Breakpoints III. Content Layering IV. Interdigitation V. When to Remove Content
- 45. 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
- 47. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
- 48. CONTENT LAYERING: MINIMIZING INFORMATION III { only viewable after selecting an element...
- 49. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX III also only viewable after selecting an element...
- 50. INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT Title Desc. Buy! Title Description Buy! Specs Related Specs changing order to encourage an action Related
- 51. NEVER REMOVE CONTENT! Exterminate the Carousel!
- 52. V. WHERE WE’RE GOING http://flic.kr/p/8BPQ2q
- 54. Ever Expanding Outlets for Content http:/ /flic.kr/p/ejCiT2
- 57. Dumb Blobs vs. Smart Chunks http:/ /flic.kr/p/5DdC9v
- 58. Layout informs content. Content informs layout. Both inform architecture.
- 60. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
- 61. OUR NEW PROCESS I. Start Small: Chunks & Style II. Prioritize Your Content III. Wireframe in the Browser IV. Content-based Breakpoints IV. Profit
- 62. Real content is critical to the entire process. Be an advocate for it early & often.
- 63. This sh!t is complicated. Don’t get discouraged. Modern web design can’t be done by one person. Find help, be helpful & reboot.
- 64. Maybe By Being Future Friendly... http://flic.kr/p/7jWpEb
- 65. ...and Forging Future-Ready Partnerships... http://flic.kr/p/gidRPX
- 66. ...we can find unicorns & rainbows.
- 69. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski