This document summarizes Dave Olsen's presentation on the "Squishy Future of Content". It discusses how the rise of mobile users is impacting content delivery and design workflows. It advocates starting with small content chunks and a responsive design. Key points include prioritizing content, wireframing in the browser, using content-based breakpoints, and emphasizing collaboration between writers, developers and designers. The goal is to establish a flexible and "future friendly" process to produce content that works across all devices.

1. The Squishy Future
of Content
Dave Olsen, @dmolsen
WVU University Relations - Web
January 2014

2. @dmolsen
dmolsen.com

3. THE SQUISHY FUTURE OF CONTENT
I. Where We Are
II. An Opportunity to Reboot
III. Starting Small
IV. Content Choreography
V. Summing Up

4. I. WHERE WE ARE
http://flic.kr/p/87gkH5

5. *insert jean-luc picard facepalm here*
http://flic.kr/p/69ZZhR

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

7. 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)
Blacks, Hispanics, low-income Americans, lesseducated Americans, and young adults are more likely
to be mobile-only users. (source)
77% of mobile searches take place at home or work,
only 17% on-the-go, according to Google. (source)

8. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS
51%
Percentage of Email Opened
on Mobile in Dec. 2013
http:/
/bit.ly/1iJ6XAH

9. “MOBILE” IS A BIG PART OF OUR TRAFFIC
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%

11. This slide shows how the Boston Globe uses
responsive design.
link to animation

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

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

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

15. The Reality: Chunky Water
http:/
/flic.kr/p/6DxS9D

16. Layout informs content.
Content informs layout.

17. this is really important...
Neither is more important
than the other.

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

19. A process driven by one word...
Redesign.

20. Pixel Perfect Previews
http://flic.kr/p/8cPU9D

21. CONTENT GOES HERE

22. a Future Friendly truth...
Our existing standards,
workflows, & infrastructure
won’t hold up.

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

24. The process can no longer be
driven by this word...
Redesign.

25. What to call it?
Refresh?
Reboot?
Blow up all the
things?

26. (
No More Pixel Perfection
http://flic.kr/p/8cPU9D

27. Process
Waterfall
Photoshop
Lorem Ipsum
The Death of Lorem Ipsum
http:/
/flic.kr/p/a2AZv1
http://flic.kr/p/7M8Uf5

28. We Need to Build Teams
WRITERS
DEVELOPERS
DESIGNERS
http://flic.kr/p/fhQFu

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

30. “1 Deliverable” Workflow
e
Her
re
ou A
Y
CONTENT
UX
BACK-END
DESIGN
FRONT-END
courtesy Ben Callahan, Sparkbox

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

32. styletil.es

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

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

35. This slide shows how a media element like an
image might react in a responsive design.
link to animation
Think about how info-graphics or the focus of an image might change as they’re resized.

36. This slide shows how a form might react
in a responsive design.
link to animation
Think about how the form labels shift as they’re resized. Also the length of a form.

37. This slide shows how a table might react
in a responsive design.
link to animation
Think about how the columns shift to rows on smaller screens. Just one option.

38. This slide shows how a table might react
in a responsive design.
link to animation
Think about how less important columns are dropped on smaller screens.

39. This slide shows how a map might react
in a responsive design.
link to animation
This isn’t the best example. Should be thinking about touch, width, focus and download size.

40. Exterminate the Carousels!
Exterminate the Carousel!

41. The rise of...
Editorial
Calendars.

42. “1 Deliverable” Workflow
CONTENT
UX
BACK-END
re
uA
Yo
e
Her
DESIGN
FRONT-END
courtesy Ben Callahan, Sparkbox

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

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

45. “1 Deliverable” Workflow
CONTENT
UX
You Are Here
BACK-END
DESIGN
FRONT-END
courtesy Ben Callahan, Sparkbox

46. Content Influencing Layout
http:/
/flic.kr/p/6DxS9D

47. ELEMENTS OF CONTENT CHOREOGRAPHY
I. Defining a Layout
II. Content Layering
III. Interdigitation
IV. Content-based Breakpoints
V. When to Remove Content

48. Wireframing & Layout

49. The need to...
Prioritize
Content.

50. SCROLLING... SCROLLING... SCROLLING...

51. CONTENT LAYERING: MINIMIZING INFORMATION
III
{
only viewable after selecting an element...

52. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX
III
also only viewable after selecting an element...

53. INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT
Title
Desc.
Buy!
Title
Description
Buy!
Specs
Related
Specs
changing order to encourage an action
Related

54. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES

55. NEVER REMOVE CONTENT!
Exterminate the Carousel!

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

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

58. OUR NEW PROCESS
I. Start Small: Chunks & Style
II. Prioritize Your Content
III. Wireframe in the Browser
IV. Content-based Breakpoints
V. Profit

59. Real content is critical to
the entire process.
Be an advocate for it early & often.

60. This sh!t is complicated.
Don’t get discouraged.
Modern web design can’t be done by one
person. Find help, be helpful & reboot.

61. Maybe by being Future Friendly...
http://flic.kr/p/7jWpEb

62. ...and forging future-ready partnerships...
http://flic.kr/p/gidRPX

63. ...we can find unicorns & rainbows.

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

65. building.seesparkbox.com

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

67. THANKS FOR LISTENING!
QUESTIONS?

68. @dmolsen
dmolsen.com