1. Responsive Design
LVL Studio UX Soirée at Station C
November 21, 2012 in Montreal, Quebec
Clarissa Peterson
@clarissa

2. A Little History

3. Fixed-width Site

6. Separate Mobile Site

9. One Website

18. Before

20. After

21. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7

22. Responsive Web Design

23. Responsive Web Design http://www.abookapart.com/products/responsive-web-design/

24. Responsive web design offers us a way
forward, finally allowing us to “design for
the ebb and flow of things.”
- Ethan Marcotte

25. How It Works

26. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries

27. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries

32. #content {
! width: 90%;
}

33. img {
! max-width: 100%;
}

34. 1. Flexible Grid
2. Flexible Images/Media
3. Media Queries

35. http://www.unitedpixelworkers.com/

36. http://www.unitedpixelworkers.com/

37. http://www.unitedpixelworkers.com/

38. http://www.unitedpixelworkers.com/

39. http://www.unitedpixelworkers.com/

40. http://www.unitedpixelworkers.com/

41. @media screen and (min-width: 640px) {
.section1, .section2 {
float: left;
width: 50%;
}
}

42. @media screen and (min-width: 640px) {
.section1, .section2 {
float: left;
width: 50%;
}
}

43. @media screen and (min-width: 40em) {
.section1, .section2 {
float: left;
width: 50%;
}
}

44. Why?

45. Mobile

46. 45%
of American adults
own a smartphone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

47. 40%
have a cell phone that’s
not a smartphone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

48. 17%
do most of their online browsing
on their phone
http://pewinternet.org/Reports/2012/Smartphone-Update-Sept-2012.aspx

49. Content Parity

50. www.consumerreports.org/

54. The beauty of the web is its openness.
Don’t arbitrarily lock people out because
of browser, device or configuration.
- Brad Frost
@brad_frost

55. http://www.geico.com/

63. Access

64. http://www.unheap.com/

65. Future-Friendly

66. Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL

67. Photo Credit: Rafel Miro via Creative Commons http://flic.kr/p/8KSGt7

68. Sony PSP-1000, Photo credit: Anna Debenham via Creative Commons http://flic.kr/p/dpGnUj

69. Nokia 95-3, Photo credit: Jonathan Greene via Creative Commons http://flic.kr/p/4nGFUd

70. Responsive Design

71. Context of Use

72. Photo credit: Mith Huang via Creative Commons http://flic.kr/p/9B7A4c

73. Photo credit: Kai Chan Vong via Creative Commons http://flic.kr/p/5c4Sfv

74. Photo credit: Carlos Smith via Creative Commons http://flic.kr/p/8tLb4P

75. Photo credit: Pete Markham via Creative Commons http://flic.kr/p/2zvrrJ

76. Assumptions

77. Photo credit: Wendi Dunlap via Creative Commons http://flic.kr/p/vMJM6

78. Photo credit: Channy Yun via Creative Commons http://flic.kr/p/51QJr6

79. Photo credit: Matt Hamm via Creative Commons http://flic.kr/p/EyrLG

80. Mobile First

84. Mobile use case: I just transferred money
at my desk using my phone because
logging into my banking app requires
fewer steps.
- Stephanie Rieger
@stephanierieger

85. Make it work better for everybody.

86. Touchscreen

87. Touch

88. Hover

89. Swipe

90. Navigation

91. Top Navigation

92. http://www.gravitatedesign.com

93. http://www.gravitatedesign.com

94. http://www.tuj.ac.jp/

95. http://www.tuj.ac.jp/

96. Footer Navigation

97. http://contentsmagazine.com/

98. http://contentsmagazine.com/

99. <div id="site-nav">
<form> ... </form>
! <nav>
! ! <ul class="nav nav-primary">
! ! ! <li><a href="#">Archive</a></li>
! ! ! <li><a href="#">About</a></li>
! ! ! <li><a href="#">Write For Us</a></li>
! ! ! <li><a href="#">Subscribe</a></li>! ! !
! ! </ul>
! </nav>
</div>

100. @media screen and (min-width: 48em) {
! #site-nav {
! ! position: absolute;
! ! top: -5em;
! ! width: 100%;
! ! z-index: 5;
! }
}

101. http://contentsmagazine.com/

102. Toggle Navigation

103. http://starbucks.com/

104. http://starbucks.com/

105. http://starbucks.com/

106. Left Nav Flyout

107. http://www.emerilsrestaurants.com

108. http://www.emerilsrestaurants.com

109. http://www.emerilsrestaurants.com

110. Breakpoints

111. Illustration credit: Ruth Leth Andersen via Creative Commons http://flic.kr/p/bmbZgo

112. Photo credit: Brad Frost via Creative Commons http://flic.kr/p/cfQwL7

113. Design Process

114. Design
Develop

115. Prototyping

116. Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm

117. Frameworks

118. http://foundation.zurb.com/

119. http://foundation.zurb.com/

120. http://foundation.zurb.com/

121. http://foundation.zurb.com/

122. http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/

123. http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/

124. http://zurb.net/zurbwired2011/projects/zurbwired2011/frame/prototype/public/

125. http://foundation.zurb.com/docs/forms.php

126. http://foundation.zurb.com/docs/buttons.php

127. http://foundation.zurb.com/docs/typography.php

128. http://www.getswizzle.com/

129. http://www.getswizzle.com/

130. http://www.getswizzle.com/

131. Style Tiles

132. Communicate the
essence of a visual brand
for the web

133. Style Tiles via Creative Commons http://styletil.es/

134. help form a
common visual language
between the designers
and the stakeholders

135. Style Tiles via Creative Commons http://styletil.es/

136. Testing

137. Clarissa Peterson via Creative Commons (CC BY-NC-SA 2.0)

138. Examples

139. http://worldwildlife.org/

140. http://worldwildlife.org/

141. http://worldwildlife.org/

142. http://emerilsrestaurants.com/

143. http://emerilsrestaurants.com/

144. http://emerilsrestaurants.com/

145. http://emerilsrestaurants.com/

146. http://www.oxideinteractive.com.au/

147. http://www.oxideinteractive.com.au/

148. http://www.oxideinteractive.com.au/

149. http://www.wm.edu/

150. http://www.wm.edu/

151. http://www.wm.edu/

152. Responsive Web Design
1. Give everybody the same content
2. Displayed appropriately for their
device
3. No matter what device they have

153. There is no Mobile Web. There is only
The Web, which we view in different
ways. There is also no Desktop Web. Or
Tablet Web.
- Stephen Hay
@stephenhay

154. Resources

155. A Few More Examples of Responsive Design
Boston Globe http://www.bostonglobe.com
Smashing Magazine http://www.smashingmagazine.com
People (mobile site) http://m.people.com
Disney http://disney.com/
Mashable (beta) http://beta.mashable.com/
Stuff & Nonsense http://www.stuffandnonsense.co.uk/
Google Nexus http://www.google.com/nexus/
Hotellweb http://www.hotellweb.no/?lang=en_US
Andersson-Wise Architects http://www.anderssonwise.com
WordPress Theme: Twenty Twelve http://twentytwelvedemo.wordpress.com/

156. Articles
Responsive Web Design - Ethan Marcotte (May 2010)
http://www.alistapart.com/articles/responsive-web-design/
En français: Le Web Design Réactif
http://gobanclub.net/2010/11/17/responsive_webdesign_ethan_marcotte_trad_fr/
How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012)
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Presidential Smackdown Edition: Separate Mobile Website Vs.
Responsive Website - Brad Frost (Aug. 2012)
http://mobile.smashingmagazine.com/2012/08/22/separate-mobile-responsive-website-presidential-
smackdown/

157. Prototyping & Design Process
Dive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
Design Process In The Responsive Age (Drew Clemons) - May 2012
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Responsive Web Design Sketch Sheets
http://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Style Tiles
http://styletil.es/

158. Frameworks
Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained
(Joshua Johnson) - August 2012
http://designshack.net/articles/css/which-is-right-for-me-22-responsive-css-frameworks-and-boilerplates-
explained/
15 More Responsive CSS Frameworks & Boilerplates Worth Considering - August
2012
http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/

159. Navigation
Responsive Navigation Patterns (Brad Frost) - February 2012
http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012
http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) -
October 2012
http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/
10 Responsive Navigation Solutions and Tutorials - August 2012
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/

160. Other Websites & Misc.
@RWD
links about responsive design (Ethan Marcotte)
https://twitter.com/RWD
Future Friendly
making things that are future-friendly
http://futurefriend.ly/
Brad Frost
blog that covers responsive design
http://bradfrostweb.com/blog/
Mediaqueri.es
inspirational websites using media queries and responsive web design
http://mediaqueri.es/

161. Books
Responsive Web Design
Ethan Marcotte (2011)
http://www.abookapart.com/products/responsive-web-design/
En français
http://www.editions-eyrolles.com/Livre/9782212133318/responsive-web-design
Mobile First
Luke Wroblewski (2011)
http://www.abookapart.com/products/mobile-first
En français
http://www.editions-eyrolles.com/Livre/9782212134063/mobile-first

162. Thanks!
Clarissa Peterson
clarissapeterson.com
mail@clarissapeterson.com
@clarissa