The Squishy Future of Content - Key Communicators Edition

  • 1,085 views
Uploaded on

 

More in: Technology , Design
  • 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
1,085
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
16
Comments
0
Likes
8

Embeds 0

No embeds

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
  • 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. *insert jean-luc picard facepalm here* http://flic.kr/p/69ZZhR
  • 6. “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
  • 7. 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)
  • 8. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS 51% Percentage of Email Opened on Mobile in Dec. 2013 http:/ /bit.ly/1iJ6XAH
  • 9. “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%
  • 10. This slide shows how the Boston Globe uses responsive design. link to animation
  • 11. http://flic.kr/p/9ux7kJ Content Flows Like Water?
  • 12. http://flic.kr/p/8AE4ha glasses with chunky content
  • 13. http:/ /flic.kr/p/fJ9GEX
  • 14. The Reality: Chunky Water http:/ /flic.kr/p/6DxS9D
  • 15. Layout informs content. Content informs layout.
  • 16. this is really important... Neither is more important than the other.
  • 17. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  • 18. A process driven by one word... Redesign.
  • 19. Pixel Perfect Previews http://flic.kr/p/8cPU9D
  • 20. CONTENT GOES HERE
  • 21. a Future Friendly truth... Our existing standards, workflows, & infrastructure won’t hold up.
  • 22. II. AN OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
  • 23. The process can no longer be driven by this word... Redesign.
  • 24. What to call it? Refresh? Reboot? Blow up all the things?
  • 25. ( No More Pixel Perfection http://flic.kr/p/8cPU9D
  • 26. Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /flic.kr/p/a2AZv1 http://flic.kr/p/7M8Uf5
  • 27. We Need to Build Teams WRITERS DEVELOPERS DESIGNERS http://flic.kr/p/fhQFu
  • 28. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 29. “1 Deliverable” Workflow e Her re ou A Y CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 30. III. STARTING SMALL http://flic.kr/p/bpVs1E
  • 31. styletil.es
  • 32. Identifying Content Examples http://flic.kr/p/6DhBCd
  • 33. SELECT TYPES OF CONTENT CHUNKS I. Media II. Forms III. Tables IV. Maps V. Carousels
  • 34. This slide shows how a media element like an image might react in a responsive design. link to animation Think about how info-graphics or the focus of an image might change as they’re resized.
  • 35. This slide shows how a form might react in a responsive design. link to animation Think about how the form labels shift as they’re resized. Also the length of a form.
  • 36. This slide shows how a table might react in a responsive design. link to animation Think about how the columns shift to rows on smaller screens. Just one option.
  • 37. This slide shows how a table might react in a responsive design. link to animation Think about how less important columns are dropped on smaller screens.
  • 38. This slide shows how a map might react in a responsive design. link to animation This isn’t the best example. Should be thinking about touch, width, focus and download size.
  • 39. Exterminate the Carousels! Exterminate the Carousel!
  • 40. The rise of... Editorial Calendars.
  • 41. “1 Deliverable” Workflow CONTENT UX BACK-END re uA Yo e Her DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 42. Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
  • 43. IV. CONTENT CHOREOGRAPHY http://flic.kr/p/49YSYK
  • 44. “1 Deliverable” Workflow CONTENT UX You Are Here BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 45. Content Influencing Layout http:/ /flic.kr/p/6DxS9D
  • 46. ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content Layering III. Interdigitation IV. Content-based Breakpoints V. When to Remove Content
  • 47. Wireframing & Layout
  • 48. The need to... Prioritize Content.
  • 49. SCROLLING... SCROLLING... SCROLLING...
  • 50. CONTENT LAYERING: MINIMIZING INFORMATION III { only viewable after selecting an element...
  • 51. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX III also only viewable after selecting an element...
  • 52. INTERDIGITATION: CHANGE SOURCE ORDER BASED ON VIEWPORT Title Desc. Buy! Title Description Buy! Specs Related Specs changing order to encourage an action Related
  • 53. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
  • 54. NEVER REMOVE CONTENT! Exterminate the Carousel!
  • 55. SUMMING UP http://flic.kr/p/byKgrf
  • 56. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  • 57. OUR NEW PROCESS I. Start Small: Chunks & Style II. Prioritize Your Content III. Wireframe in the Browser IV. Content-based Breakpoints V. Profit
  • 58. Real content is critical to the entire process. Be an advocate for it early & often.
  • 59. This sh!t is complicated. Don’t get discouraged. Modern web design can’t be done by one person. Find help, be helpful & reboot.
  • 60. Maybe by being Future Friendly... http://flic.kr/p/7jWpEb
  • 61. ...and forging future-ready partnerships... http://flic.kr/p/gidRPX
  • 62. ...we can find unicorns & rainbows.
  • 63. http://flic.kr/p/agyEkb
  • 64. building.seesparkbox.com
  • 65. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
  • 66. THANKS FOR LISTENING! QUESTIONS?
  • 67. @dmolsen dmolsen.com