Responsive Web Design Workshop

Transcript

1. Christopher Hallahan @challahan @rwdkent
2. https://flic.kr/p/oWzVmi
3. Responsive Web Design
4. UX Designer
5. IdeaBase
6. Introductions
7. What Are the Elements of Web Design? http://codepen.io/challahan/pres/zGEMax
12. HTML
13. CSS
15. Trying to control how people accessed the web.
16. Designing with Web Standards Jeffrey Zeldman
17. Fixed-Width 960px
18. 960px Fixed-Width
20. iPhone 2007
23. http://wtfmobileweb.com
24. BradFrost.com
25. http://www.lukew.com/ff/entry.asp?1946
28. “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”
33. Fluid Grid Flexible Images Media Queries
38. RWD Today
39. 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
40. 2/3 http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 2/3 of Americans own a smartphone.
41. 85% http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 85% Americans 18-29 own a smartphone
42. 10% http://www.pewinternet.org/2015/04/01/us-smartphone-use-in-2015/ 10% of Americans smartphone-only
43. 334 million http://www.idc.com/prodserv/smartphone-os-market-share.jsp 334 million worldwide smartphone shipments, Q1-2015
44. -2.4% http://www.idc.com/getdoc.jsp?containerId=prUS25372415 -2.4% Q4-2014 Worldwide PC shipments
45. 77% https://developers.google.com/webmasters/mobile-sites/get-started/why 77% of mobile searches occur at work or home.
46. “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
47. 40% http://www.themobileplaybook.com/en-us/#/chapter2_1 40% of customers have turned to a competitor’s site after a bad mobile experience.
48. https://developers.google.com/webmasters/mobile-sites/ “Google recommends using RWD over other design patterns” Google, Mobile Guide 2014
49. https://developers.google.com/webmasters/mobile-sites/
50. https://developers.google.com/webmasters/mobile-sites/ www.google.com/webmasters/ tools/mobile-friendly/
56. http://farm1.static.flickr.com/29/67433282_f3eb423e24.jpg
57. Process Change
58. Collaborative Team 1 1
60. 2 Scope & Timeline 2
61. 3 Content Strategy 3
62. 4 Design Process 4
63. 5 Research & Usability 5
64. Research + UX Design Development Launch
65. Research + UX Design Development Content? ^
66. http://visualparadox.com/images/no_linking_allowed/overthefalls1600.jpg
67. Content + Architecture Design & 
 Development Content 
 Management 
 System UX + 
 Research Project Kickoff +
 Business Needs
68. Content + Architecture Design & 
 Development Content 
 Management 
 System UX + 
 Research Discovery, Surveys, 
 Interviews, Heuristics, Competitive Analysis Wireframing, Usability Testing Content 
 Inventory 
 + Sitemap Design Patterns/Style Tiles CMS Setup + Content Type Planning Content Strategy, 
 Writing & Content Prototype HTML/CSS Components + 
 Interactive Wireframes + Prototyping Cycle Theme Integration + Content Types Built + Performance Testing Prototype Usability Testing 2 CMS Content Build Design Iteration + Browser Testing Final Theme Ready, Security + Backup, Testing + Launch Brand Manual Project Kickoff +
 Business Needs
69. Content + Architecture Design & 
 Development Content 
 Management 
 System UX + 
 Research Discovery, Surveys, 
 Interviews, Heuristics, Competitive Analysis Wireframing, Usability Testing Content 
 Inventory 
 + Sitemap Design Patterns/Style Tiles CMS Setup + Content Type Planning Content Strategy, 
 Writing & Content Prototype HTML/CSS Components + 
 Interactive Wireframes + Prototyping Cycle Theme Integration + Content Types Built + Performance Testing Prototype Usability Testing 2 CMS Content Build Design Iteration + Browser Testing Final Theme Ready, Security + Backup, Testing + Launch Brand Manual
70. Techniques You’ll Learn Today
71. Content-First Design RWD in Action User-Centered Design
72. Break
73. Content-First Design PART 1
74. CMS Design
77. Content Audit Owner Type Representation Quality Updated Hierarchy Format
78. What’s __________ ? missing
79. Google Docs JumpChart GatherContent
80. Sitemaps Outlines
83. New CMS
84. Most Important
85. “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/
86. Desktop
87. Mobile http://www.lukew.com/ff/entry.asp?1117 80% Less
88. 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
89. 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
90. Header/Logo Products Store Locations Contact Information
92. 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”
93. Content Types
94. Content Types Book Event Location Product News Article Bio
96. Br Book Title: Category: Summary: Subcategory: Date Added: Book Cover: Author(s): Upload + Link:
97. ChildBr Category: Children’s Books
98. 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.
99. http://abookapart.com/products/content-strategy-for-mobile
100. Which Content Management System?
101. Open-Source Drupal Magento Joomla! WordPress Movable Type
102. Proprietary ExpressionEngine Cascade Craft Perch SharePoint
103. Editors/Workflow Types of Content Scalability and Performance Cost Backend User Experience Separation of Content & Design Expandability Lifespan
104. Advertising
105. Advertising is killing the mobile web.
108. Content Mapping ACTIVITY
109. Example: www.nytimes.com
111. Br Add New Video Long Title: Short Title: Category: Description: Subcategory: Date Added: Video File: Author(s): Related: Pre-roll Ad: Upload + +
112. Break
113. RWD in Action PART 2
114. Design Development
115. Design Development
116. Project Manager Visual Designer Front-End Developer Information Architect/UX Designer Back-End Developer Content Strategist Client (Subject Expert)
117. Company Name Name, Telephone, Email Contact Information Our Products Map Locations Search
120. http://styletil.es
123. “…the goal of a Style Prototype is to allow a client to get a visual summary of a site’s proposed design direction without the time investment of creating multiple pages of Photoshop comps or fully developing HTML pages.” Jeremy Lloyd: Our New Responsive Design Deliverable: The Style Prototype http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype
126. http://www.stuffandnonsense.co.uk/blog/about/walls_come_tumbling_down_presentation_slides_and_transcript/
127. Home Page Interior Page News Article
128. Home Page Interior Page News Article Home Page Interior Page News Article
129. Home Page Interior Page News Article Home Page Interior Page News Article Home Page Interior Page News Article
130. Home Page Interior Page News Article Home Page Interior Page News Article Home Page Interior Page News Article Home Page Home Page with rollovers Home Page with rollovers Home Page with rollovers Interior Page with rollovers Interior Page with rollovers Interior Page with rollovers News Article with rollovers News Article with rollovers News Article with rollovers
131. Home Page Interior Page News Article Home Page Interior Page News Article Home Page Interior Page News Article Home Page Home Page with rollovers Home Page with rollovers Home Page with rollovers Interior Page with rollovers Interior Page with rollovers Interior Page with rollovers News Article with rollovers News Article with rollovers News Article with rollovers
132. Home Page Interior Page News Article Home Page Interior Page News Article Home Page Interior Page News Article Home Page Home Page with rollovers Home Page with rollovers Home Page with rollovers Interior Page with rollovers Interior Page with rollovers Interior Page with rollovers News Article with rollovers News Article with rollovers News Article with rollovers Home Page Interior Page News Article
133. “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”
134. Prototyping
137. “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/
138. Related Stories Header and Search Footer Photo 
 Gallery
140. Responsive Email
141. https://litmus.com/blog/53-of-emails-opened-on-mobile-outlook-opens-decrease-33 53% 53% email opened on mobile devices in 2014.
143. PART
144. HTML (HyperText Markup Language) CSS (Cascading Style Sheets) JavaScript
145. HTML (HyperText Markup Language) <html> </html> <body> </body> <h1>This is the Main Heading</h1> <h2>This is a Sub-Heading</h2> <h2>Another Sub-Heading</h2> <p>This text might be an introduction to the rest of the page.</p> <p>Here you can see another.</p> <p>Many long articles have sub-headings to help you follow the structure.</p> “HTML & CSS” by John Duckett
146. HTML (HyperText Markup Language) “HTML & CSS” by John Duckett OPENING TAG CLOSING TAG CHARACTER CHARACTER LEFT-ANGLE BRACKET RIGHT-ANGLE BRACKET FORWARD SLASH
147. HTML (HyperText Markup Language) “HTML & CSS” by John Duckett lang lang en-us en-us <a =" ">Paragraph in English</p> ATTRIBUTE NAME ATTRIBUTE VALUE
148. HTML (HyperText Markup Language) CSS (Cascading Style Sheets) JavaScript
149. CSS (Cascading Style Sheets) p { font-family: Arial;} SELECTOR DECLARATION
150. CSS (Cascading Style Sheets) h1, h2, h3 { font-family: Arial; color: yellow;} PROPERTY VALUE
151. CSS (Cascading Style Sheets) @media screen and (min-width: 700px) { blockquote { font-size: 1.7em; } }
152. Company Name Name, Telephone, Email Contact Information Our Products Map Locations Search Company Name Name, Telephone, Email Contact Information Our Products Map Locations Search Breakpoint: 1000px wide ^
153. HTML (HyperText Markup Language) CSS (Cascading Style Sheets) JavaScript
154. JavaScript $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); });
156. RWD in the Browser ACTIVITY
157. Break
158. User-Centered Design PART 3
159. You Are Not The User
161. Surveys
162. Competitive Analysis
163. Card Sorting
164. www.optimalworkshop.com
165. Interviews
166. Personas & User Stories
167. Usability Testing
168. Design To Test Goals + Tasks Facilitator Notetaker Participant (Observer)
170. Recruit
171. Analyzing Results
172. What’s Actionable? High Priority?
173. Technical & Performance Testing
175. http://cognition.happycog.com/m/content/devicelab.png
176. “From a developer’s point of view, we always try and develop for the core experience first, and then progressively enhance up, adding more and more features.” BBC, Responsive Web Designer Podcast
177. Thou Must Ship
178. Usability Testing ACTIVITY
179. Website: www.ohio.gov Goals: Provide access to Ohio tax filing and refunds. Allow residents to easily look up Ohio agency contact information. Allow residents to search for jobs in Ohio Provide a list of things to do in Ohio for visitors Allow Ohio new businesses to easily get started. Provide access to vehicle registration services. Provide access to vehicle registration services. Guide voters to registration services and polling locations.
180. Tasks: 1. You’ve recently filed your Ohio state taxes and want to check on the status of your refund. How would you do this on ohio.gov? 2. You’ve just gotten a letter in the mail telling you that you need to renew your motorcycle’s license plates. Start the renewal process. 3. You’re voting with an absentee ballot in the upcoming election and need to know the latest date it can be returned by mail in order to be counted.
181. Wrapping It Up CONCLUSION
182. The Redesign
183. Do You Need One? 1 1
184. Revise Your Content 2 2
185. Be Realistic Triple Your Timeline 3 3
186. Get Buy-In 4 4
187. Analytics Competitors Mobile Data Google Usability
188. responsivewebdesign.com/podcast
189. Mobile-First 5 5
190. Apps
191. http://wtfmobileweb.com
192. We Need Good Content Remember:
193. We Aren’t In Control Remember:
194. We Aren’t The User Remember:
195. Thanks! Christopher Hallahan @challahan www.chrishallahan.com www.ideabasekent.com
196. SVG Icon Set: https://github.com/icons8/flat-color-icons Responsive Web Design by Ethan Marcotte Content Strategy for Mobile and Mobile Content Mandate by Karen McGrane HTML & CSS by John Duckett Atomic Design by Brad Frost Style Tiles by Samantha Warren Style Prototypes & Responsive Design Process by Sparkbox Responsive Design Workflow by Stephen Hay Implementing Responsive Design by Tim Kadlec Mobile First by Luke Wroblewski Don’t Make Me Think by Steve Krug Designing with Web Standards by Jeffrey Zeldman CREDITS
197. Responsive Web Design Workbook Materials Christopher Hallahan, IdeaBase
198. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 1 Responsive Web Design is now much more than just a technical solution. It brings together content strategy, user experience design and web design/development to create truly flexible design systems that scale to multiple devices and screen sizes. The following activities will allow you to gain hands-on experience with some of these techniques, so that you can more easily apply them to your own websites and applications.
199. 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
200. 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
201. 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: ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________
202. 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: ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________ ___________________
203. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 11 RWD in Action CodePen is an web design tool that allows users to write HTML, CSS and JavaScript in their browser without having to install any software. The “pens” are used for quickly practicing, testing and sharing ideas with others. You can visit www.codepen.io to use CodePen on your own. We’ll be using a special URL for class today (next page).
204. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 12 RWD in Action Visit www.codepen.io/challahan/professor/WvMQdE We are building a website for this workshop. We’ll start out with some base content, and then add CSS and media queries to turn the content into a responsive website.
205. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 13 RWD in Action CONTENT
 1. Add an image within the header section. Go to Assets and copy the URL. <img src=“https://s3-us-west-2.amazonaws.com/s.cdpn.io/259273/RWD- Vector.svg” alt=“RWD” /> 2. Under Testimonials heading, add a quote about the class. <blockquote>”Your quote goes here.”</blockquote> 3. Add the instructor headshot. Go to Assets and copy the URL. Place it as the first element in the about section. <img src=“https://s3-us-west-2.amazonaws.com/s.cdpn.io/259273/hallahan- headshot.jpg” alt=“Headshot” />
206. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 14 RWD in Action BASIC TYPOGRAPHY 1. Set the default font as Open Sans body { font-family: "Open Sans", sans-serif; }
207. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 15 RWD in Action BASIC LAYOUT & COLORS 1. Set MAIN element to be 90% of the container. main { width: 90%; margin: 0 auto; } 2. Set colors for the headings and links. h1, a { color: #1c7489; } h2 { color: #4f4c4d; }
208. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 16 RWD in Action LISTS & BLOCKQUOTE 1. Space out the list items. ul { line-height: 2; } 2. Set a quote style. blockquote { font-size: 1.3em; border-left: 5px solid #f16374; margin: 0; padding-left: 1em; }
209. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 17 RWD in Action STYLE IMAGES 1. Header Logo header img { width: 50%; margin-top: 1em; }
210. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 18 RWD in Action MEDIA QUERIES AND GRID 1. Add a media query for the Outline and Testimonials @media screen and (min-width: 700px) { .outline, .testimonials { float: left; width: 50%; } }
211. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 19 RWD in Action STYLE ABOUT BOX .about { clear: left; background-color: #f7f7f7; padding: 2em; border: 1px solid #eeeeee; margin-bottom: 2em; } .about h2 { margin-top: 0; } .about img { width: 100%; margin-bottom: 1em; }
212. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 20 RWD in Action ADD A MEDIA QUERY FOR THE HEADSHOT @media screen and (min-width: 500px) { .about img { float: left; width: 100px; margin-right: 3em; margin-bottom: 2em; } }
213. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 21 RWD in Action ADD A MEDIA QUERY FOR THE LOGO AND BLOCKQUOTE @media screen and (min-width: 800px) { header img { width: 200px; } }
214. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 22 RWD in Action FINISHING TOUCHES .outline, .testimonials { margin-bottom: 2em; } @media screen and (min-width: 1200px) { main { width: 60%; } }
215. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 23 User-Centered Design One way we can ensure our responsive websites and applications are meeting our users’ needs is through usability testing. In the following exercise, we’ll select a website, define its top goals, develop usability tasks and conduct a mock usability test.
216. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 24 User-Centered Design Website: www.ohio.gov Goals: Provide access to Ohio tax filing and refunds. Allow residents to easily look up Ohio agency contact information. Allow residents to search for jobs in Ohio Provide a list of things to do in Ohio for visitors Allow Ohio new businesses to easily get started. Provide access to vehicle registration services. Provide access to vehicle registration services. Guide voters to registration services and polling locations.
217. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 25 User-Centered Design Tasks: 1. You’ve recently filed your Ohio state taxes and want to check on the status of your refund. How would you do this on ohio.gov? 2. You’ve just gotten a letter in the mail telling you that you need to renew your motorcycle’s license plates. Start the renewal process. 3. You’re voting with an absentee ballot in the upcoming election and need to know the latest date it can be returned by mail in order to be counted.
218. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 26 User-Centered Design Website: Goals: 1. ____________________________________________________________ 2. ____________________________________________________________ 3. ____________________________________________________________
219. This material is the property of Christopher Hallahan and IdeaBase and may not be reused without permission. 28 User-Centered Design Tasks: 1. ____________________________________________________________ 2. ____________________________________________________________ 3. ____________________________________________________________
220. Please turn in your surveys! View the slide deck at https://speakerdeck.com/challahan/responsive-web-design-workshop