Responsive Web Design, oh my Glob!

Hopefully I'll update it later with some very useful links.

Transcript

1. Responsive Web Design, Oh my Glob! Lucifero Von Nachtosphere, Product Designer @nobilelucifero on Twitter
2. The landscape—part 1
3. The landscape—part 2 Old browsers Feature phones New devices ? 8
4. Responsive Web Design is a combination of technologies and strategies aimed at creating Websites and Web-apps providing an optimal viewing experience across the entire spectrum of digital devices. ! Partially a philosophy that ultimately boils down to a collection of Web best practices. What’s RWD then?
5. • Mobile First • Feature Detection • Progressive Enhancement • Graceful Degradation RWD—The Concepts
6. • CSS Media Queries • Fluid Grids • Responsive images • RESS (responsive design with server-side components) RWD—The Technologies (some of them)
7. Media Queries
8. Max-width (Big ➞ Small)
9. Max-width .sidebar { float: left; width: 30%; } /* adapt to tablet resolution */ @media (max-width: 50em) { /* 800px */ .sidebar { float: none; /* e.g.: push the sidebar down */ width: auto; } }
10. Min-width means Small ➞ Big
11. Min-width .sidebar { /* nothing to put in here! */ } /* adapt from tablet resolution */ @media (mix-width: 50.0625em) { /* 801px */ /* e.g.: show sidebar on the right */ .sidebar { float: right; width: 30%; } }
12. Orientation @media (orientation: landscape) { .sidebar { /* show that little handy sidebar */ } }
13. Note: DPPX is Dots Per "px" unit Resolution .icon { /* load normal assets here */ } ! @media (min-resolution: 2dppx) { .icon { /* load higher resolution assets here */ } }
14. CSS4 Scripting @media (scripting: none) { /* no JS here, backup plan to apply */ }
15. CSS4 Light-level @media (light-level: dim) { /* comfortable colours in the #000 */ }
16. Think fluid
17. Fluid Grids .column { /* your rules for a grid [float|inline-block|flexbox] */ } ! .column-one { width: 8.33334%; /* 1/12 units */ }
18. Fluid Grids and Media Queries <div class=“column small-6 medium-3“>...</div> ! /* small viewport */ .small-6 { width: 50%; /* 1/12 units */ } ! /* medium viewport */ @media (min-width: 40.0625em) { /* 641px */ .medium-3 { width: 25%; /* 3/12 units */ } }
19. Width-less elements /* small viewport */ .wrapper { max-width: 60rem; /* 960px */ padding: 0 1rem; } ! /* medium viewport */ @media (min-width: 40.0625em) { /* 641px */ .wrapper { padding: 0 2.5rem; } }
20. Images
21. Compress and optimize Your BEAUTIFUL image as a jpeg ! ! A. Poor compression, big image size 1300x1714px 230KB ! B. Fine compression, smaller image size 800x1055px 100KB ! 130KB difference
22. The art direction problem
23. <picture> element to the rescue <script src="picturefill.js"></script> <!-- polyfiller --> ! <picture> <source srcset="large.jpg" media="(min-width: 801px)”> <source srcset="medium.jpeg, medium@2x.jpeg 2x" media="(max- width: 800px)"> <img srcset="small.jpg" alt="..."> </picture>
24. When possible don’t use images SVG CSS Text symbols ‚ ★★★★☆
25. Useful Tools
26. • iOS Simulator • Android Emulator • Device inspection • Chrome Emulate feature Testing & Debugging Apps
27. Bonus: Javascript!
28. <script src="modernizr.js"></script> <!-- modernizr --> ! if(Modernizr.cssanimations) { // browser supports CSS3 Animations doAmazingThings(); } Feature detection with Modernizr
29. var viewportLarge = window.matchMedia('(min-width: 801px)'); ! if(viewportLarge.matches) { // load a custom template, do some DOM trickery, etc... doOtherAmazingThings(); } window.matchMedia();
30. Thank you! bit.ly/rwdomg @nobilelucifero