SlideShare une entreprise Scribd logo
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

Contenu connexe

Tendances

Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
Clarissa Peterson
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
Tung Dang
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
Dave Olsen
 
Mobile First Responsive Web Design — BD Conf Oct 2013
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 Grigsby
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
Joe Seifi
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
Sara Cannon
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
Clarissa Peterson
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
Trent Walton
 
Best of the Web V. V
Best of the Web V. VBest of the Web V. V
Best of the Web V. V
David Kapuler
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
Clarissa Peterson
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
Bart De Waele
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
Helena Zubkow
 
Responsive Email Design and Development
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
ladyheatherly
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
Clarissa Peterson
 
Wordpress for Newbies 2010-03-27
Wordpress for Newbies 2010-03-27Wordpress for Newbies 2010-03-27
Wordpress for Newbies 2010-03-27
Shannon Smith
 
LESS
LESSLESS
LESS
Joe Seifi
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
Suzette Franck
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
Clarissa Peterson
 
FITC Spotlight HTML5 - The state of the web
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 Harper
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
Malcolm Jones
 

Tendances (20)

Responsive Design Tools & Resources
Responsive Design Tools & ResourcesResponsive Design Tools & Resources
Responsive Design Tools & Resources
 
Responsive Web Design
Responsive Web DesignResponsive Web Design
Responsive Web Design
 
RESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web DesignRESS: An Evolution of Responsive Web Design
RESS: An Evolution of Responsive Web Design
 
Mobile First Responsive Web Design — BD Conf Oct 2013
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
 
Responsive Websites
Responsive WebsitesResponsive Websites
Responsive Websites
 
CSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp PhoenixCSS Tricks for WordPress - WordCamp Phoenix
CSS Tricks for WordPress - WordCamp Phoenix
 
Responsive Design Heaven & Hell
Responsive Design Heaven & HellResponsive Design Heaven & Hell
Responsive Design Heaven & Hell
 
Controlling Web Typography
Controlling Web TypographyControlling Web Typography
Controlling Web Typography
 
Best of the Web V. V
Best of the Web V. VBest of the Web V. V
Best of the Web V. V
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Responsive webdesign
Responsive webdesignResponsive webdesign
Responsive webdesign
 
10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible10 Simple Rules for Making My Site Accessible
10 Simple Rules for Making My Site Accessible
 
Responsive Email Design and Development
Responsive Email Design and DevelopmentResponsive Email Design and Development
Responsive Email Design and Development
 
Content Strategy for Responsive Websites
Content Strategy for Responsive WebsitesContent Strategy for Responsive Websites
Content Strategy for Responsive Websites
 
Wordpress for Newbies 2010-03-27
Wordpress for Newbies 2010-03-27Wordpress for Newbies 2010-03-27
Wordpress for Newbies 2010-03-27
 
LESS
LESSLESS
LESS
 
How to use CSS3 in WordPress
How to use CSS3 in WordPressHow to use CSS3 in WordPress
How to use CSS3 in WordPress
 
Optimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web DesignOptimizing User Experience with Responsive Web Design
Optimizing User Experience with Responsive Web Design
 
FITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the webFITC Spotlight HTML5 - The state of the web
FITC Spotlight HTML5 - The state of the web
 
Responsive Design for Non-Techies
Responsive Design for Non-TechiesResponsive Design for Non-Techies
Responsive Design for Non-Techies
 

En vedette

Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
gravityworksdd
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
mrscammels
 
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
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
 
Classement de la fréquentation des applications mobile OJD - Avril 2013
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
 
L’iPad à l’école : usages, avantages et défis
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.univers
 
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...
The web you were used to is gone. Architecture and strategy for your mobile c...
Alberta Soranzo
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile Marketing
SIXTY
 
Etat des lieux du mobile en France et en Europe
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
Mediamaispasque
 
Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012
Daniel Wood
 
Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013
Thierry Pires
 
Mobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should KnowMobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should Know
creativeeyeball
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012
Petit Web
 
Digital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto ExperienceDigital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto Experience
Brian Regienczuk
 
3eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 20113eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 2011servicesmobiles.fr
 
SEO for Mobile Apps
SEO for Mobile AppsSEO for Mobile Apps
SEO for Mobile Apps
Abdul Malick
 
Marketingcharts mobile-marketing-data-2011
Marketingcharts mobile-marketing-data-2011Marketingcharts mobile-marketing-data-2011
Marketingcharts mobile-marketing-data-2011
Recycling for Disadvantaged Children
 
On your mark, get set, mobile
On your mark, get set, mobileOn your mark, get set, mobile
On your mark, get set, mobile
Tiffany Beker
 
Mobile 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’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
servicesmobiles.fr
 
Growth Hacking, Disrupt the Business with Mobile!
Growth Hacking, Disrupt the Business with Mobile! Growth Hacking, Disrupt the Business with Mobile!
Growth Hacking, Disrupt the Business with Mobile!
TheFamily
 
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?
I've got 10 million songs in my pocket. Now what?
Paul Lamere
 

En vedette (20)

Responsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNNResponsive & Responsible Web Design in DNN
Responsive & Responsible Web Design in DNN
 
Prototyping for responsive web design
Prototyping for responsive web design Prototyping for responsive web design
Prototyping for responsive web design
 
Les usages associés aux tablettes tactiles - GESTE - Mediametrie - Mars 2012
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
 
Classement de la fréquentation des applications mobile OJD - Avril 2013
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
 
L’iPad à l’école : usages, avantages et défis
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
 
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...
The web you were used to is gone. Architecture and strategy for your mobile c...
 
How to Get Started in Mobile Marketing
How to Get Started in Mobile MarketingHow to Get Started in Mobile Marketing
How to Get Started in Mobile Marketing
 
Etat des lieux du mobile en France et en Europe
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
 
Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012Mobile Marketing Trend Report - AUG 2012
Mobile Marketing Trend Report - AUG 2012
 
Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013Baromètre mobile marketing association France mai 2013
Baromètre mobile marketing association France mai 2013
 
Mobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should KnowMobile Marketing Stats Automotive Dealers Should Know
Mobile Marketing Stats Automotive Dealers Should Know
 
Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012Placecast - E-commerce Paris 2012
Placecast - E-commerce Paris 2012
 
Digital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto ExperienceDigital Liberation: The Future Auto Experience
Digital Liberation: The Future Auto Experience
 
3eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 20113eme observatoire de l'internet mobile 2011
3eme observatoire de l'internet mobile 2011
 
SEO for Mobile Apps
SEO for Mobile AppsSEO for Mobile Apps
SEO for Mobile Apps
 
Marketingcharts mobile-marketing-data-2011
Marketingcharts mobile-marketing-data-2011Marketingcharts mobile-marketing-data-2011
Marketingcharts mobile-marketing-data-2011
 
On your mark, get set, mobile
On your mark, get set, mobileOn your mark, get set, mobile
On your mark, get set, mobile
 
Mobile 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’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!
Growth Hacking, Disrupt the Business with Mobile! Growth Hacking, Disrupt the Business with Mobile!
Growth Hacking, Disrupt the Business with Mobile!
 
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?
I've got 10 million songs in my pocket. Now what?
 

Similaire à Responsive Design in the Real World

CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
Denise Jacobs
 
Making Links Magical Again with CSS
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSS
Jenn Lukas
 
Beyond CSS Architecture
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
拓樹 谷
 
Core CSS3
Core CSS3Core CSS3
Core CSS3
Rachel Andrew
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
Rachel Andrew
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
Jonathan Snook
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
Nicholas Zakas
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
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 Nyman
 
Sass
SassSass
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
Robert Nyman
 
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
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 Harper
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
Rachel Andrew
 
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)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
Nicholas Zakas
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
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 Nyman
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
Raj Lal
 
Quality Development with CSS3
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3
Shay Howe
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
The University of Akron
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.
philogb
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
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 Harper
 
Css3
Css3Css3

Similaire à Responsive Design in the Real World (20)

CSS3: Are you experienced?
CSS3: Are you experienced?CSS3: Are you experienced?
CSS3: Are you experienced?
 
Making Links Magical Again with CSS
Making Links Magical Again with CSSMaking Links Magical Again with CSS
Making Links Magical Again with CSS
 
Beyond CSS Architecture
Beyond CSS ArchitectureBeyond CSS Architecture
Beyond CSS Architecture
 
Core CSS3
Core CSS3Core CSS3
Core CSS3
 
The Creative New World of CSS
The Creative New World of CSSThe Creative New World of CSS
The Creative New World of CSS
 
CSS3 Takes on the World
CSS3 Takes on the WorldCSS3 Takes on the World
CSS3 Takes on the World
 
Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)Progressive Enhancement 2.0 (Conference Agnostic)
Progressive Enhancement 2.0 (Conference Agnostic)
 
HTML5 and CSS3: Exploring Mobile Possibilities - London Ajax Mobile Event
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
 
Sass
SassSass
Sass
 
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte eventHTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
HTML5 and CSS3 – exploring mobile possibilities - Dynabyte event
 
SCREENS - 2012-09-28 - Responsive Web Design, get the best from your design
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
 
GOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for thatGOTO Berlin - You can use CSS for that
GOTO Berlin - You can use CSS for that
 
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)
Progressive Enhancement 2.0 (jQuery Conference SF Bay Area 2011)
 
HTML5 and CSS3 – exploring mobile possibilities - Frontend Conference Zürich
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
 
Html5 Whats around the bend
Html5 Whats around the bendHtml5 Whats around the bend
Html5 Whats around the bend
 
Quality Development with CSS3
Quality Development with CSS3Quality Development with CSS3
Quality Development with CSS3
 
Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors. Managing responsive websites with css preprocessors.
Managing responsive websites with css preprocessors.
 
Una web todos los dispositivos.
Una web todos los dispositivos.Una web todos los dispositivos.
Una web todos los dispositivos.
 
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
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
 
Css3
Css3Css3
Css3
 

Plus de Clarissa Peterson

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
Clarissa Peterson
 
Designing for Users: How to Create a Better User Experience
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 Experience
Clarissa Peterson
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
Clarissa Peterson
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
Clarissa Peterson
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
Clarissa Peterson
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
Clarissa Peterson
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
Clarissa Peterson
 

Plus de Clarissa Peterson (7)

Alt Text Is Your Superpower
Alt Text Is Your SuperpowerAlt Text Is Your Superpower
Alt Text Is Your Superpower
 
Designing for Users: How to Create a Better User Experience
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 Experience
 
Creating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly FormsCreating Beautiful, Accessible, and User-Friendly Forms
Creating Beautiful, Accessible, and User-Friendly Forms
 
Making the Web Easy
Making the Web EasyMaking the Web Easy
Making the Web Easy
 
Responsive Color
Responsive ColorResponsive Color
Responsive Color
 
UX & Responsive Design
UX & Responsive DesignUX & Responsive Design
UX & Responsive Design
 
Responsive Typography II
Responsive Typography IIResponsive Typography II
Responsive Typography II
 

Dernier

定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
qo1as76n
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
GOWSIKRAJA PALANISAMY
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
Techno Merch
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
Decomart Studio
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
lunaemel03
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
gpffo76j
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
GOWSIKRAJA PALANISAMY
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
Chiara Aliotta
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
pmgdscunsri
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
contactproperweb2014
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
Knight Moves
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
M. A. Architect
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
asuzyq
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
PoojaSaini954651
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
PabloMartelLpez
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
millarj46
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
Carolina de Bartolo
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
184804
 

Dernier (20)

定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样定制美国西雅图城市大学毕业证学历证书原版一模一样
定制美国西雅图城市大学毕业证学历证书原版一模一样
 
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptxUNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
UNIT IV-VISUAL STYLE AND MOBILE INTERFACES.pptx
 
Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.Technoblade The Legacy of a Minecraft Legend.
Technoblade The Legacy of a Minecraft Legend.
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1Top Interior Designers in Bangalore.pdf1
Top Interior Designers in Bangalore.pdf1
 
Divertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8djDivertidamente SLIDE.pptxufururururuhrurid8dj
Divertidamente SLIDE.pptxufururururuhrurid8dj
 
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
原版定做(penn毕业证书)美国宾夕法尼亚大学毕业证文凭学历证书原版一模一样
 
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptxUNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
UNIT V ACTIONS AND COMMANDS, FORMS AND CONTROLS.pptx
 
Storytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design ProcessStorytelling For The Web: Integrate Storytelling in your Design Process
Storytelling For The Web: Integrate Storytelling in your Design Process
 
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
Maximize Your Content with Beautiful Assets : Content & Asset for Landing Page
 
Impact of Fonts: in Web and Apps Design
Impact of Fonts:  in Web and Apps DesignImpact of Fonts:  in Web and Apps Design
Impact of Fonts: in Web and Apps Design
 
ARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdfARENA - Young adults in the workplace (Knight Moves).pdf
ARENA - Young adults in the workplace (Knight Moves).pdf
 
Mohannad Abdullah portfolio _ V2 _22-24
Mohannad Abdullah  portfolio _ V2 _22-24Mohannad Abdullah  portfolio _ V2 _22-24
Mohannad Abdullah portfolio _ V2 _22-24
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
一比一原版(Columbia毕业证)哥伦比亚大学毕业证如何办理
 
PDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in NoidaPDF SubmissionDigital Marketing Institute in Noida
PDF SubmissionDigital Marketing Institute in Noida
 
Branding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdfBranding de la empresa de Bolt- 2024.pdf
Branding de la empresa de Bolt- 2024.pdf
 
Virtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburghVirtual Tour Application Powerpoint for museum of edinburgh
Virtual Tour Application Powerpoint for museum of edinburgh
 
Timeless Principles of Good Design
Timeless Principles of Good DesignTimeless Principles of Good Design
Timeless Principles of Good Design
 
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With DesignsGame Concept Presentation for Ukrainian Mythology Based Game With Designs
Game Concept Presentation for Ukrainian Mythology Based Game With Designs
 

Responsive Design in the Real World