The Squishy Future of Content - Penn State Lunch Edition
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

The Squishy Future of Content - Penn State Lunch Edition

  • 477 views
Uploaded on

 

More in: Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
477
On Slideshare
476
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
1

Embeds 1

http://www.linkedin.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web January 2014
  • 2. @dmolsen dmolsen.com ’99 Geography
  • 3. THE SQUISHY FUTURE OF CONTENT I. Where We Are II. An Opportunity to Reboot III. Starting Small IV. Content Choreography V. Where We’re Going
  • 4. I. WHERE WE ARE http://flic.kr/p/87gkH5
  • 5. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  • 6. Pixel Perfect Previews http://flic.kr/p/8cPU9D
  • 7. CONTENT GOES HERE
  • 8. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  • 9. A process driven by one word... Redesign.
  • 10. *insert jean-luc picard facepalm here* http://flic.kr/p/69ZZhR
  • 11. “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
  • 12. “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%
  • 13. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS 51% Percentage of Email Opened on Mobile in Dec. 2013 http:/ /bit.ly/1iJ6XAH
  • 14. 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)
  • 15. What do we do?! http://flic.kr/p/6qidN1
  • 16. stand-in slide FLUID LAYOUT ANIMATION
  • 17. http://flic.kr/p/9ux7kJ Content Flows Like Water?
  • 18. http://flic.kr/p/8AE4ha glasses with chunky content
  • 19. http:/ /flic.kr/p/fJ9GEX
  • 20. The Reality: Chunky Water http:/ /flic.kr/p/6DxS9D
  • 21. Layout informs content. Content informs layout.
  • 22. this is really important... Neither is more important than the other.
  • 23. II. AN OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
  • 24. futurefriend.ly
  • 25. a Future Friendly truth... Our existing standards, workflows, & infrastructure won’t hold up.
  • 26. The process can no longer be driven by this word... Redesign.
  • 27. What to call it? Refresh? Reboot? Blow up all the things?
  • 28. ( No More Pixel Perfection http://flic.kr/p/8cPU9D
  • 29. Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /flic.kr/p/a2AZv1 http://flic.kr/p/7M8Uf5
  • 30. We Need to Build Teams WRITERS DEVELOPERS DESIGNERS http://flic.kr/p/fhQFu
  • 31. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 32. III. STARTING SMALL http://flic.kr/p/bpVs1E
  • 33. UTILIZING CHANGE MANAGEMENT change management http://bit.ly/1eeYB09 http://bit.ly/1eeYB09 http:/ /bit.ly/1eeYB09
  • 34. UTILIZING CHANGE MANAGEMENT I. Awareness II. Desire III. Knowledge IV. Ability V. Reinforcement ADKAR is a registered trademark of Prosci Research
  • 35. Identify a Small Project http://flic.kr/p/5Tbchf
  • 36. “1 Deliverable” Workflow e Her re ou A Y CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 37. styletil.es
  • 38. Identifying Content Examples http://flic.kr/p/6DhBCd
  • 39. SELECT TYPES OF CONTENT CHUNKS I. Media II. Forms III. Tables IV. Maps V. Carousels
  • 40. stand-in slide MEDIA ANIMATION
  • 41. stand-in slide FORM ANIMATION
  • 42. stand-in slide TABLE EXAMPLE
  • 43. stand-in slide TABLE EXAMPLE
  • 44. stand-in slide TABLE EXAMPLE
  • 45. Exterminate the Carousels! Exterminate the Carousel!
  • 46. The rise of... Editorial Calendars.
  • 47. bit.ly/ZtqUmV
  • 48. Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
  • 49. Wireframing & Layout
  • 50. pattern-lab.info
  • 51. IV. CONTENT CHOREOGRAPHY http://flic.kr/p/49YSYK
  • 52. “1 Deliverable” Workflow CONTENT UX You Are Here BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 53. ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content-based Breakpoints III. Content Layering IV. Interdigitation V. When to Remove Content
  • 54. The need to... Prioritize Content.
  • 55. Content-based Breakpoints http://bit.ly/12xuLR1
  • 56. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
  • 57. SCROLLING... SCROLLING... SCROLLING...
  • 58. CONTENT LAYERING: MINIMIZING INFORMATION III { only viewable after selecting an element...
  • 59. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX III also only viewable after selecting an element...
  • 60. INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT Title Desc. Buy! Title Description Buy! Specs Related Specs changing order to encourage an action Related
  • 61. NEVER REMOVE CONTENT! Exterminate the Carousel!
  • 62. V. WHERE WE’RE GOING http://flic.kr/p/8BPQ2q
  • 63. Leaving Layout Behind http://flic.kr/p/7V8ZUR
  • 64. Ever Expanding Outlets for Content http:/ /flic.kr/p/ejCiT2
  • 65. http://bit.ly/15w4AZc
  • 66. Content Shifting http://flic.kr/p/96Hbsq
  • 67. Dumb Blobs to Smart Chunks http:/ /flic.kr/p/5DdC9v
  • 68. Layout informs content. Content informs layout. Both inform architecture.
  • 69. SUMMING UP http://flic.kr/p/byKgrf
  • 70. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 71. OUR NEW PROCESS I. Start Small: Chunks & Style II. Prioritize Your Content III. Wireframe in the Browser IV. Content-based Breakpoints IV. Profit
  • 72. Real content is critical to the entire process. Be an advocate for it early & often.
  • 73. This sh!t is complicated. Don’t get discouraged. Modern web design can’t be done by one person. Find help, be helpful & reboot.
  • 74. Maybe by being Future Friendly... http://flic.kr/p/7jWpEb
  • 75. ...and forging future-ready partnerships... http://flic.kr/p/gidRPX
  • 76. ...we can find unicorns & rainbows.
  • 77. http://flic.kr/p/agyEkb
  • 78. building.seesparkbox.com
  • 79. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
  • 80. THANKS FOR LISTENING! QUESTIONS?
  • 81. @dmolsen dmolsen.com