Post on 18-Oct-2014
description
Responsive Web Design
Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net
2014-06-12
public class Main {
public static void main(String[] args) {
System.out.print(”I don’t speak Java!");
}
}
In a
not so far way 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 of configurations.
ü Help future-proof our sites.
MIT: http://j.mp/1kKuced
That’s the way
RWD Secret sauce
1. A flexible, grid-based layout,
2. Flexible images and media,
3. Media queries.
Flexible
Layout Grid-based
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
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: 0.45833333+; }
Responsive Web Design READ MORE >>
em
%
target context result
What about the grid? #p
age
.main .other .blog
body
#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+%;
}
Flexible
& Media Images
A simple solution
/* Works on other media like <video> */
img {
max-width: 100%;
}
Media Queries
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.
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.
Simple Example @media screen and (max-width: 600px) {
body {
font-size: 80%;
}
}
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 */ }
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”>
Supported Media Properties • min/max-width
• min/max-height
• device-width
• device-height
• orientation
• aspect-ratio
• device-aspect-ratio
• color
• color-index
• monochrome
• resolution
MIT: http://j.mp/1kKuced
Little Pea
Bakery
What about old browsers?
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>
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
Ressources
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/
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 Design instead?
• Do we need or want to do visual comps for every device?
• Don’t dismiss mobile as walking and looking something up.
Having a web app or game?
Please let me know!
Frédéric Harper
fharper@mozilla.com
@fharper
http://hacks.mozilla.com
http://outofcomfortzone.net