The Squishy Future of Content - HEEMAC Edition

1,567 views

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 dmolsen.com
  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 http://flic.kr/p/87gkH5
  5. 5. 2007 A glowing rectangle changes everything http://flic.kr/p/69ZZhR
  6. 6. 2013 “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
  7. 7. 2014 How should we deliver our content? http://flic.kr/p/jK1dxu
  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 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. 13. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS 51% Percentage of email opened on mobile in Dec. 2013 http:/ /bit.ly/1iJ6XAH
  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. http://bit.ly/1ePylWV
  15. 15. HOW DO WE MAKE OUR WEB CONTENT MOBILE-FRIENDLY? http://flic.kr/p/4JY1Yr
  16. 16. stand-in slide FLUID LAYOUT ANIMATION
  17. 17. http://flic.kr/p/9ux7kJ Content Flows Like Water?
  18. 18. http://flic.kr/p/8AE4ha glasses with chunky content
  19. 19. http:/ /flic.kr/p/fJ9GEX
  20. 20. The Reality: Chunky Water http:/ /flic.kr/p/6DxS9D
  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. http://flic.kr/p/9g5Gg8
  25. 25. A process driven by one word... Redesign.
  26. 26. Pixel Perfect Previews http://flic.kr/p/8cPU9D
  27. 27. CONTENT GOES HERE
  28. 28. A FUTURE-FRIENDLY TRUTH Our existing standards, workflows, & infrastructure won’t hold up. http://futurefriend.ly
  29. 29. II. AN OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
  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? http://flic.kr/p/6NVz9K
  33. 33. ( No More Pixel Perfection http://flic.kr/p/8cPU9D
  34. 34. Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /flic.kr/p/a2AZv1 http://flic.kr/p/7M8Uf5
  35. 35. We Need to Build Teams WRITERS DEVELOPERS DESIGNERS http://flic.kr/p/fhQFu
  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.
  38. 38. III. STARTING SMALL http://flic.kr/p/bpVs1E
  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. styletil.es
  41. 41. Identifying Content Examples http://flic.kr/p/6DhBCd
  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. bit.ly/ZtqUmV
  51. 51. IV. CONTENT CHOREOGRAPHY http://flic.kr/p/49YSYK
  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:/ /flic.kr/p/6DxS9D
  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 http://flic.kr/p/9VewrY
  57. 57. pattern-lab.info
  58. 58. 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.
  59. 59. The need to... Prioritize Content.
  60. 60. SCROLLING... SCROLLING... SCROLLING...
  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
  64. 64. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
  65. 65. NEVER REMOVE CONTENT! Exterminate the Carousel!
  66. 66. V. WHERE WE’RE GOING http://flic.kr/p/8BPQ2q
  67. 67. Leaving Layout Behind http://flic.kr/p/7V8ZUR
  68. 68. Content Shifting http://flic.kr/p/96Hbsq
  69. 69. Dumb Blobs to Smart Chunks http:/ /flic.kr/p/5DdC9v
  70. 70. http://bit.ly/15w4AZc
  71. 71. Ever Expanding Outlets for Content http:/ /flic.kr/p/ejCiT2
  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 https://austindizzy.me/prt/
  74. 74. the real need for data.edu
  75. 75. summing up... Layout informs content. Content informs layout. Both inform architecture.
  76. 76. SUMMING UP http://flic.kr/p/byKgrf
  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... http://flic.kr/p/7jWpEb
  82. 82. ...and forging future-ready partnerships... http://flic.kr/p/gidRPX
  83. 83. ...we can find unicorns & rainbows.
  84. 84. http://flic.kr/p/agyEkb
  85. 85. building.seesparkbox.com
  86. 86. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
  87. 87. THANKS FOR LISTENING!
  88. 88. QUESTIONS?
  89. 89. @dmolsen dmolsen.com

×