Pro Yearly is on sale from $80 to $50! »

Responsive Web Design is NOT a Buzz Word

4c9a493357b17fb1ac818b3cfed6583a?s=47 Nima Izadi
December 10, 2012

Responsive Web Design is NOT a Buzz Word

Because too many people think it is...

Link to video [FR] : https://vimeo.com/56921998

4c9a493357b17fb1ac818b3cfed6583a?s=128

Nima Izadi

December 10, 2012
Tweet

Transcript

  1. R e s p o n s i v e

    Web Design A BUZZ Word IS NOT
  2. Lima you said? No, NIMA! Neither Nemo! Frontend Web Engineer

    @Nima_Izadi
  3. On The Rails Again

  4. Responsive Web Design ? “Responsive web design [...] is an

    approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones) Wikipedia
  5. Don’t be lost Even this fridge has a browser

  6. ResponsiveMuseum.com Idea from Julien Dorra & Geoffrey Dorne Because their

    websites sucks
  7. National Museum of Natural History

  8. Centre Pompidou

  9. The Louvre

  10. Trello, the way forward

  11. None
  12. None
  13. HTML5ROCKS

  14. HTML5ROCKS

  15. HTML5ROCKS

  16. HTML5ROCKS <meta name="apple-mobile-web-app-capable" content="yes"> <link rel="apple-touch-icon" href="iphone-icon.png">

  17. How to do it?

  18. Media Queries “A media query consists of a media type

    and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself. Mozilla Developer Network
  19. Media Queries & SASS @mixin iphone { @media only screen

    and (max-width: 480px) { @content; } } @include iphone { body { color: red } }
  20. NIMA IZADI @Nima_Izadi OnTheRailsAgain.com/Nima SpeakerDeck.com/nim1989