Presentation to: Chicago Web Professionals Meetup Group - February 12, 2013. Responsive Web Design NYC Meetup - January 22, 2013.

1. Learning the Essentials
to Design Responsively
Responsive Web Design NYC Meetup
January 22, 2013 - New York City
Clarissa Peterson
clarissapeterson.com
@clarissa

2. "So you’re going to make websites
work better on mobile phones?
Because right now they mostly all suck."
- my friend who's not a web designer

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

4. Fixed-width Site

7. Separate Mobile Site

10. One Website

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

19. Responsive Design

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

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

26. div {
width: 25%;
float: left;
}

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

28. img, object, video {
max-width: 100%
}

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

32. http://www.unitedpixelworkers.com/

33. http://www.unitedpixelworkers.com/

34. http://www.unitedpixelworkers.com/

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

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

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

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

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

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

44. min-device-width: 00px
max-device-width: 00px
orientation: landscape
orientation: portrait
device-aspect-ratio: 16/9
min-color-index: 256
min-resolution: 300dpi

45. Existing Site

46. target ÷ context = result

47. #heading {
! width: 960px;
}

48. #heading {
! width: 75%; /* 960px / 1280px */
}

49. Flexible Typesetting

50. .nav {
! font-size: 22px;
}

51. .nav {
! font-size: 1.375em; /* 22px / 16px */
}

52. Small-Screen First
(Mobile First)

56. 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

57. Navigation

58. http://bradfrost.github.com/this-is-responsive/patterns.html

59. http://www.gravitatedesign.com

60. http://www.gravitatedesign.com

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

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

63. http://contentsmagazine.com/

64. http://contentsmagazine.com/

65. http://contentsmagazine.com/

66. http://starbucks.com/

67. http://starbucks.com/

68. http://starbucks.com/

69. http://starbucks.com/

70. http://www.emerilsrestaurants.com

71. http://www.emerilsrestaurants.com

72. http://www.emerilsrestaurants.com

73. Design Process

74. Content

75. Design
Develop

76. Prototyping

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

78. Frameworks

79. http://foundation.zurb.com/

80. http://foundation.zurb.com/

81. http://foundation.zurb.com/

82. http://foundation.zurb.com/

83. http://foundation.zurb.com/prototype-example2.php

84. http://foundation.zurb.com/prototype-example2.php

85. http://foundation.zurb.com/prototype-example2.php

86. http://foundation.zurb.com/prototype-example2.php

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

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

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

90. Testing

91. Touch

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

93. "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

94. Examples

95. http://worldwildlife.org/

96. http://worldwildlife.org/

97. http://worldwildlife.org/

98. http://worldwildlife.org/

99. http://worldwildlife.org/

100. http://worldwildlife.org/

101. http://emerilsrestaurants.com/

102. http://emerilsrestaurants.com/

103. http://emerilsrestaurants.com/

104. http://emerilsrestaurants.com/

105. http://emerilsrestaurants.com/

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

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

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

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

110. http://www.wm.edu/

111. http://www.wm.edu/

112. http://www.wm.edu/

113. http://www.wm.edu/

114. http://www.hsgac.senate.gov

115. http://www.hsgac.senate.gov

116. http://www.hsgac.senate.gov

117. http://www.hsgac.senate.gov

118. http://www.hsgac.senate.gov

119. Resources

120. Books
Responsive Web Design
Ethan Marcotte (2011)
http://www.abookapart.com/products/responsive-web-design/
Mobile First
Luke Wroblewski (2011)
http://www.abookapart.com/products/mobile-first
Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement
Aaron Gustafson (2011)
http://easy-readers.net/books/adaptive-web-design/
Implementing Responsive Design: Building sites for an anywhere, everywhere web
Tim Kadlec (2012)
http://www.implementingresponsivedesign.com/
Content Strategy for Mobile
Karen McGrane (2012)
http://www.abookapart.com/products/content-strategy-for-mobile

121. Articles
Responsive Web Design - Ethan Marcotte (May 2010)
http://www.alistapart.com/articles/responsive-web-design/
Responsive-Ready Content - Sara Wachter-Boettcher (March 2012)
http://sarawb.com/2012/03/07/content-strategy-responsive-design/
How to Approach a Responsive Design (Boston Globe) - Tito Bottitta (Jan. 2012)
http://upstatement.com/blog/2012/01/how-to-approach-a-responsive-design/
Design Process In The Responsive Age - Drew Clemons (May 2012)
http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Dive into Responsive Prototyping with Foundation - Jonathan Smiley (April 2012)
http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/

122. Frameworks & Navigation
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 - Aug. 2012
http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
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/

123. 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/
Responsive Resources
A collection of resources about the various aspects of responsive web design.
http://bradfrost.github.com/this-is-responsive/resources.html
Mediaqueri.es
Inspirational websites using media queries and responsive web design.
http://mediaqueri.es/

124. Advanced Responsive Design Topics
To learn more about frameworks, navigation patterns, preprocessors, responsive
images, responsive tables, and polyfills, check out my slides from:
Responsive Design Tools & Resources
http://www.slideshare.net/clarissapeterson/responsive-design-tools-resources-16066514

125. Find me online:
clarissapeterson.com
@clarissa