The Squishy Future of Content - Key Communicators Edition

1,654 views
1,538 views

Published on

Published in: Technology, Design

The Squishy Future of Content - Key Communicators Edition

  1. 1. The Squishy Future of Content Dave Olsen, @dmolsen WVU University Relations - Web January 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. *insert jean-luc picard facepalm here* http://flic.kr/p/69ZZhR
  6. 6. “My God, it’s full of devices...” http:/ /flic.kr/p/gS7txD
  7. 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. 8. OUR “TRADITIONAL” COMMS ARE GOING TO MOBILE OUTLETS 51% Percentage of Email Opened on Mobile in Dec. 2013 http:/ /bit.ly/1iJ6XAH
  9. 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. 10. This slide shows how the Boston Globe uses responsive design. link to animation
  11. 11. http://flic.kr/p/9ux7kJ Content Flows Like Water?
  12. 12. http://flic.kr/p/8AE4ha glasses with chunky content
  13. 13. http:/ /flic.kr/p/fJ9GEX
  14. 14. The Reality: Chunky Water http:/ /flic.kr/p/6DxS9D
  15. 15. Layout informs content. Content informs layout.
  16. 16. this is really important... Neither is more important than the other.
  17. 17. Linear Workflow THROW IN SOME CONTENT THINK ABOUT USERS DESIGN FRONT-END BACK-END courtesy Ben Callahan, Sparkbox LAUNCH!
  18. 18. A process driven by one word... Redesign.
  19. 19. Pixel Perfect Previews http://flic.kr/p/8cPU9D
  20. 20. CONTENT GOES HERE
  21. 21. a Future Friendly truth... Our existing standards, workflows, & infrastructure won’t hold up.
  22. 22. II. AN OPPORTUNITY TO REBOOT http://bit.ly/1gwTc6V
  23. 23. The process can no longer be driven by this word... Redesign.
  24. 24. What to call it? Refresh? Reboot? Blow up all the things?
  25. 25. ( No More Pixel Perfection http://flic.kr/p/8cPU9D
  26. 26. Process Waterfall Photoshop Lorem Ipsum The Death of Lorem Ipsum http:/ /flic.kr/p/a2AZv1 http://flic.kr/p/7M8Uf5
  27. 27. We Need to Build Teams WRITERS DEVELOPERS DESIGNERS http://flic.kr/p/fhQFu
  28. 28. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  29. 29. “1 Deliverable” Workflow e Her re ou A Y CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  30. 30. III. STARTING SMALL http://flic.kr/p/bpVs1E
  31. 31. styletil.es
  32. 32. Identifying Content Examples http://flic.kr/p/6DhBCd
  33. 33. SELECT TYPES OF CONTENT CHUNKS I. Media II. Forms III. Tables IV. Maps V. Carousels
  34. 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. 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. 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. 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. 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. 39. Exterminate the Carousels! Exterminate the Carousel!
  40. 40. The rise of... Editorial Calendars.
  41. 41. “1 Deliverable” Workflow CONTENT UX BACK-END re uA Yo e Her DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  42. 42. Developing a Component Style Guide Styleguide http://flic.kr/p/9VewrY
  43. 43. IV. CONTENT CHOREOGRAPHY http://flic.kr/p/49YSYK
  44. 44. “1 Deliverable” Workflow CONTENT UX You Are Here BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  45. 45. Content Influencing Layout http:/ /flic.kr/p/6DxS9D
  46. 46. ELEMENTS OF CONTENT CHOREOGRAPHY I. Defining a Layout II. Content Layering III. Interdigitation IV. Content-based Breakpoints V. When to Remove Content
  47. 47. Wireframing & Layout
  48. 48. The need to... Prioritize Content.
  49. 49. SCROLLING... SCROLLING... SCROLLING...
  50. 50. CONTENT LAYERING: MINIMIZING INFORMATION III { only viewable after selecting an element...
  51. 51. CONTENT LAYERING: TAKE ADVANTAGE OF Z-INDEX III also only viewable after selecting an element...
  52. 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. 53. CONTENT-BASED BREAKPOINTS: LINE LENGTH RULES
  54. 54. NEVER REMOVE CONTENT! Exterminate the Carousel!
  55. 55. SUMMING UP http://flic.kr/p/byKgrf
  56. 56. “1 Deliverable” Workflow CONTENT UX BACK-END DESIGN FRONT-END courtesy Ben Callahan, Sparkbox
  57. 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. 58. Real content is critical to the entire process. Be an advocate for it early & often.
  59. 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. 60. Maybe by being Future Friendly... http://flic.kr/p/7jWpEb
  61. 61. ...and forging future-ready partnerships... http://flic.kr/p/gidRPX
  62. 62. ...we can find unicorns & rainbows.
  63. 63. http://flic.kr/p/agyEkb
  64. 64. building.seesparkbox.com
  65. 65. THANKS TO... Ben Callahan @bencallahan Brad Frost @brad_frost Eileen Webb Chris Coyier @webmeadow @chriscoyier Doug Gapinski @douggapinski
  66. 66. THANKS FOR LISTENING! QUESTIONS?
  67. 67. @dmolsen dmolsen.com

×