Responsive Web Design for Non-Designers

Note: There was extensive use of video in this presentation that is lost on Speaker Deck

A responsive website or application provides an optimal experience across a wide range of mobile and desktop devices. In this talk, we'll start with the basics of responsive design and cover the various server side and client side approaches used to improve the usability of your web applications and content.

Transcript

1. Responsive Web Design for Non-Designers
3. $ whois cassell Andrew Cassell @alc277
5. Design is form and function
6. Developers can learn.
7. You can learn how to design
9. Learning the basics = Ubiquitous Language
10. How do you learn how to design?
11. Build a personal library
15. http://mediaqueri.es
18. Design is iterative
19. https://vimeo.com/113751583
20. https://vimeo.com/113751583 https://vimeo.com/113751583
21. Learning Feedback Loop
22. Stiff Upper Lip
24. If you think your design sucks. That just means you are becoming a better designer.
25. Taste
26. Share your successes
27. Confidence
28. Understanding the Basics
37. What is responsive web design?
38. What is responsive web design? Hard.
39. What is responsive web design? Double the effort.
40. What is responsive web design? Triple the effort.
41. What is responsive web design? Giving less to mobile users
42. What is responsive web design? Giving more to desktop users
43. What is responsive web design? Combination of flexible grids, flexible images and css media queries.
44. A single design that delivers an optimal experience for every interaction on all devices.
45. Do we have to?
46. Mobile App or Mobile Website?
47. http://mashable.com/2015/04/21/google-mobile-search-2/
58. Photo: @brad_frost
59. Photo: @brad_frost
60. Photo: @brad_frost
62. Photo: @brad_frost mozvr.com
63. Photo: @brad_frost
64. Photo: @brad_frost
65. Long Lasting
66. Device
67. Device
68. Device
69. Device
70. Device
72. http://www.ultimateresponsive.com/
74. Photo: @brad_frost Luke Wroblewski @lukew
82. Responsive Web Design Requirements 1.) Correct Viewport 2.) Consistent URLs 3.) Content that adapts to the device
83. Responsive Web Design Requirements 1.) Correct Viewport 2.) Consistent URLs 3.) Content that adapts to the device
84. <meta name="viewport" content="width=device-width, initial- scale=1.0, user-scalable=no">
85. Responsive Web Design Requirements 1.) Correct Viewport 2.) Consistent URLs 3.) Content that adapts to the device
86. Consistent Urls •No separate mobile site •The URL doesn’t change dependent on the device accessing it •Shared links always work
90. Consistent Urls •No separate mobile site •The URL doesn’t change dependent on the device accessing it •Shared links always work
94. m.example.com =
104. Responsive Web Design Requirements 1.) Correct Viewport 2.) Consistent URLs 3.) Content that adapts to the device
108. http://wtfmobileweb.com/
113. “Since humans are more pliable than computers, it can be easier to make a human fit the computer’s limitations than to design the computer to fit the human’s needs. When that happens, the human becomes a prisoner trapped by the computer rather than liberated by it.” - Karla Jennings
114. Good RWD? •Legible and easy to read •No panning •No zooming or pinching •Feels natural •Loads Fast
117. Good Design is Aesthetic - dieter rams
119. Examples of Good Responsive Web Design
132. Device
133. Resized Browser Window
135. Increased Font Size
143. RWD Tools
144. Photo: @brad_frost
151. Device Testing
153. Photo: @brad_frost
159. Implementation
160. WHAT NOT TO DO
162. Hovers
164. Modal
165. Modal
166. Modal
170. Hamburgers
173. Menu
175. Implementation
176. 0.) Content
177. responsive needs become content requirements. forced to think about your content when you need flexible media.
178. photographers shouldn’t tightly crop write less design in modular pieces
180. 1.) Viewport
181. <meta name="viewport" content="width=device-width, initial- scale=1.0, user-scalable=no">
182. 2.) Design for small screens
183. Mobile First
185. mobile first design forces you to focus on only the most important data and actions in an application
186. important data and actions
187. important data and actions
188. @eryno
189. 2.) Breakpoints
194. CSS Media Queries
195. a @media print
196. a @media (min-width: 700px) { … … … }
197. a /* small */
 #logo
 {
 width: 200px;
 }
 
 /* medium */
 @media (min-width: 700px)
 {
 #logo
 {
 width: 300px;
 }
 }
 
 /* large */
 @media (min-width: 1200px)
 {
 #logo
 {
 width: 400px;
 }
 }
198. 3.) Fluid Grid
212. 3.) Forms
215. Performance
216. Responsive Images
221. <picture> <source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x"> <source srcset="small.jpg 1x, small-hd.jpg 2x"> <img src="fallback.jpg" alt=""> </picture> <img src="small.jpg" srcset="large.jpg 1024w, medium.jpg 640w, small.jpg 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="A rad wolf">
223. $server = League\Glide \ServerFactory::create([ 'source' => 'path/to/source/folder', 'cache' => 'path/to/cache/folder', ]); $server->outputImage('example.jpg', ['w' => $_GET[‘w’], 'h' => $_GET[‘h’]]); Using Glide For Responsive Images
224. <img src="example.jpg?w=320&h=200" srcset="example.jpg?w=1200&h=800 1024w, example.jpg?w=640&h=480 640w, example.jpg?w=320&h=200 320w" sizes="(min-width: 36em) 33.3vw, 100vw" alt="Example">
225. Device Capabilities
226. Browser Sniffing
232. When not to RWD?
233. Huge charts and information dense pages
237. https://techblog.livingsocial.com/blog/2015/04/06/responsive-tables-in-pure-css
238. Resources
239. http://bradfrost.github.io/this-is-responsive/patterns.html
240. http://responsive.rga.com/
241. http://www.webdesignernews.com/ http://alistapart.com/ http://www.lukew.com/ http://responsivedesign.is/
244. https://joind.in/13732 @alc277 andrewcassell.com
245. T hank Y ou!