Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19
1 like873 views
The document discusses responsive web design, emphasizing the importance of adapting to user needs and various device capabilities through techniques like flexible grid layouts, responsive images, and media queries. It highlights the shift from fixed-width layouts to more flexible designs that enhance user experience across multiple platforms. Additionally, it poses questions about the approach to responsive design, including mobile-first strategies and the necessity of visual comps for different devices.
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19
- 1. the secret sauce: responsive web design Frédéric Harper @fharper http://immun.io Sr. Technical Evangelist @ IMMUNIO JavaScript Open Day Montreal – 2015-11-19 CreativeCommons:https://flic.kr/p/6n9cBB
- 2. in a galaxy not so far away
- 9. ü Thinking of the user’s needs instead of ours. ü Adapt to various device capabilities instead of configurations. ü Help future-proof our sites. responsive web design
- 11. 1. A flexible, grid-based layout, 2. Flexible images and media, 3. Media queries. the secret sauce
- 13. § Non-responsive sites are no fun. § Fixed-width sites are not the best experiences. § Not thinking about new web platforms. what’s the problem?
- 14. pixels to ems algorithm
- 15. pixels to ems algorithm target context result * you can use rem – context will be root
- 16. h1 { font-size: 24px; } 24 / 16 = 1.5 h1 { font-size: 1.5em; } h1 a { font-size: 11px; } 11 / 24 = 0.45833333+ h1 a { font-size: 0.458+; } Responsive Web Design READ MORE >> em % target context result
- 17. what about the grid? #page .main .other .blog body
- 18. #page { width: 960px; } .blog { width: 900px; } .blog .main { width: 566px; } .blog .other { width: 331px; } #page { width: 960/1024; } .blog { width: 900/960; } .blog .main { width: 566/900; } .blog .other { width: 331/900; } #page { width: 93.75%; } .blog { /* 900/960 */ width: 93.75%; } .blog .main { width: 62.88+%; } .blog .other { width: 36.77+%; }
- 20. /* Works on other media like <video> */ img { max-width: 100%; } simple solution
- 21. <picture> <source media="(min-width: 40em)” srcset="big-hd.jpg"> <source srcset="small-hd.jpg"> <img src="fallback.jpg" alt=”The image"> </picture> picture element
- 24. media queries
- 25. § We could define media types: screen and print. § But not easily respond to the user’s display. § Lots of grunt work. § Didn’t spend much time thinking about mobile devices. not so long ago…
- 26. The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities. css media queries
- 27. @media screen and (max-width: 600px) { body { font-size: 80%; } } that simple
- 28. @media screen and (min-width:320px) and (max-width:480px) { /* add your code here */ } @media not print and (max-width:600px) { /* add your code here */ } @media screen (x) and (y), print (a) and (b) { /* add your code here */ } let’s get funky
- 29. @import url(mq.css) only screen and (max-width:600px) <link rel=“stylesheet” media=“only screen and (max-width:800px)” href=“mq.css”> want more?
- 30. § min-width § max-width § min-height § max-height § device-width § device-height § orientation § aspect-ratio § device-aspect-ratio § color § color-index § monochrome § resolution § scan § grid media properties
- 32. old browsers
- 33. be creative
- 37. resources
- 41. be responsible
- 43. § Is it best that all sites are responsive? § Do we start with mobile-first? § Do we go Adaptive Web Design instead? § Do we need or want to do visual comps for every device? § Don’t dismiss mobile as walking and looking something up. in the end