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
JavaScript Open Day
get the best of your designs
2015-06-25
Frédéric Harper
@fharper | outofcomfortz...
In a
not so far away
galaxy
Creative Commons: http://j.mp/TJsDTi
Creative Commons: http://j.mp/1gP4X4K
MIT: http://j.mp/1kKuced
Anti-
patterns
Creative Commons: http://xkcd.com/773/
Responsive
Design
Web
Responsive Web Design
ü  Thinking of the user’s needs instead of ours.
ü  Adapt to various device capabilities instead o...
MIT: http://j.mp/1kKuced
That’s
the
way
the secret sauce
1.  A flexible, grid-based layout,
2.  Flexible images and media,
3.  Media queries.
Flexible
Layout
Grid-based
what’s the problem?
§  Non-responsive sites are no fun.
§  Fixed-width sites are not the best experiences.
§  Not think...
pixels to ems algorithm
pixels to ems algorithm
target	
   context	
   result	
  
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...
what about the grid?
#page	
  
.main	
   .other	
  
.blog	
  
body	
  
#page {
width: 960px;
}
.blog {
width: 900px;
}
.blog .main {
width: 566px;
}
.blog .other {
width: 331px;
}
#page {
width...
Flexible
& Media
Images
a simple solution
/* Works on other media like <video> */
img {
max-width: 100%;
}
this man is our savior
Media
Queries
not so long ago…
§  We could define media types: screen and print.
§  But not easily respond to the user’s display.
§  ...
CSS Media Queries
The CSS3 Media Queries Module specifies methods to enable web
developers to scope a style sheet to a set...
media queries at work
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
let’s get funky
@media screen and (min-width:320px) and

(max-width:480px) { /* add your code here */ }
@media not print a...
want more?
@import url(mq.css) only screen
and (max-width:600px)
<link rel=“stylesheet”
media=“only screen and (max-width:...
media properties
•  min/max-width
•  min/max-height
•  device-width
•  device-height
•  orientation
•  aspect-ratio
•  dev...
MIT: http://j.mp/1kKuced
Little
Pea
Bakery
old browsers
Common
Patterns
mostly fluid
Copyright: http://j.mp/1pA8tpJ
column drop
Copyright: http://j.mp/1pA8tpJ
layout shifter
Copyright: http://j.mp/1pA8tpJ
tiny tweaks
Copyright: http://j.mp/1pA8tpJ
Resources
www
http://www.alistapart.com/articles/responsive-web-design/
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Brow...
Be
responsible
Be
responsive
responsible
in the end
§  Is it best that all sites are responsive?
§  Do we start with mobile-first?
§  Do we go Adaptive Web Desi...
Frédéric Harper
fharper@oocz.net
@fharper
http://outofcomfortzone.net
Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25
Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25
Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25
Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25
Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25
Upcoming SlideShare
Loading in …5
×

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

5,995 views

Published on

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.

Published in: Design, Technology
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Nice !! Download 100 % Free Ebooks, PPts, Study Notes, Novels, etc @ https://www.ThesisScientist.com
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hello! Get Your Professional Job-Winning Resume Here - Check our website! https://vk.cc/818RFv
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • your web designs are so classic, every one should use your services.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • There are a lot of people are using smartphone to check out websites. Thanks for helpful slides!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×