Successfully reported this slideshow.
Your SlideShare is downloading. ×

Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

1 of 45 Ad

Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25

Download to read offline

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.

There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.

Advertisement
Advertisement

More Related Content

Similar to Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25 (20)

More from Frédéric Harper (20)

Advertisement

Recently uploaded (20)

Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25

  1. 1. Responsive Web Design JavaScript Open Day get the best of your designs 2015-06-25 Frédéric Harper @fharper | outofcomfortzone.net CreativeCommons:https://flic.kr/p/5azfgH
  2. 2. In a not so far away galaxy
  3. 3. Creative Commons: http://j.mp/TJsDTi
  4. 4. Creative Commons: http://j.mp/1gP4X4K
  5. 5. MIT: http://j.mp/1kKuced Anti- patterns
  6. 6. Creative Commons: http://xkcd.com/773/
  7. 7. Responsive Design Web
  8. 8. Responsive Web Design ü  Thinking of the user’s needs instead of ours. ü  Adapt to various device capabilities instead of configurations. ü  Help future-proof our sites.
  9. 9. MIT: http://j.mp/1kKuced That’s the way
  10. 10. the secret sauce 1.  A flexible, grid-based layout, 2.  Flexible images and media, 3.  Media queries.
  11. 11. Flexible Layout Grid-based
  12. 12. what’s the problem? §  Non-responsive sites are no fun. §  Fixed-width sites are not the best experiences. §  Not thinking about new web platforms.
  13. 13. pixels to ems algorithm
  14. 14. pixels to ems algorithm target   context   result  
  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 & Media Images
  19. 19. a simple solution /* Works on other media like <video> */ img { max-width: 100%; }
  20. 20. this man is our savior
  21. 21. Media Queries
  22. 22. not so long ago… §  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.
  23. 23. CSS Media Queries The CSS3 Media Queries Module specifies methods to enable web developers to scope a style sheet to a set of precise device capabilities.
  24. 24. media queries at work @media screen and (max-width: 600px) { body { font-size: 80%; } }
  25. 25. let’s get funky @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 */ }
  26. 26. want more? @import url(mq.css) only screen and (max-width:600px) <link rel=“stylesheet” media=“only screen and (max-width:800px)” href=“mq.css”>
  27. 27. media properties •  min/max-width •  min/max-height •  device-width •  device-height •  orientation •  aspect-ratio •  device-aspect-ratio •  color •  color-index •  monochrome •  resolution •  scan •  grid
  28. 28. MIT: http://j.mp/1kKuced Little Pea Bakery
  29. 29. old browsers
  30. 30. Common Patterns
  31. 31. mostly fluid Copyright: http://j.mp/1pA8tpJ
  32. 32. column drop Copyright: http://j.mp/1pA8tpJ
  33. 33. layout shifter Copyright: http://j.mp/1pA8tpJ
  34. 34. tiny tweaks Copyright: http://j.mp/1pA8tpJ
  35. 35. Resources
  36. 36. www 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
  37. 37. Be responsible
  38. 38. Be responsive responsible
  39. 39. in the end §  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.
  40. 40. Frédéric Harper fharper@oocz.net @fharper http://outofcomfortzone.net

×