Responsive Web Design in a Nutshell

Transcript

1. Responsive Web Design ... in a nutshell. leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06
2. What’s all the fuss about?
4. Our websites need to work on all devices
5. Responsive vs. Adaptive
6. Responsive vs. Adaptive Layout is fluid. Media queries are used to change the layout when it “breaks down”
7. Responsive vs. Adaptive A set of pre-defined layout widths is used. No fluid layout. Layout is fluid. Media queries are used to change the layout when it “breaks down”
8. http://liquidapsive.com/ Super sweet demo
9. Mixed Approach Fixed width layouts for large and medium. Fluid layout for small.
10. How do I make my site responsive?
11. 1 The Viewport Meta Tag <meta name="viewport" content="width=device-width, initial-scale=1">
12. 2 Percentages in CSS .main-content { width: 67%; } .side-column { width: 33%; }
13. 3 CSS Media Queries div.content { width: 1100px; margin: 0 auto; } /* Large monitors */ @media screen and (min-width: 1600px) { div.content { width: 1440px; } } ... /* Tablets in portrait */ @media screen and (min-width: 761px) and (max-width: 990px) { div.content { width: 740px; } } /* Mobile */ @media screen and (max-width: 760px) { div.content { width: 100%; } }
14. 4 Responsiveness in JavaScript // Detect screen size // ------------------ if (window.innerWidth < 768) { // Do stuff specific to mobile } // ... or use enquire.js // --------------------- enquire.register("screen and (min-width:768px)", function() { // Load sidebar content in via AJAX. // Show sidebar });
15. Responsive Design Patterns
16. 1 2 3 1 2 3
17. http://bradfrost.github.io/this-is-responsive/patterns.html Tons of examples
18. Useful Tools
19. Front-end Frameworks
21. Front-end Frameworks Fast and easy to get started. +
22. Front-end Frameworks Fast and easy to get started. + Pollutes your HTML and can limit you. –
23. https://github.com/scottjehl/Respond Respond.js Makes old browsers (IE8-) support Media Queries.
24. Responsive Web Safari!
25. 1. http://trentwalton.com/ 2. http://www.bostonglobe.com/ 3. https://corporate.target.com/ 4. http://css-tricks.com/ 5. http://elliotjaystocks.com/ 6. http://www.leanmachine.se/ 7. http://www.awwwards.com/ 8. http://www.squarespace.com/stories 9. http://www.jessicahische.is/ 10. http://forefathersgroup.com/ 11. http://palantir.net/ 12. http://www.ampersandconf.com/
26. leanmachine.se ▪ hello@leanmachine.se ▪ 2013-09-06