1.
Responsive Design
In the Real World
@clarissa

2.
What We’ll Cover:
Frameworks
Navigation Patterns
Preprocessors
Polyfills

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

4.
Responsive Design

5.
http://bostonglobe.com

6.
http://bostonglobe.com

7.
http://bostonglobe.com

8.
Frameworks

9.
Photo Credit: Garreth Wilcock via Creative Commons http://flic.kr/p/aDJVzT

10.
Photo Credit: Matti Mattila via Creative Commons http://flic.kr/p/buX4Sb

11.
http://foundation.zurb.com/

12.
http://foundation.zurb.com/

13.
http://foundation.zurb.com/

14.
http://foundation.zurb.com/

15.
http://foundation.zurb.com/grid-example1.php

16.
http://bonbonsbakery.com.au/

17.
http://bonbonsbakery.com.au/

18.
http://bonbonsbakery.com.au/

19.
http://bonbonsbakery.com.au/

20.
<div class="row">
<div class="twelve columns">
...
</div>
</div>
<div class="row">
<div class="three columns">
...
</div>
<div class="nine columns">
...
</div>
</div>

21.
class="show-for-xlarge"
class="show-for-large"
class="show-for-large-up"
(etc.)
class="hide-for-xlarge"
class="show-for-landscape"
class="show-for-portrait"
class="show-for-touch"
class="hide-for-touch"

22.
Design Process

23.
Photo Credit: Clarissa Peterson via Creative Commons http://flic.kr/p/35Ahx

24.
Design Develop

25.
Photo Credit: Chris Gladis via Creative Commons http://flic.kr/p/rZVTg

26.
Design
Develop

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

28.
Responsive Prototypes

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

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

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

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

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

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

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

36.
http://twitter.github.com/bootstrap/index.html

37.
http://www.getskeleton.com

38.
http://stuffandnonsense.co.uk/projects/320andup/

39.
Navigation Patterns

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

41.
http://www.gravitatedesign.com

42.
http://www.gravitatedesign.com

43.
http://www.gravitatedesign.com

44.
http://www.temple.edu/

45.
http://www.temple.edu/

46.
http://www.temple.edu/

47.
Toggle Navigation

48.
http://www.starbucks.com/

49.
http://starbucks.com/

50.
http://starbucks.com/

51.
http://starbucks.com/

52.
http://starbucks.com/

53.
http://codepen.io/bradfrost/full/sHvaz

54.
http://codepen.io/bradfrost/full/sHvaz

55.
<a href="#menu" class="menu-link">Menu</a>
<nav class="" id="menu" role="navigation">
! <ul>
! ! <li><a href="#">Home</a></li>
! ! <li><a href="#">About</a></li>
! ! <li><a href="#">Products</a></li>
! ! <li><a href="#">Services</a></li>
! ! <li><a href="#">Contact</a></li>
! </ul>
</nav>

56.
http://codepen.io/bradfrost/full/sHvaz

57.
<a href="#menu" class="menu-link">Menu</a>
<nav class="" id="menu" role="navigation">
! <ul>
! ! <li><a href="#">Home</a></li>
! ! <li><a href="#">About</a></li>
! ! <li><a href="#">Products</a></li>
! ! <li><a href="#">Services</a></li>
! ! <li><a href="#">Contact</a></li>
! </ul>
</nav>

58.
.js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}

59.
.js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}

60.
<script>
(function() {
$(document).ready(function() {
$('body').addClass('js');
var $menu = $('#menu'),
$menulink = $('.menu-link');
$menulink.click(function() {
$menulink.toggleClass('active');
$menu.toggleClass('active');
return false;
});});
})();
</script>

61.
http://codepen.io/bradfrost/full/sHvaz

62.
http://codepen.io/bradfrost/full/sHvaz

63.
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}

64.
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}

65.
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}

66.
Left Nav Flyout

67.
http://www.emerilsrestaurants.com

68.
http://www.emerilsrestaurants.com

69.
http://www.emerilsrestaurants.com

70.
Preprocessors

71.
http://sass-lang.com/ and http://lesscss.org/

72.
Syntactic Sugar
Photo Credit: Umberto Salvagnin via Creative Commons http://flic.kr/p/dmtR5

73.
Photo Credit: Rinina25 and Twice25 via Creative Commons
http://commons.wikimedia.org/wiki/File:Saluzzo-Castello_della_Manta-mago.jpg

74.
Sass

75.
Math
Photo Credit: João Trindade via Creative Commons http://flic.kr/p/7DuvV4

76.
.sidebar {
width: percentage(360px / 960px);
}

77.
.sidebar {
width: 37.5%;
}

78.
Nesting
Photo Credit: Prem Sichanugrist via Creative Commons http://flic.kr/p/KPo5A

79.
#navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}

80.
#navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}

81.
#navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}

82.
#navbar {
width: 80%;
height: 23px;
ul {
list-style-type: none;
}
li {
float: left;
}
}

83.
#navbar {
width: 80%;
height: 23px;
}
#navbar ul {
list-style-type: none;
}
#navbar li {
float: left;
}

84.
@media Bubbling
Photo Credit: John McWhirter via Creative Commons http://flic.kr/p/7ujLsh

85.
.profile-pic {
float: left; width: 100px;
}
@media screen and (min-width: 320px) {
.profile-pic {
width: 250px;
}
}
@media screen and (min-width: 1200px) {
.profile-pic {
float: none;
}
}

86.
.profile-pic {
float: left;
width: 100px;
@media screen and (min-width: 320px) {
width: 250px;
}
@media screen and (min-width: 1200px) {
float: none;
}
}

87.
.profile-pic {
float: left;
width: 100px;
@media screen and (min-width: 320px) {
width: 250px;
}
@media screen and (min-width: 1200px) {
float: none;
}
}

88.
.profile-pic {
float: left;
width: 100px;
@media screen and (min-width: 320px) {
width: 250px;
}
@media screen and (min-width: 1200px) {
float: none;
}
}

89.
.profile-pic {
float: left; width: 100px;
}
@media screen and (min-width: 320px) {
.profile-pic {
width: 250px;
}
}
@media screen and (min-width: 1200px) {
.profile-pic {
float: none;
}
}

90.
Variables

91.
$break-small: 320px;
$break-large: 1200px;
.profile-pic {
float: left;
width: 100px;
@media screen and (min-width: $break-small) {
width: 250px;
}
@media screen and (min-width: $break-large) {
float: none;
}
}

92.
Polyfills

93.
http://modernizr.com/

94.
<html class=" js canvas canvastext
geolocation crosswindowmessaging no-
websqldatabase indexeddb hashchange
historymanagement draganddrop websockets
rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients no-
cssreflections csstransforms no-
csstransforms3d csstransitions video
audio localstorage sessionstorage
webworkers applicationcache svg smil
svgclippaths fontface">

95.
<html class=" js canvas canvastext
geolocation crosswindowmessaging no-
websqldatabase indexeddb hashchange
historymanagement draganddrop websockets
rgba hsla multiplebgs backgroundsize
borderimage borderradius boxshadow opacity
cssanimations csscolumns cssgradients no-
cssreflections csstransforms no-
csstransforms3d csstransitions video
audio localstorage sessionstorage
webworkers applicationcache svg smil
svgclippaths fontface">

96.
<HTML class=" js no-canvas no-canvastext
no-geolocation no-crosswindowmessaging no-
websqldatabase no-indexeddb no-hashchange
no-historymanagement draganddrop no-
websockets no-rgba no-hsla no-multiplebgs
no-backgroundsize no-borderimage no-
borderradius no-boxshadow no-opacity no-
cssanimations no-csscolumns no-
cssgradients no-cssreflections no-
csstransforms no-csstransforms3d no-
csstransitions fontface no-video no-audio
no-localstorage no-sessionstorage no-
webworkers no-applicationcache no-svg no-
smil no-svgclippaths">

97.
.no-cssgradients {
...
}

98.
https://github.com/scottjehl/Respond

99.
<!--[if lte IE 8]>
<script src=”js/respond.min.js”/></script>
<![endif]-->

100.
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

101.
Resources

102.
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/

103.
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/

104.
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 Responsive Navigation Solutions and Tutorials - August 2012
http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-
tutorials/
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/

105.
Preprocessors
Sass And LESS: An Introduction To CSS Preprocessors (Steven Bradley) - April 2012
http://www.vanseodesign.com/css/css-preprocessors/
An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September
2011
http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-
comparison-to-sass/
Responsive Web Design in Sass: Using Media Queries in Sass 3.2 (Mason Wendell)
- April 2012
http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-
queries-in-sass-32
Create faster fluid layouts with LESS (Paul Mist) - August 2012
http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less

106.
Books to Read
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/

107.
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/

108.
@clarissa
clarissapeterson.com