Responsive Web Design is NOT a Buzz Word

Because too many people think it is...

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

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
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