Responsive Design in the Real World
-
Upload
clarissa-peterson -
Category
Design
-
view
118 -
download
4
description
Transcript of Responsive Design in the Real World
![Page 1: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/1.jpg)
Responsive DesignIn the Real World
@clarissa
![Page 2: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/2.jpg)
What We’ll Cover:Frameworks
Navigation Patterns
Preprocessors
Polyfills
![Page 3: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/3.jpg)
Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
![Page 4: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/4.jpg)
Responsive Design
![Page 8: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/8.jpg)
Frameworks
![Page 9: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/9.jpg)
Photo Credit: Garreth Wilcock via Creative Commons http://flic.kr/p/aDJVzT
![Page 10: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/10.jpg)
Photo Credit: Matti Mattila via Creative Commons http://flic.kr/p/buX4Sb
![Page 15: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/15.jpg)
http://foundation.zurb.com/grid-example1.php
![Page 20: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/20.jpg)
<div class="row"> <div class="twelve columns"> ... </div></div><div class="row"> <div class="three columns"> ... </div> <div class="nine columns"> ... </div></div>
![Page 21: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/21.jpg)
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"
![Page 22: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/22.jpg)
Design Process
![Page 23: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/23.jpg)
Photo Credit: Clarissa Peterson via Creative Commons http://flic.kr/p/35Ahx
![Page 24: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/24.jpg)
Design Develop
![Page 25: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/25.jpg)
Photo Credit: Chris Gladis via Creative Commons http://flic.kr/p/rZVTg
![Page 26: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/26.jpg)
Design
Develop
![Page 27: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/27.jpg)
Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
![Page 28: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/28.jpg)
Responsive Prototypes
![Page 29: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/29.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 30: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/30.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 31: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/31.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 32: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/32.jpg)
http://foundation.zurb.com/prototype-example2.php
![Page 33: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/33.jpg)
http://foundation.zurb.com/docs/typography.php
![Page 34: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/34.jpg)
http://foundation.zurb.com/docs/forms.php
![Page 35: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/35.jpg)
http://foundation.zurb.com/docs/buttons.php
![Page 36: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/36.jpg)
http://twitter.github.com/bootstrap/index.html
![Page 38: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/38.jpg)
http://stuffandnonsense.co.uk/projects/320andup/
![Page 39: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/39.jpg)
Navigation Patterns
![Page 40: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/40.jpg)
http://bradfrost.github.com/this-is-responsive/patterns.html
![Page 47: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/47.jpg)
Toggle Navigation
![Page 53: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/53.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 54: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/54.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 55: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/55.jpg)
<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>
![Page 56: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/56.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 57: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/57.jpg)
<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>
![Page 58: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/58.jpg)
.js nav[role=navigation] { ! overflow: hidden;! max-height: 0;}nav[role=navigation].active { ! max-height: 15em;}
![Page 59: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/59.jpg)
.js nav[role=navigation] { ! overflow: hidden;! max-height: 0;}nav[role=navigation].active { ! max-height: 15em;}
![Page 60: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/60.jpg)
<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>
![Page 61: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/61.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 62: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/62.jpg)
http://codepen.io/bradfrost/full/sHvaz
![Page 63: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/63.jpg)
@media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
![Page 64: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/64.jpg)
@media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
![Page 65: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/65.jpg)
@media screen and (min-width: 48.25em) {! a.menu-link {! ! display: none;! }! .js nav[role=navigation] {! ! max-height: none;! }}
![Page 66: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/66.jpg)
Left Nav Flyout
![Page 67: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/67.jpg)
http://www.emerilsrestaurants.com
![Page 68: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/68.jpg)
http://www.emerilsrestaurants.com
![Page 69: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/69.jpg)
http://www.emerilsrestaurants.com
![Page 70: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/70.jpg)
Preprocessors
![Page 71: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/71.jpg)
http://sass-lang.com/ and http://lesscss.org/
![Page 72: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/72.jpg)
Photo Credit: Umberto Salvagnin via Creative Commons http://flic.kr/p/dmtR5
Syntactic Sugar
![Page 73: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/73.jpg)
Photo Credit: Rinina25 and Twice25 via Creative Commons http://commons.wikimedia.org/wiki/File:Saluzzo-Castello_della_Manta-mago.jpg
![Page 74: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/74.jpg)
Sass
![Page 75: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/75.jpg)
Photo Credit: João Trindade via Creative Commons http://flic.kr/p/7DuvV4
Math
![Page 76: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/76.jpg)
.sidebar { width: percentage(360px / 960px);}
![Page 77: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/77.jpg)
.sidebar { width: 37.5%; }
![Page 78: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/78.jpg)
Photo Credit: Prem Sichanugrist via Creative Commons http://flic.kr/p/KPo5A
Nesting
![Page 79: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/79.jpg)
#navbar { width: 80%; height: 23px; }#navbar ul { list-style-type: none; }#navbar li { float: left; }
![Page 80: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/80.jpg)
#navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
![Page 81: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/81.jpg)
#navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
![Page 82: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/82.jpg)
#navbar { width: 80%; height: 23px; ul { list-style-type: none; } li { float: left; }}
![Page 83: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/83.jpg)
#navbar { width: 80%; height: 23px; }#navbar ul { list-style-type: none; }#navbar li { float: left; }
![Page 84: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/84.jpg)
Photo Credit: John McWhirter via Creative Commons http://flic.kr/p/7ujLsh
@media Bubbling
![Page 85: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/85.jpg)
.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; } }
![Page 86: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/86.jpg)
.profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
![Page 87: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/87.jpg)
.profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
![Page 88: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/88.jpg)
.profile-pic { float: left; width: 100px; @media screen and (min-width: 320px) { width: 250px; } @media screen and (min-width: 1200px) { float: none; }}
![Page 89: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/89.jpg)
.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; } }
![Page 90: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/90.jpg)
Variables
![Page 91: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/91.jpg)
$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;
}
}
![Page 92: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/92.jpg)
Polyfills
![Page 94: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/94.jpg)
<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">
![Page 95: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/95.jpg)
<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">
![Page 96: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/96.jpg)
<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">
![Page 97: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/97.jpg)
.no-cssgradients { ...}
![Page 98: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/98.jpg)
https://github.com/scottjehl/Respond
![Page 99: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/99.jpg)
<!--[if lte IE 8]><script src=”js/respond.min.js”/></script><![endif]-->
![Page 100: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/100.jpg)
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 101: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/101.jpg)
Resources
![Page 102: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/102.jpg)
Frameworks
Which Is Right for Me? 22 Responsive CSS Frameworks and Boilerplates Explained (Joshua Johnson) - August 2012http://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 2012http://speckyboy.com/2012/08/21/15-more-responsive-css-frameworks-boilerplates-worth-considering/
![Page 103: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/103.jpg)
Prototyping & Design Process
Dive into Responsive Prototyping with Foundation (Jonathan Smiley) - April 2012http://www.alistapart.com/articles/dive-into-responsive-prototyping-with-foundation/
Design Process In The Responsive Age (Drew Clemons) - May 2012http://uxdesign.smashingmagazine.com/2012/05/30/design-process-responsive-age/
Responsive Web Design Sketch Sheetshttp://jeremypalford.com/arch-journal/responsive-web-design-sketch-sheets
Style Tileshttp://styletil.es/
![Page 104: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/104.jpg)
Navigation
Responsive Navigation Patterns (Brad Frost) - February 2012http://bradfrostweb.com/blog/web/responsive-nav-patterns/
Complex Navigation Patterns for Responsive Design (Brad Frost) - August 2012http://bradfrostweb.com/blog/web/complex-navigation-patterns-for-responsive-design/
10 Responsive Navigation Solutions and Tutorials - August 2012http://speckyboy.com/2012/08/29/10-responsive-navigation-solutions-and-tutorials/
10 Tips How To Handle Responsive Navigation Menus Successfully (Sabina Idler) - October 2012http://blog.usabilla.com/10-tips-how-to-handle-responsive-navigation-menus-successfully/
![Page 105: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/105.jpg)
Preprocessors
Sass And LESS: An Introduction To CSS Preprocessors (Steven Bradley) - April 2012http://www.vanseodesign.com/css/css-preprocessors/
An Introduction To LESS, And Comparison To Sass (Jeremy Hixon) - September 2011http://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 2012http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32
Create faster fluid layouts with LESS (Paul Mist) - August 2012http://www.netmagazine.com/tutorials/create-faster-fluid-layouts-less
![Page 106: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/106.jpg)
Books to Read
Responsive Web DesignEthan 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 EnhancementAaron Gustafson (2011)http://easy-readers.net/books/adaptive-web-design/
Implementing Responsive Design: Building sites for an anywhere, everywhere webTim Kadlec (2012)http://www.implementingresponsivedesign.com/
![Page 107: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/107.jpg)
Other Websites & Misc.
@RWDlinks about responsive design (Ethan Marcotte)https://twitter.com/RWD
Future Friendlymaking things that are future-friendlyhttp://futurefriend.ly/
Brad Frostblog that covers responsive designhttp://bradfrostweb.com/blog/
Mediaqueri.esinspirational websites using media queries and responsive web designhttp://mediaqueri.es/
![Page 108: Responsive Design in the Real World](https://reader033.fdocument.pub/reader033/viewer/2022051819/54c7493a4a7959da198b4627/html5/thumbnails/108.jpg)
@clarissa clarissapeterson.com