The Squishy Future of Content - HEEMAC Edition
5 likes1,888 views
The document discusses the evolving landscape of content delivery, highlighting the shift towards mobile-first strategies as a significant portion of users access the internet primarily through their mobile devices. It emphasizes the need for an iterative, adaptable approach to web design, moving away from traditional redesign processes towards more flexible workflows that prioritize content and user experience. Key recommendations include starting small, using content choreography, and building collaborative teams to enhance content effectiveness across platforms.
The Squishy Future of Content - HEEMAC Edition
- 1. The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web March 2014
- 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
- 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!
- 26. A process driven by one word... Redesign.
- 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.
- 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
- 43. EXPLAINING WHY WE NEED TO GET CONTENT EXAMPLES I. Media II. Forms III. Tables IV. Maps V. Carousels
- 49. Exterminate the Carousels! Exterminate the Carousel!
- 50. The possible answer to carousels is Editorial Calendars.
- 51. bit.ly/ZtqUmV
- 53. Iterative or Spiral Process “1 Deliverable” Workflow CONTENT UX You Are Here BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
- 55. ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content Layering III. Interdigitation IV. Content-based Breakpoints V. When to Remove Content
- 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.
- 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
- 70. Dumb Blobs to Smart Chunks http:/ /flic.kr/p/5DdC9v
- 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.
- 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.
- 87. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
- 89. QUESTIONS?