Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25

588 views

Published on

There is no mobile or desktop Web: we view the same Web, but in different ways. So what is the secret sauce to give the best experience to our users? Drown your fixed-width design, destroy your device-specific approaches and ride the web's unicorn while an orchestra is playing we are the champion in the background: you found the holy grail! It's responsive web design. It's not new. It's not magical. Still, we need it as the bytes going thru the wires doesn't always give us the best experience out there. So stop watching cats videos, and learn more about how you can use Responsive Web Design's approach to your current site, today.

Published in: Technology
  • Be the first to comment

Responsive Web Design, the secret sauce - MSDEVMTL - 2016-01-25

  1. 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. 2. in a galaxy not so far away
  3. 3. Creative Commons: https://flic.kr/p/M3s78
  4. 4. Creative Commons: https://flic.kr/p/dwqgAh
  5. 5. Creative Commons: https://flic.kr/p/84tg1p anti- patterns
  6. 6. Creative Commons: http://xkcd.com/773/
  7. 7. responsive web design
  8. 8. ü  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
  9. 9. Creative Commons: https://flic.kr/p/84tg1p that’s the way
  10. 10. 1.  A flexible, grid-based layout, 2.  Flexible images and media, 3.  Media queries. the secret sauce
  11. 11. flexible grid-based layout
  12. 12. §  Non-responsive sites are no fun. §  Fixed-width sites are not the best experiences. §  Not thinking about new web platforms. what’s the problem?
  13. 13. pixels to ems algorithm
  14. 14. pixels to ems algorithm target context result * you can use rem – context will be root
  15. 15. 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
  16. 16. what about the grid? #page .main .other .blog body
  17. 17. #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+%; }
  18. 18. flexible images & media
  19. 19. /* Works on other media like <video> */ img { max-width: 100%; } simple solution
  20. 20. <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
  21. 21. media queries
  22. 22. §  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…
  23. 23. 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
  24. 24. @media screen and (max-width: 600px) { body { font-size: 80%; } } that simple
  25. 25. @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
  26. 26. @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?
  27. 27. §  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
  28. 28. Creative Commons: https://flic.kr/p/84tg1p little pea bakery
  29. 29. old browsers
  30. 30. be creative
  31. 31. Copyright: http://j.mp/1pA8tpJ
  32. 32. Creative Commons: https://flic.kr/p/84tg1p disco mode
  33. 33. resources
  34. 34. http://www.alistapart.com/articles/responsive-web-design/ https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills http://stunningcss3.com/code/bakery/ http://www.lukew.com/ff/entry.asp?1514 http://mediaqueri.es/ http://getbootstrap.com/ http://www.abookapart.com/products/responsive-web-design www
  35. 35. be responsible
  36. 36. be responsible responsive
  37. 37. §  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
  38. 38. Frédéric Harper fharper@oocz.net @fharper http://outofcomfortzone.net

×