Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19
-
Upload
frederic-harper -
Category
Technology
-
view
724 -
download
0
Transcript of Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19
![Page 1: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/1.jpg)
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
Crea
tive
Com
mon
s: h
ttps
://f
lic.k
r/p/
6n9c
BB
![Page 2: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/2.jpg)
in a galaxy
not so far away
![Page 3: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/3.jpg)
Creative Commons: https://flic.kr/p/M3s78
![Page 4: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/4.jpg)
Creative Commons: https://flic.kr/p/dwqgAh
![Page 5: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/5.jpg)
Creative Commons: https://flic.kr/p/84tg1p
anti-patterns
![Page 6: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/6.jpg)
Creative Commons: http://xkcd.com/773/
![Page 7: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/7.jpg)
responsive web
design
![Page 8: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/8.jpg)
![Page 9: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/9.jpg)
ü 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
![Page 10: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/10.jpg)
Creative Commons: https://flic.kr/p/84tg1p
that’s the way
![Page 11: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/11.jpg)
1. A flexible, grid-based layout,
2. Flexible images and media,
3. Media queries.
the secret sauce
![Page 12: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/12.jpg)
flexible grid-based
layout
![Page 13: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/13.jpg)
§ Non-responsive sites are no fun.
§ Fixed-width sites are not the best experiences.
§ Not thinking about new web platforms.
what’s the problem?
![Page 14: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/14.jpg)
pixels to ems algorithm
![Page 15: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/15.jpg)
pixels to ems algorithm
target context result
* you can use rem – context will be root
![Page 16: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/16.jpg)
h1 { font-size: 24px;}
24 / 16 = 1.5h1 { font-size: 1.5em;}
h1 a { font-size: 11px;}
11 / 24 = 0.45833333+h1 a { font-size: 0.458+;}
ResponsiveWebDesignREADMORE>>
em
%
target context result
![Page 17: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/17.jpg)
what about the grid? #p
age
.main .other.blog
body
![Page 18: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/18.jpg)
#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+%;}
![Page 19: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/19.jpg)
flexible images
& media
![Page 20: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/20.jpg)
/* Works on other media like <video> */img { max-width: 100%;}
simple solution
![Page 21: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/21.jpg)
<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
![Page 22: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/23.jpg)
![Page 24: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/24.jpg)
media queries
![Page 25: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/25.jpg)
§ 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…
![Page 26: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/26.jpg)
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
![Page 27: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/27.jpg)
@media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
that simple
![Page 28: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/28.jpg)
@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
![Page 29: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/29.jpg)
@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?
![Page 30: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/30.jpg)
§ 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
![Page 31: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/31.jpg)
Creative Commons: https://flic.kr/p/84tg1p
little pea
bakery
![Page 32: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/32.jpg)
old browsers
![Page 33: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/33.jpg)
be creative
![Page 34: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/34.jpg)
Copyright: http://j.mp/1pA8tpJ
![Page 35: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/35.jpg)
![Page 36: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/36.jpg)
Creative Commons: https://flic.kr/p/84tg1p
disco mode
![Page 37: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/37.jpg)
resources
![Page 38: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/38.jpg)
![Page 39: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/39.jpg)
![Page 40: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/40.jpg)
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
![Page 41: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/41.jpg)
be responsible
![Page 42: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/42.jpg)
be responsible responsive
![Page 43: Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015-11-19](https://reader031.fdocuments.in/reader031/viewer/2022030312/58edaff91a28abf77e8b45a7/html5/thumbnails/43.jpg)
§ 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