Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design for Non-Designers

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.

F4bb45b2a18ee44c4a28b1664de150bd?s=128

Andrew Cassell

May 21, 2015
Tweet

Transcript

  1. Responsive Web Design for Non-Designers

  2. None
  3. $ whois cassell Andrew Cassell @alc277

  4. None
  5. Design is form and function

  6. Developers can learn.

  7. You can learn how to design

  8. None
  9. Learning the basics = Ubiquitous Language

  10. How do you learn how to design?

  11. Build a personal library

  12. None
  13. None
  14. None
  15. http://mediaqueri.es

  16. None
  17. None
  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

  23. None
  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

  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  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/

  48. 48

  49. 49

  50. 50

  51. None
  52. 52

  53. 53

  54. 54

  55. 55

  56. None
  57. None
  58. Photo: @brad_frost

  59. Photo: @brad_frost

  60. Photo: @brad_frost

  61. 61

  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

  71. None
  72. http://www.ultimateresponsive.com/

  73. None
  74. Photo: @brad_frost Luke Wroblewski @lukew

  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. None
  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
  87. None
  88. None
  89. None
  90. Consistent Urls •No separate mobile site •The URL doesn’t change

    dependent on the device accessing it •Shared links always work
  91. None
  92. None
  93. None
  94. m.example.com =

  95. None
  96. None
  97. None
  98. None
  99. None
  100. None
  101. None
  102. None
  103. None
  104. Responsive Web Design Requirements 1.) Correct Viewport 2.) Consistent URLs

    3.) Content that adapts to the device
  105. None
  106. None
  107. None
  108. http://wtfmobileweb.com/

  109. None
  110. None
  111. None
  112. None
  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
  115. None
  116. None
  117. Good Design is Aesthetic - dieter rams

  118. None
  119. Examples of Good Responsive Web Design

  120. None
  121. None
  122. None
  123. None
  124. None
  125. None
  126. None
  127. None
  128. None
  129. None
  130. None
  131. None
  132. Device

  133. Resized Browser Window

  134. None
  135. Increased Font Size

  136. None
  137. None
  138. None
  139. None
  140. None
  141. None
  142. None
  143. RWD Tools

  144. Photo: @brad_frost

  145. None
  146. None
  147. None
  148. None
  149. None
  150. None
  151. Device Testing

  152. None
  153. Photo: @brad_frost

  154. None
  155. None
  156. None
  157. None
  158. None
  159. Implementation

  160. WHAT NOT TO DO

  161. None
  162. Hovers

  163. None
  164. Modal

  165. Modal

  166. Modal

  167. None
  168. None
  169. None
  170. Hamburgers

  171. None
  172. None
  173. Menu

  174. None
  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

  179. None
  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

  184. None
  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

  190. None
  191. None
  192. None
  193. None
  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

  199. None
  200. None
  201. None
  202. None
  203. None
  204. None
  205. None
  206. None
  207. None
  208. None
  209. None
  210. None
  211. None
  212. 3.) Forms

  213. None
  214. None
  215. Performance

  216. Responsive Images

  217. None
  218. None
  219. None
  220. None
  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">
  222. None
  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

  227. None
  228. None
  229. None
  230. None
  231. None
  232. When not to RWD?

  233. Huge charts and information dense pages

  234. None
  235. None
  236. None
  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/

  242. None
  243. None
  244. https://joind.in/13732 @alc277 andrewcassell.com

  245. T hank Y ou!