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.

1. The Squishy Future
of Content
Dave Olsen, @dmolsen
WVU University Relations - Web
Confab Higher Ed, November 2013

2. @dmolsen
dmolsen.com

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!

6. Pixel Perfect Designs
http://flic.kr/p/8cPU9D

7. CONTENT GOES HERE

8. Linear Workflow
THROW IN
SOME CONTENT
THINK ABOUT
USERS
DESIGN
FRONT-END
BACK-END
courtesy Ben Callahan, Sparkbox
LAUNCH!

9. *facepalm*
http://flic.kr/p/69ZZhR

10. “My God, it’s full of devices...”
http:/
/flic.kr/p/gS7txD

11. It’s Overwhelming!
http://flic.kr/p/6qidN1

12. II. OPPORTUNITY TO REBOOT
http://bit.ly/1gwTc6V

13. futurefriend.ly

15. stand-in slide
FLUID LAYOUT ANIMATION

16. http://flic.kr/p/9ux7kJ
Content Flows Like Water?

17. http://flic.kr/p/8AE4ha
glasses with chunky content

18. http:/
/flic.kr/p/fJ9GEX

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

27. III. STARTING SMALL
http://flic.kr/p/bpVs1E

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

31. Identifying Content Examples
http://flic.kr/p/6DhBCd

32. SELECT TYPES OF CONTENT CHUNKS
I. Media
II. Forms
III. Tables
IV. Maps
V. Carousels

33. stand-in slide
MEDIA ANIMATION

34. stand-in slide
FORM ANIMATION

35. stand-in slide
TABLE EXAMPLE

36. stand-in slide
TABLE EXAMPLE

37. stand-in slide
TABLE EXAMPLE

38. Exterminate the Carousels!
Exterminate the Carousel!

39. bit.ly/ZtqUmV

40. Developing a Component Style Guide
Styleguide
http://flic.kr/p/9VewrY

41. IV. CONTENT CHOREOGRAPHY
http://flic.kr/p/49YSYK

42. “1 Deliverable” Workflow
CONTENT
UX
BACK-END
DESIGN
FRONT-END
courtesy Ben Callahan, Sparkbox

43. Wireframing & Layout

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

46. Content-based Breakpoints
http://bit.ly/12xuLR1

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

53. Leaving Layout Behind
http://flic.kr/p/7V8ZUR

54. Ever Expanding Outlets for Content
http:/
/flic.kr/p/ejCiT2

55. http://bit.ly/15w4AZc

56. Content Shifting
http://flic.kr/p/96Hbsq

57. Dumb Blobs vs. Smart Chunks
http:/
/flic.kr/p/5DdC9v

58. Layout informs content.
Content informs layout.
Both inform architecture.

59. SUMMING UP
http://flic.kr/p/byKgrf

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.

67. http://flic.kr/p/agyEkb

68. building.seesparkbox.com

69. THANKS TO...
Ben Callahan
@bencallahan
Brad Frost
@brad_frost
Eileen Webb Chris Coyier
@webmeadow @chriscoyier
Doug Gapinski
@douggapinski

70. THANKS FOR LISTENING!
QUESTIONS?

71. @dmolsen
dmolsen.com