Designing Responsive Websites

Responsive web design allows you to create websites that provide an optimal user experience across devices. In this session, attendees learned why the process for designing a (good) responsive website can be very different than the traditional web design process—and how to change their workflow to create a great responsive site.

Presented in 2015 at McFullStack (McGill University, Montreal). Presented in 2014 at HOW Interactive Design Conference in Washington, DC & HOW Interactive Design Conference in Chicago, IL.

Transcript

1. Designing Responsive Websites Clarissa Peterson @clarissa
2. http://www.oliverharvey.co.uk/
3. http://www.oliverharvey.co.uk/
4. http://www.linksture.com/
5. http://www.linksture.com/
6. http://skinnyties.com/
7. http://skinnyties.com/
8. Flexible https://flic.kr/p/jXxfeF
13. #content { width: 90%; }
14. Adjustable https://flic.kr/p/j9KrpA
15. http://www.unitedpixelworkers.com/
16. http://www.unitedpixelworkers.com/
17. http://www.unitedpixelworkers.com/
18. http://www.unitedpixelworkers.com/
19. http://www.unitedpixelworkers.com/
20. article { width: 92%; } @media only screen and (min-width:40em) { article { width: 70%; float: left; }
26. https://flic.kr/p/ca1kU
27. https://flic.kr/p/cfQwL7
28. Design Process https://flic.kr/p/bSHvgv
29. https://flic.kr/p/35Ahx
30. Design Develop
31. Design Develop
32. https://flic.kr/p/rZVTg
33. “It's not like our industry nailed web design before we started doing responsive design. It's still a work in progress.” - Dan Willis @uxcrank
34. Content https://flic.kr/p/4qc5EB
35. http://teamtreehouse.com
36. http://teamtreehouse.com
37. http://teamtreehouse.com
38. http://teamtreehouse.com
39. Small Screen First https://flic.kr/p/abN4Q4
44. Wireframes
45. http://flic.kr/p/cJJdzm
46. http://foundation.zurb.com/
47. http://foundation.zurb.com/prototype-example2.php
48. http://foundation.zurb.com/prototype-example2.php
49. http://foundation.zurb.com/prototype-example2.php
50. http://foundation.zurb.com/prototype-example2.php
51. http://foundation.zurb.com/docs/forms.php
52. http://foundation.zurb.com/docs/typography.php
53. http://www.hotgloo.com/
54. Typography https://flic.kr/p/4r1D8w
55. http://www.trentwalton.com
56. http://www.trentwalton.com
57. http://www.trentwalton.com
58. http://www.trentwalton.com
59. https://flic.kr/p/eYEFGY Ems & Rems
61. 1em = default
62. 2em = twice as big 1em = default
63. 2em = twice as big 1em = default .5em = half as big
64. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
65. h1 { font-size: 3em; } h2 { font-size: 2em; } h3 { font-size: 1.5em; }
66. body { font-size: 100%; }
67. https://flic.kr/p/8iNCNU
68. Scale https://flic.kr/p/dhufQk
69. Line Length (Measure) http://en.wikipedia.org/wiki/File:Metal_movable_type.jpg
72. 45-75 Characters
73. max-width https://flic.kr/p/7nCGk3
74. article { max-width: 28em; }
75. article { max-width: 28em; }
78. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
79. @media only screen and (min-width:48em) { article { font-size: 1.1em; } article p { line-height: 1.4; margin: 1.4em auto; } }
80. http://wearyoubelong.com/
81. http://wearyoubelong.com/
82. #intro { font-size: 1em; font-family: Helvetica, sans-serif; }
83. #intro { font-size: 1em; font-family: Helvetica, sans-serif; } @media only screen and (min-width:30em) { #intro { font-size: 1.2em; font-family: Populaire, sans-serif; } }
84. Mobile https://flic.kr/p/d5DEjS
85. https://flic.kr/p/jRnhnU
86. https://flic.kr/p/nNu7sP
92. <a href=”tel:202-123-4567”>202-123-4567</a>
93. Performance
94. https://flic.kr/p/23xNNg
95. “You can't mock up performance in Photoshop.” - Brad Frost @brad_frost
96. Performance Budget https://flic.kr/p/hT9yw7
97. https://flic.kr/p/5R51o3
99. https://flic.kr/p/7NFTF6
100. Testing https://flic.kr/p/bPZzeM
101. http://www.browserstack.com/
102. Device Labs
103. https://flic.kr/p/cdVB9h Clarissa Peterson Peterson/Kandy clarissapeterson.com @clarissa