The Squishy Future of Content - HEEMAC Edition


Published on

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.

The Squishy Future of Content - HEEMAC Edition

  1. 1. The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web March 2014
  2. 2. @dmolsen
  3. 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. 4. I. WHERE WE ARE
  5. 5. 2007 A glowing rectangle changes everything
  6. 6. 2013 “My God, it’s full of devices...” http:/ /
  7. 7. 2014 How should we deliver our content?
  8. 8. THESE ARE JUST SOME OF THE SOLUTIONS standalone mobile sites native apps responsive designs mobile templates APIs
  9. 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. 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. 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. 12. WE CAN SEE THIS IN TODAY’S TRAFFIC FOR WVU 23% 45% 33% 32% 30% 30% 27% 25% 21% 15%
  13. 13. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS 51% Percentage of email opened on mobile in Dec. 2013 http:/ /
  14. 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.
  16. 16. stand-in slide FLUID LAYOUT ANIMATION
  17. 17. Content Flows Like Water?
  18. 18. glasses with chunky content
  19. 19. http:/ /
  20. 20. The Reality: Chunky Water http:/ /
  21. 21. Layout informs content. Content informs layout.
  22. 22. this is really important... Neither is more important than the other.
  23. 23. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  24. 24.
  25. 25. A process driven by one word... Redesign.
  26. 26. Pixel Perfect Previews
  28. 28. A FUTURE-FRIENDLY TRUTH Our existing standards, workflows, & infrastructure won’t hold up.
  30. 30. The process can no longer be driven by this word... Redesign.
  31. 31. What do we call this new process? Refresh? Reboot?
  32. 32. Blow up all the things?
  33. 33. ( No More Pixel Perfection
  34. 34. Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /
  35. 35. We Need to Build Teams WRITERS DEVELOPERS DESIGNERS
  36. 36. Our New Iterative or Workflow “1 Deliverable”Spiral Process CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  37. 37. We also need to rethink our Deliverables.
  39. 39. Iterative or Spiral Process “1 Deliverable” Workflow e Her re ou A Y CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  40. 40.
  41. 41. Identifying Content Examples
  42. 42. EXPLAINING WHY WE NEED TO GET CONTENT EXAMPLES I. Media II. Forms III. Tables IV. Maps V. Carousels
  43. 43. stand-in slide MEDIA ANIMATION
  44. 44. stand-in slide FORM ANIMATION
  45. 45. stand-in slide TABLE EXAMPLE
  46. 46. stand-in slide TABLE EXAMPLE
  47. 47. stand-in slide TABLE EXAMPLE
  48. 48. Exterminate the Carousels! Exterminate the Carousel!
  49. 49. The possible answer to carousels is Editorial Calendars.
  50. 50.
  52. 52. Iterative or Spiral Process “1 Deliverable” Workflow CONTENT UX You Are Here BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  53. 53. Content Influencing Layout http:/ /
  54. 54. ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content Layering III. Interdigitation IV. Content-based Breakpoints V. When to Remove Content
  55. 55. Wireframing & Layout
  56. 56. Developing a Component Style Guide Styleguide
  57. 57.
  58. 58. 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.
  59. 59. The need to... Prioritize Content.
  61. 61. CONTENT LAYERING: MINIMIZING INFORMATION III { only viewable after selecting an element...
  62. 62. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX III also only viewable after selecting an element...
  63. 63. INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT Title Desc. Buy! Title Description Buy! Specs Related Specs changing order to encourage an action Related
  65. 65. NEVER REMOVE CONTENT! Exterminate the Carousel!
  66. 66. V. WHERE WE’RE GOING
  67. 67. Leaving Layout Behind
  68. 68. Content Shifting
  69. 69. Dumb Blobs to Smart Chunks http:/ /
  70. 70.
  71. 71. Ever Expanding Outlets for Content http:/ /
  72. 72. PRT API Update once. Publishes to: iOS App (desupported), Mobile Website, Student Portal, Transportation Website, & Twitter
  73. 73. Mock screenshot from Google Glass
  74. 74. the real need for
  75. 75. summing up... Layout informs content. Content informs layout. Both inform architecture.
  76. 76. SUMMING UP
  77. 77. Iterative or Spiral Process “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  78. 78. OUR NEW PROCESS & DELIVERABLES I. Start Small: Chunks & Style II. Prioritize Your Content III. Wireframe in the Browser IV. Content-based Breakpoints V. Profit
  79. 79. Real content is critical to the entire process. Be an advocate for it early & often.
  80. 80. This sh!t is complicated. Don’t get discouraged. Modern web design can’t be done by one person. Find help, be helpful & reboot.
  81. 81. Maybe by being Future Friendly...
  82. 82. ...and forging future-ready partnerships...
  83. 83. ...we can find unicorns & rainbows.
  84. 84.
  85. 85.
  86. 86. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
  88. 88. QUESTIONS?
  89. 89. @dmolsen