This talk was given as a keynote for the HEEMAC conference at the University of Southern Florida. 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 web sites. Placeholder content no longer suffices during development. Copy and paste doesn't work in migrating between designs. With the emergence of the small screen as a primary computing device, web site design is more strongly informed by our content than ever before. With these changes we need to rethink how content affects layouts, and how we can best communicate these changes and engage with stakeholders to create future-friendly web sites. Learn why we need to be advocates for content at all phases of a project. Explore the fundamental content types and content rules that will shape how content flows and is viewed by visitors. Learn how content choreography can help keep our stakeholders most important message the focus of your site. Review and rethink our web development workflows to create a new process that is better suited to addressing the constraints of the small screen.

1. The Squishy Future
of Content
Dave Olsen, @dmolsen
WVU University Relations - Web
March 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. 2007 A glowing rectangle changes everything
http://flic.kr/p/69ZZhR

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

7. 2014 How should we deliver our content?
http://flic.kr/p/jK1dxu

8. THESE ARE JUST SOME OF THE SOLUTIONS
standalone
mobile sites
native apps
responsive designs
mobile templates
APIs

9. FOCUSING ON THE WEB FOR THIS TALK FOR THREE REASONS
I. Install Base
II. The Rise of the Mobile-only User
III. How We Share Information

10. INSTALL BASE
“Not every mobile device will have
your app on it but every mobile
device will have a browser.”
- Jason Grigsby, @grigs

11. THE RISE OF THE MOBILE-ONLY USER
34% of current mobile internet users mostly go
1
online using their phone.
50% of teen smartphone owners aged 12-17 and 50%
of young adults aged 18-29 say they use the internet
2
mostly on their mobile phone.
Blacks, Hispanics, low-income Americans, lesseducated Americans, and young adults are more likely
3
to be mobile-only users.
1 - source
2 - source
3 - source

12. WE CAN SEE THIS IN TODAY’S TRAFFIC FOR WVU
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%

13. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS
51%
Percentage of email opened
on mobile in Dec. 2013
http:/
/bit.ly/1iJ6XAH

14. OUR USERS ARE FINDING US ON MOBILE
77%
Mobile searches that take place at
home or work, only 17% on-the-go,
according to Google.
http://bit.ly/1ePylWV

15. HOW DO WE MAKE OUR WEB CONTENT MOBILE-FRIENDLY?
http://flic.kr/p/4JY1Yr

17. stand-in slide
FLUID LAYOUT ANIMATION

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

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

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

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

22. Layout informs content.
Content informs layout.

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

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

25. http://flic.kr/p/9g5Gg8

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

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

28. CONTENT GOES HERE

29. A FUTURE-FRIENDLY TRUTH
Our existing standards,
workflows, & infrastructure
won’t hold up.
http://futurefriend.ly

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

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

32. What do we call this new process?
Refresh? Reboot?

33. Blow up all the things?
http://flic.kr/p/6NVz9K

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

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

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

37. Our New Iterative or Workflow
“1 Deliverable”Spiral Process
CONTENT
UX
BACK-END
DESIGN
FRONT-END
courtesy Ben Callahan, Sparkbox

38. We also need to rethink our
Deliverables.

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

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

41. styletil.es

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

43. EXPLAINING WHY WE NEED TO GET CONTENT EXAMPLES
I. Media
II. Forms
III. Tables
IV. Maps
V. Carousels

44. stand-in slide
MEDIA ANIMATION

45. stand-in slide
FORM ANIMATION

46. stand-in slide
TABLE EXAMPLE

47. stand-in slide
TABLE EXAMPLE

48. stand-in slide
TABLE EXAMPLE

49. Exterminate the Carousels!
Exterminate the Carousel!

50. The possible answer to carousels is
Editorial
Calendars.

51. bit.ly/ZtqUmV

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

53. Iterative or Spiral Process
“1 Deliverable” Workflow
CONTENT
UX
You Are Here
BACK-END
DESIGN
FRONT-END
courtesy Ben Callahan, Sparkbox

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

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

56. Wireframing & Layout

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

58. pattern-lab.info

59. pattern-lab.info
Pattern Lab is a collection of
tools for creating modular
systems, your very own tiny
bootstraps and involve your
entire team & the client every
step of the way.

60. The need to...
Prioritize
Content.

61. SCROLLING... SCROLLING... SCROLLING...

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

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

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

65. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES

66. NEVER REMOVE CONTENT!
Exterminate the Carousel!

67. V. WHERE WE’RE GOING
http://flic.kr/p/8BPQ2q

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

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

70. Dumb Blobs to Smart Chunks
http:/
/flic.kr/p/5DdC9v

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

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

73. PRT API
Update once. Publishes to:
iOS App (desupported),
Mobile Website,
Student Portal,
Transportation Website, &
Twitter

74. Mock screenshot from Google Glass
https://austindizzy.me/prt/

75. the real need for
data.edu

76. summing up...
Layout informs content.
Content informs layout.
Both inform architecture.

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

78. Iterative or Spiral Process
“1 Deliverable” Workflow
CONTENT
UX
BACK-END
DESIGN
FRONT-END
courtesy Ben Callahan, Sparkbox

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

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

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

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

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

84. ...we can find unicorns & rainbows.

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

86. building.seesparkbox.com

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

88. THANKS FOR LISTENING!

89. QUESTIONS?

90. @dmolsen
dmolsen.com