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.
Responsive Web Design, get the best out of your designs - JavaScript Open Day - 2015-06-25
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
9. 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.
13. what’s the problem?
§ Non-responsive sites are no fun.
§ Fixed-width sites are not the best experiences.
§ Not thinking about new web platforms.
23. 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.
24. 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.
25. media queries at work
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
26. 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 */ }
27. 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”>
44. 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.