Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
1 like701 views
The document discusses the principles of responsive web design, emphasizing the importance of user needs and adaptability to various devices. Key elements include flexible grid layouts, responsive images, and media queries that help ensure websites are accessible on different screens. The content encourages developers to consider mobile-first approaches and the evolving landscape of web capabilities.
Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25
- 1. the secret sauce: responsive web design Frédéric Harper @fharper http://outofcomfortzone.net Chief of Awesome @ Unicorn Inc. MSDEVMTL – 2016-01-25 CreativeCommons:https://flic.kr/p/kbFvBQ
- 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