Devoxx UK 2015 - Decoding the air around you with java and $7 hardware
Responsive Web Design - Devoxx UK - 2014-06-13
48
Responsive Web Design Frédéric Harper Sr. Technical Evangelist @ Mozilla @fharper | outofcomfortzone.net 2014-06-12
-
date post
18-Oct-2014 -
Category
Technology
-
view
570 -
download
1
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 of Responsive Web Design - Devoxx UK - 2014-06-13
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!
