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.
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19
1. the secret sauce:
responsive web design
Frédéric Harper
@fharper
http://immun.io
Sr. Technical Evangelist @ IMMUNIO
JavaScript Open Day Montreal – 2015-11-19
CreativeCommons:https://flic.kr/p/6n9cBB
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
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?
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