Content Strategy / Content First Design

Transcript

1. Content-First Design UX AKRON Christopher Hallahan @challahan @rwdkent
2. IdeaBase
3. Content-First Design http://alistapart.com/blog/post/content-first-design Steph Hay
4. “The shift of working content first (conversation design) instead of structure first (system design) is how we worked … before we ever moved to layout and design.” Stephanie Hay, Content First Design, A List Apart
5. “Content strategy helps organizations provide the right content, to the right people, at the right times, for the right reasons. ” Megan Casey, The Content Strategy Toolkit
6. Fixed-Width 960px
7. iPhone 2007
9. BradFrost.com
10. http://www.lukew.com/ff/entry.asp?1946
12. “The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must 'accept the ebb and flow of things.” John Allsopp, “A Dao of Web Design”
17. Fluid Grid Flexible Images Media Queries
22. RWD Today
23. http://karenmcgrane.com/2014/01/13/the-mobile-content-mandate/ “You don’t get to decide which device people use to access the internet: they do.” Karen McGrane, The Mobile Content Mandate
24. 2/3 http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 2/3 of Americans own a smartphone.
25. 85% http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 85% Americans 18-29 own a smartphone
26. 10% http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 10% of Americans smartphone-only
27. 334 million http://www.idc.com/prodserv/smartphone-os-market-share.jsp 334 million worldwide smartphone shipments, Q1-2015
28. -2.4% http://www.idc.com/getdoc.jsp?containerId=prUS25372415 -2.4% Q4-2014 Worldwide PC shipments
29. 77% https://developers.google.com/webmasters/mobile-sites/get-started/why 77% of mobile searches occur at work or home.
30. “We think we should be offering a familiar experience across all of the different devices, and people may want to be getting different things from BBC News at different times of the day.” BBC, Responsive Web Design Podcast
31. https://developers.google.com/webmasters/mobile-sites/
37. http://farm1.static.flickr.com/29/67433282_f3eb423e24.jpg
38. Process Change
39. Collaborative Team 1 1
40. 2 Scope & Timeline 2
41. 3 Design Process 3
42. 4 Research & Usability 4
43. Content Strategy 5 5
44. Research + UX Design Development Launch
45. Research + UX Design Development Content? ^
46. Content + Architecture UX + 
 Research Project Kickoff +
 Business Needs Content + Architecture Design & 
 Development Content 
 Management 
 System UX + 
 Research
47. Project Manager Visual Designer Front-End Developer Information Architect/UX Designer Back-End Developer Content Strategist Client (Subject Expert)
48. CMS Design
51. Surveys
52. Competitive Analysis
53. Card Sorting
54. Interviews
55. Personas & User Stories
56. Usability Testing
58. Content Audit Owner Type Representation Quality Updated Hierarchy Format Tone
59. What’s __________ ? missing
60. Google Docs JumpChart GatherContent
61. Sitemaps Outlines Content Prototype
64. New CMS
65. Most Important
66. “How Users Read on the Web: They don't. People rarely read Web pages word by word; instead, they scan the page, picking out individual words and sentences.” Jakob Nielsen http://www.nngroup.com/articles/how-users-read-on-the-web/
67. Desktop
68. Mobile http://www.lukew.com/ff/entry.asp?1117 80% Less
69. HEADING 1 Heading 2 HEADING 1 This is a paragraph of content. This is a paragraph of content. This is a paragraph of content. •List Item •List Item •List Item •List Item This is a paragraph of content. This is a paragraph of content. This is a paragraph of content. Logo and Navigation
70. HEADING 1 Heading 2 HEADING 1 This is a paragraph of content. This is a paragraph of content. This is a paragraph of content. •List Item •List Item •List Item •List Item This is a paragraph of content. This is a paragraph of content. This is a paragraph of content. Logo and Navigation
71. Header/Logo Products Store Locations Contact Information
74. The Content Strategy Toolkit
75. http://karenmcgrane.com/2014/01/13/the-mobile-content-mandate/ “There is no “how to write for mobile.” There’s only good writing. Period” Karen McGrane: “Content Strategy for Mobile”
77. Company Name Name, Telephone, Email Contact Information Our Products Map Locations Search
81. “The web affords us a wonderful opportunity: to be able to design and test a design in the actual medium for which we’re designing. It’s time to stop designing pictures of websites and start designing all aspects of the user experience simultaneously and in a practical way.” Stephen Hay. “Responsive Design Workflow”
84. Content Types
85. Content Types Book Event Location Product News Article Bio
87. Br Book Title: Category: Summary: Subcategory: Date Added: Book Cover: Author(s): Upload + Link:
88. ChildBr Category: Children’s Books
89. ChildBr Green Eggs and Ham Author: Dr. Seuss Added April 2015 Green Eggs and Ham is a best-selling and critically acclaimed children's book by Dr. Seuss, first published on August 12, 1960. As of 2001, according to Publishers Weekly, it was the fourth best-selling English-language children's book of all time.[1] The story has appeared in several animated videos starting with 1973's Dr. Seuss on the Loose: The Sneetches, The Zax; Green Eggs and Ham starring Paul Winchell as the voice of both Sam-I-am and the first-person narrating man.
90. http://abookapart.com/products/content-strategy-for-mobile
91. Which Content Management System?
92. Open-Source Drupal Magento Joomla! WordPress Movable Type
93. Proprietary ExpressionEngine Cascade Craft Perch SharePoint
94. Editors/Workflow Types of Content Scalability and Performance Cost Backend User Experience Separation of Content & Design Expandability Lifespan
95. “We’re not designing pages, we’re designing systems of components.” Stephen Hay, “Responsive Web Design Workflow” http://bradfrost.com/blog/mobile/bdconf-stephen-hay-presents-responsive-design-workflow/
96. Related Stories Header and Search Footer Photo 
 Gallery
97. Content Governance
98. Roles & Responsibilities Content Calendars & Editorial Planning Content Reviews/Audits Style Guide
99. We Need Good Content Remember:
100. We Aren’t In Control Remember:
101. We Aren’t The User Remember:
102. Thanks! Christopher Hallahan @challahan www.chrishallahan.com www.ideabasekent.com
103. Content Prioritization ACTIVITY
104. http://www.kent.edu/chemistry/graduate-programs http://www.kent.edu/philosophy/undergraduate-programs http://www.kent.edu/EducationAbroad
108. Eliminate Unnecessary Content Adjust the Voice/Tone Break Into Subheadings/Bullets Prioritize Most Important Content
109. Content Mapping ACTIVITY
110. Example: www.nytimes.com
112. Br Add New Video Long Title: Short Title: Category: Description: Subcategory: Date Added: Video File: Author(s): Related: Pre-roll Ad: Upload + +
113. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 2 Content-First Design Selected Website: www.nytimes.com Core Content Types: News Article Author Opinion Article Video Review Crossword Puzzle Slideshow/Gallery Book Ad Frequently Asked Question Comment Stock
114. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 3 Content-First Design Content Type: Video Content Pieces: ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ Title Video File Date Added Category Author(s) Description Related Content Preroll Ad
115. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 4 Content-First Design Selected Website: ___________________________________________ Core Content Types: ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________
116. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 5 Content-First Design Content Type: ____________________________________________ Content Pieces: ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________
117. Please turn in your surveys! View the slide deck at https://speakerdeck.com/challahan/responsive-web-design-workshop