responsive web design - devoxx uk - 2014-06-13
Post on 18-Oct-2014
570 views
DESCRIPTION
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.TRANSCRIPT
![Page 1: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/1.jpg)
Responsive Web Design
Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net
2014-06-12
![Page 2: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/2.jpg)
public class Main {
public static void main(String[] args) {
System.out.print(”I don’t speak Java!");
}
}
![Page 3: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/3.jpg)
In a
not so far way galaxy
![Page 4: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/4.jpg)
Creative Commons: http://j.mp/TJsDTi
![Page 5: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/5.jpg)
Creative Commons: http://j.mp/1gP4X4K
![Page 6: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/6.jpg)
MIT: http://j.mp/1kKuced
Anti-patterns
![Page 7: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/7.jpg)
Creative Commons: http://xkcd.com/773/
![Page 8: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/8.jpg)
Responsive
Design Web
![Page 9: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/9.jpg)
![Page 10: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/10.jpg)
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.
![Page 11: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/11.jpg)
MIT: http://j.mp/1kKuced
That’s the way
![Page 12: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/12.jpg)
RWD Secret sauce
1. A flexible, grid-based layout,
2. Flexible images and media,
3. Media queries.
![Page 13: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/13.jpg)
Flexible
Layout Grid-based
![Page 14: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/14.jpg)
So what’s the problem?
• Non-responsive sites are no fun.
• Fixed-width sites are not the best experiences.
• Not thinking about to new web platforms
![Page 15: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/15.jpg)
Pixels to Ems Algorithm
![Page 16: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/16.jpg)
Pixels to Ems Algorithm
target context result
![Page 17: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/17.jpg)
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: 0.45833333+; }
Responsive Web Design READ MORE >>
em
%
target context result
![Page 18: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/18.jpg)
What about the grid? #p
age
.main .other .blog
body
![Page 19: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/19.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 20: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/20.jpg)
Flexible
& Media Images
![Page 21: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/21.jpg)
A simple solution
/* Works on other media like <video> */
img {
max-width: 100%;
}
![Page 22: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/22.jpg)
Media Queries
![Page 23: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/23.jpg)
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.
![Page 24: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/24.jpg)
CSS3 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.
![Page 25: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/25.jpg)
Simple Example @media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
![Page 26: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/26.jpg)
Other queries @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 */ }
![Page 27: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/27.jpg)
Can be declared…
@import url(mq.css) only screen
and (max-width:600px)
<link rel=“stylesheet”
media=“only screen and (max-width:800px)” href=“mq.css”>
![Page 28: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/28.jpg)
Supported Media Properties • min/max-width
• min/max-height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
![Page 29: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/29.jpg)
MIT: http://j.mp/1kKuced
Little Pea
Bakery
![Page 30: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/30.jpg)
What about old browsers?
![Page 31: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/31.jpg)
The picture element
<picture>
<source media="(min-width: 40em)" srcset="big.jpg 1x, big-hd.jpg 2x">
<source srcset="small.jpg 1x, small-hd.jpg 2x">
<img src="fallback.jpg" alt="">
</picture>
![Page 32: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/32.jpg)
![Page 33: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/33.jpg)
Common Patterns
![Page 34: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/34.jpg)
![Page 35: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/35.jpg)
Mostly fluid
Copyright: http://j.mp/1pA8tpJ
![Page 36: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/36.jpg)
Column drop
Copyright: http://j.mp/1pA8tpJ
![Page 37: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/37.jpg)
Layout shifter
Copyright: http://j.mp/1pA8tpJ
![Page 38: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/38.jpg)
Tiny tweaks
Copyright: http://j.mp/1pA8tpJ
![Page 39: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/39.jpg)
![Page 40: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/40.jpg)
Ressources
![Page 41: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/41.jpg)
![Page 42: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/42.jpg)
![Page 43: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/43.jpg)
![Page 44: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/44.jpg)
Resources • http://www.alistapart.com/articles/responsive-web-design/
• http://scottjehl.github.io/picturefill/
• 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
• http://responsiveimages.org/
![Page 45: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/45.jpg)
Be
responsive responsible
![Page 46: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/46.jpg)
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.
![Page 47: Responsive Web Design - Devoxx UK - 2014-06-13](https://reader034.vdocument.in/reader034/viewer/2022051816/5442cfb6b1af9f390a8b4794/html5/thumbnails/47.jpg)
Having a web app or game?
Please let me know!