Responsive Design in the Real World

Responsive Design
       In the Real World




@clarissa
What We’ll Cover:
     Frameworks
  Navigation Patterns
    Preprocessors
       Polyfills
Illustration credit: Anna Debenham via Creative Commons http://flic.kr/p/dtMQTL
Responsive Design
http://bostonglobe.com
http://bostonglobe.com
http://bostonglobe.com
Frameworks
Photo Credit: Garreth Wilcock via Creative Commons http://flic.kr/p/aDJVzT
Photo Credit: Matti Mattila via Creative Commons http://flic.kr/p/buX4Sb
http://foundation.zurb.com/
http://foundation.zurb.com/
http://foundation.zurb.com/
http://foundation.zurb.com/
http://foundation.zurb.com/grid-example1.php
http://bonbonsbakery.com.au/
http://bonbonsbakery.com.au/
http://bonbonsbakery.com.au/
http://bonbonsbakery.com.au/
<div class="row">
  <div class="twelve columns">
    ...
  </div>
</div>
<div class="row">
  <div class="three columns">
    ...
  </div>
  <div class="nine columns">
    ...
  </div>
</div>
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"
Design Process
Photo Credit: Clarissa Peterson via Creative Commons http://flic.kr/p/35Ahx
Design   Develop
Photo Credit: Chris Gladis via Creative Commons http://flic.kr/p/rZVTg
Design


Develop
Illustration credit: podluzny via Creative Commons http://flic.kr/p/cJJdzm
Responsive Prototypes
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/prototype-example2.php
http://foundation.zurb.com/docs/typography.php
http://foundation.zurb.com/docs/forms.php
http://foundation.zurb.com/docs/buttons.php
http://twitter.github.com/bootstrap/index.html
http://www.getskeleton.com
http://stuffandnonsense.co.uk/projects/320andup/
Navigation Patterns
http://bradfrost.github.com/this-is-responsive/patterns.html
http://www.gravitatedesign.com
http://www.gravitatedesign.com
http://www.gravitatedesign.com
http://www.temple.edu/
http://www.temple.edu/
http://www.temple.edu/
Toggle Navigation
http://www.starbucks.com/
http://starbucks.com/
http://starbucks.com/
http://starbucks.com/
http://starbucks.com/
http://codepen.io/bradfrost/full/sHvaz
http://codepen.io/bradfrost/full/sHvaz
<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>
http://codepen.io/bradfrost/full/sHvaz
<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>
.js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}
.js nav[role=navigation] {
! overflow: hidden;
! max-height: 0;
}
nav[role=navigation].active {
! max-height: 15em;
}
<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>
http://codepen.io/bradfrost/full/sHvaz
http://codepen.io/bradfrost/full/sHvaz
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}
@media screen and (min-width: 48.25em) {
! a.menu-link {
! ! display: none;
! }
! .js nav[role=navigation] {
! ! max-height: none;
! }
}
Left Nav Flyout
http://www.emerilsrestaurants.com
http://www.emerilsrestaurants.com
http://www.emerilsrestaurants.com
Preprocessors
http://sass-lang.com/ and http://lesscss.org/
Syntactic Sugar



Photo Credit: Umberto Salvagnin via Creative Commons http://flic.kr/p/dmtR5
Photo Credit: Rinina25 and Twice25 via Creative Commons
http://commons.wikimedia.org/wiki/File:Saluzzo-Castello_della_Manta-mago.jpg
Sass
Math



Photo Credit: João Trindade via Creative Commons http://flic.kr/p/7DuvV4
.sidebar {
  width: percentage(360px / 960px);
}
.sidebar {
  width: 37.5%;
}
Nesting




Photo Credit: Prem Sichanugrist via Creative Commons http://flic.kr/p/KPo5A
#navbar {
  width: 80%;
  height: 23px;
}
#navbar ul {
  list-style-type: none;
}
#navbar li {
  float: left;
}
#navbar {
  width: 80%;
  height: 23px;
  ul {
    list-style-type: none;
  }
  li {
    float: left;
  }
}
#navbar {
  width: 80%;
  height: 23px;
  ul {
    list-style-type: none;
  }
  li {
    float: left;
  }
}
#navbar {
  width: 80%;
  height: 23px;
  ul {
    list-style-type: none;
  }
  li {
    float: left;
  }
}
#navbar {
  width: 80%;
  height: 23px;
}
#navbar ul {
  list-style-type: none;
}
#navbar li {
  float: left;
}
@media Bubbling



Photo Credit: John McWhirter via Creative Commons http://flic.kr/p/7ujLsh
.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;
  }
}
.profile-pic {
  float: left;
  width: 100px;
  @media screen and (min-width: 320px) {
    width: 250px;
  }
  @media screen and (min-width: 1200px) {
    float: none;
  }
}
.profile-pic {
  float: left;
  width: 100px;
  @media screen and (min-width: 320px) {
    width: 250px;
  }
  @media screen and (min-width: 1200px) {
    float: none;
  }
}
.profile-pic {
  float: left;
  width: 100px;
  @media screen and (min-width: 320px) {
    width: 250px;
  }
  @media screen and (min-width: 1200px) {
    float: none;
  }
}
.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;
  }
}
Variables
$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;
  }
}
Polyfills
http://modernizr.com/
<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">
<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">
<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">
.no-cssgradients {
  ...
}
https://github.com/scottjehl/Respond
<!--[if lte IE 8]>
<script src=”js/respond.min.js”/></script>
<![endif]-->
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Resources
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/
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/
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/
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
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/
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/
@clarissa
clarissapeterson.com
1 of 108

Recommended

Responsive Design Tools & Resources by
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
4.1K views177 slides
Responsive Design in WordPress by
Responsive Design in WordPressResponsive Design in WordPress
Responsive Design in WordPressThad Allender
2.8K views61 slides
Responsive Design Workshop by
Responsive Design WorkshopResponsive Design Workshop
Responsive Design WorkshopClarissa Peterson
8.9K views398 slides
Introduction to Responsive Web Design by
Introduction to Responsive Web DesignIntroduction to Responsive Web Design
Introduction to Responsive Web DesignClarissa Peterson
23.5K views152 slides
Responsive Design by
Responsive Design Responsive Design
Responsive Design Clarissa Peterson
12.7K views162 slides
Responsive Design Essentials by
Responsive Design EssentialsResponsive Design Essentials
Responsive Design EssentialsClarissa Peterson
17.3K views125 slides

More Related Content

What's hot

Responsive Design Tools & Resources by
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & ResourcesClarissa Peterson
83.3K views188 slides
Responsive Web Design by
Responsive Web DesignResponsive Web Design
Responsive Web DesignTung Dang
1.4K views66 slides
RESS: An Evolution of Responsive Web Design by
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignDave Olsen
25.3K views73 slides
Mobile First Responsive Web Design — BD Conf Oct 2013 by
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013Jason Grigsby
54.4K views173 slides
Responsive Websites by
Responsive WebsitesResponsive Websites
Responsive WebsitesJoe Seifi
19.4K views86 slides
CSS Tricks for WordPress - WordCamp Phoenix by
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixSara Cannon
15.4K views67 slides

What's hot(20)

Responsive Design Tools & Resources by Clarissa Peterson
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
Clarissa Peterson83.3K views
Responsive Web Design by Tung Dang
Responsive Web DesignResponsive Web Design
Responsive Web Design
Tung Dang1.4K views
RESS: An Evolution of Responsive Web Design by Dave Olsen
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
Dave Olsen25.3K views
Mobile First Responsive Web Design — BD Conf Oct 2013 by Jason Grigsby
Mobile First Responsive Web Design — BD Conf Oct 2013Mobile First Responsive Web Design — BD Conf Oct 2013
Mobile First Responsive Web Design — BD Conf Oct 2013
Jason Grigsby54.4K views
Responsive Websites by Joe Seifi
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi19.4K views
CSS Tricks for WordPress - WordCamp Phoenix by Sara Cannon
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
Sara Cannon15.4K views
Controlling Web Typography by Trent Walton
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
Trent Walton4.9K views
10 Simple Rules for Making My Site Accessible by Helena Zubkow
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
Helena Zubkow3.1K views
Responsive Email Design and Development by ladyheatherly
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
ladyheatherly1.6K views
Content Strategy for Responsive Websites by Clarissa Peterson
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
Clarissa Peterson10.5K views
Wordpress for Newbies 2010-03-27 by Shannon Smith
Wordpress for Newbies 2010-03-27Wordpress for Newbies 2010-03-27
Wordpress for Newbies 2010-03-27
Shannon Smith5.2K views
LESS by Joe Seifi
LESSLESS
LESS
Joe Seifi13.4K views
How to use CSS3 in WordPress by Suzette Franck
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
Suzette Franck6.1K views
Optimizing User Experience with Responsive Web Design by Clarissa Peterson
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
Clarissa Peterson30.2K views
FITC Spotlight HTML5 - The state of the web by Frédéric Harper
FITC Spotlight HTML5 - The state of the webFITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the web
Frédéric Harper1.8K views
Responsive Design for Non-Techies by Malcolm Jones
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
Malcolm Jones6.7K views

Viewers also liked

Responsive & Responsible Web Design in DNN by
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNgravityworksdd
7.8K views58 slides
Prototyping for responsive web design by
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design mrscammels
11.5K views29 slides
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012 by
Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012Romain Fonnier
1.8K views14 slides
Classement de la fréquentation des applications mobile OJD - Avril 2013 by
Classement de la fréquentation des applications mobile OJD - Avril 2013Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013Romain Fonnier
2.9K views5 slides
L’iPad à l’école : usages, avantages et défis by
L’iPad à l’école : usages,  avantages et défisL’iPad à l’école : usages,  avantages et défis
L’iPad à l’école : usages, avantages et défisnawras.univers
2.5K views56 slides
The web you were used to is gone. Architecture and strategy for your mobile c... by
The web you were used to is gone. Architecture and strategy for your mobile c...The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...Alberta Soranzo
25.5K views60 slides

Viewers also liked(20)

Responsive & Responsible Web Design in DNN by gravityworksdd
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
gravityworksdd7.8K views
Prototyping for responsive web design by mrscammels
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
mrscammels11.5K views
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012 by Romain Fonnier
Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012Les usages associés aux tablettes tactiles  - GESTE - Mediametrie - Mars 2012
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
Romain Fonnier1.8K views
Classement de la fréquentation des applications mobile OJD - Avril 2013 by Romain Fonnier
Classement de la fréquentation des applications mobile OJD - Avril 2013Classement de la fréquentation des applications mobile OJD - Avril 2013
Classement de la fréquentation des applications mobile OJD - Avril 2013
Romain Fonnier2.9K views
L’iPad à l’école : usages, avantages et défis by nawras.univers
L’iPad à l’école : usages,  avantages et défisL’iPad à l’école : usages,  avantages et défis
L’iPad à l’école : usages, avantages et défis
nawras.univers2.5K views
The web you were used to is gone. Architecture and strategy for your mobile c... by Alberta Soranzo
The web you were used to is gone. Architecture and strategy for your mobile c...The web you were used to is gone. Architecture and strategy for your mobile c...
The web you were used to is gone. Architecture and strategy for your mobile c...
Alberta Soranzo25.5K views
How to Get Started in Mobile Marketing by SIXTY
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile Marketing
SIXTY1.9K views
Etat des lieux du mobile en France et en Europe by Mediamaispasque
Etat des lieux du mobile en France et en EuropeEtat des lieux du mobile en France et en Europe
Etat des lieux du mobile en France et en Europe
Mediamaispasque2.5K views
Mobile Marketing Trend Report - AUG 2012 by Daniel Wood
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012
Daniel Wood3.6K views
Baromètre mobile marketing association France mai 2013 by Thierry Pires
Baromètre mobile marketing association France mai 2013Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013
Thierry Pires6.4K views
Mobile Marketing Stats Automotive Dealers Should Know by creativeeyeball
Mobile Marketing Stats Automotive Dealers Should KnowMobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should Know
creativeeyeball1.1K views
Placecast - E-commerce Paris 2012 by Petit Web
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012
Petit Web2.1K views
Digital Liberation: The Future Auto Experience by Brian Regienczuk
Digital Liberation: The Future Auto ExperienceDigital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto Experience
Brian Regienczuk3.5K views
3eme observatoire de l'internet mobile 2011 by servicesmobiles.fr
3eme observatoire de l'internet mobile 20113eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 2011
servicesmobiles.fr3.8K views
SEO for Mobile Apps by Abdul Malick
SEO for Mobile AppsSEO for Mobile Apps
SEO for Mobile Apps
Abdul Malick3.2K views
On your mark, get set, mobile by Tiffany Beker
On your mark, get set, mobileOn your mark, get set, mobile
On your mark, get set, mobile
Tiffany Beker7.1K views
Mobile is not mobile - 7 phénomènes disruptifs* à prévoir dans l’entreprise by servicesmobiles.fr
Mobile is not mobile - 7 phénomènes disruptifs* à prévoir dans l’entrepriseMobile is not mobile - 7 phénomènes disruptifs* à prévoir dans l’entreprise
Mobile is not mobile - 7 phénomènes disruptifs* à prévoir dans l’entreprise
Growth Hacking, Disrupt the Business with Mobile! by TheFamily
Growth Hacking, Disrupt the Business with Mobile! Growth Hacking, Disrupt the Business with Mobile!
Growth Hacking, Disrupt the Business with Mobile!
TheFamily16.6K views
I've got 10 million songs in my pocket. Now what? by Paul Lamere
I've got 10 million songs in my pocket. Now what? I've got 10 million songs in my pocket. Now what?
I've got 10 million songs in my pocket. Now what?
Paul Lamere10.1K views

Similar to Responsive Design in the Real World

CSS3: Are you experienced? by
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?Denise Jacobs
18.4K views147 slides
Making Links Magical Again with CSS by
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSSJenn Lukas
2.9K views116 slides
Beyond CSS Architecture by
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture拓樹 谷
11.2K views109 slides
Core CSS3 by
Core CSS3Core CSS3
Core CSS3Rachel Andrew
2.3K views78 slides
The Creative New World of CSS by
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSSRachel Andrew
2K views144 slides
CSS3 Takes on the World by
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the WorldJonathan Snook
1.5K views54 slides

Similar to Responsive Design in the Real World(20)

CSS3: Are you experienced? by Denise Jacobs
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
Denise Jacobs18.4K views
Making Links Magical Again with CSS by Jenn Lukas
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSS
Jenn Lukas2.9K views
Beyond CSS Architecture by 拓樹 谷
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
拓樹 谷11.2K views
The Creative New World of CSS by Rachel Andrew
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
Rachel Andrew2K views
Progressive Enhancement 2.0 (Conference Agnostic) by Nicholas Zakas
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas42.5K views
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event by Robert Nyman
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile EventHTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
Robert Nyman15.1K views
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event by Robert Nyman
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
Robert Nyman4.5K views
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design by Frédéric Harper
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your designSCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
Frédéric Harper1.3K views
GOTO Berlin - You can use CSS for that by Rachel Andrew
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
Rachel Andrew1.3K views
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011) by Nicholas Zakas
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas10.1K views
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich by Robert Nyman
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference ZürichHTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
Robert Nyman5.7K views
Html5 Whats around the bend by Raj Lal
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
Raj Lal2.5K views
Quality Development with CSS3 by Shay Howe
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3
Shay Howe12.1K views
Una web todos los dispositivos. by philogb
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.
philogb950 views
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25 by Frédéric Harper
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
Frédéric Harper700 views

More from Clarissa Peterson

Alt Text Is Your Superpower by
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your SuperpowerClarissa Peterson
18 views48 slides
Designing for Users: How to Create a Better User Experience by
Designing for Users: How to Create a Better User ExperienceDesigning for Users: How to Create a Better User Experience
Designing for Users: How to Create a Better User ExperienceClarissa Peterson
2.3K views93 slides
Creating Beautiful, Accessible, and User-Friendly Forms by
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsClarissa Peterson
27K views172 slides
Making the Web Easy by
Making the Web EasyMaking the Web Easy
Making the Web EasyClarissa Peterson
23.6K views162 slides
Responsive Color by
Responsive ColorResponsive Color
Responsive ColorClarissa Peterson
21.6K views139 slides
UX & Responsive Design by
UX & Responsive DesignUX & Responsive Design
UX & Responsive DesignClarissa Peterson
3.9K views99 slides

More from Clarissa Peterson(7)

Recently uploaded

The Report is Dead, Long Live the Report ! Communicating Usability Research F... by
The Report is Dead, Long Live the Report ! Communicating Usability Research F...The Report is Dead, Long Live the Report ! Communicating Usability Research F...
The Report is Dead, Long Live the Report ! Communicating Usability Research F...Centralis
5 views72 slides
polaris by
polarispolaris
polarisscribddarkened352
240 views13 slides
Anti -Parkinsonian Drugs-Medicinal Chemistry by
Anti -Parkinsonian Drugs-Medicinal ChemistryAnti -Parkinsonian Drugs-Medicinal Chemistry
Anti -Parkinsonian Drugs-Medicinal ChemistryNarminHamaaminHussen
19 views36 slides
Menu.pdf by
Menu.pdfMenu.pdf
Menu.pdfnyhapedraza
10 views7 slides
Anti-Cancer Drugs-Medicinal Chemistry by
Anti-Cancer Drugs-Medicinal ChemistryAnti-Cancer Drugs-Medicinal Chemistry
Anti-Cancer Drugs-Medicinal ChemistryNarminHamaaminHussen
9 views41 slides
FIESTAS DE QUITO.pdf by
FIESTAS DE QUITO.pdfFIESTAS DE QUITO.pdf
FIESTAS DE QUITO.pdfeluniversocom
20 views8 slides

Recently uploaded(20)

The Report is Dead, Long Live the Report ! Communicating Usability Research F... by Centralis
The Report is Dead, Long Live the Report ! Communicating Usability Research F...The Report is Dead, Long Live the Report ! Communicating Usability Research F...
The Report is Dead, Long Live the Report ! Communicating Usability Research F...
Centralis5 views
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf by NirmalanGanapathy1
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdfIEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
IEC 600068-2-39 ENVIROMENT TESTING COMBINED TEMPERATURE LOW HUMIDTY.pdf
Oregon Ducks 4 Spencer Webb Hoodie by brandshop1
Oregon Ducks 4 Spencer Webb HoodieOregon Ducks 4 Spencer Webb Hoodie
Oregon Ducks 4 Spencer Webb Hoodie
brandshop113 views
StratPlanning Manual 220713.pdf by Lakewalk Media
StratPlanning Manual 220713.pdfStratPlanning Manual 220713.pdf
StratPlanning Manual 220713.pdf
Lakewalk Media19 views
Using Experiential Design to Understand the Future of AI & Immersive Storytel... by Kent Bye
Using Experiential Design to Understand the Future of AI & Immersive Storytel...Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Using Experiential Design to Understand the Future of AI & Immersive Storytel...
Kent Bye10 views
Sudden Deafness Design Document by wyfangherman
Sudden Deafness Design DocumentSudden Deafness Design Document
Sudden Deafness Design Document
wyfangherman50 views
217 Drive - All on upper.pptx by vidstor282
217 Drive - All on upper.pptx217 Drive - All on upper.pptx
217 Drive - All on upper.pptx
vidstor28216 views

Responsive Design in the Real World