This talk was given at the responsive web design event at Manchester Metropolitan university on December 5th 2012. It looks at responsive design from the standards perspective, starting with history, and how we got to where we are now, and looking at the technologies available for practicing RWD in the modern day and in the near future.
2. Who am I?
* Works for Opera and W3C
* Open standards evangelist
* HTML5/CSS3 wrangler
* Accessibility whinger
* Education agitator
* Heavy metal drummer
Responsive web standards? Chris Mills
Friday, 7 December 12
9. CSS 1 and 2 had very few...
...RWD-friendly features
Because RWD problems didn’t exist back
then!
Responsive web standards? Chris Mills
Friday, 7 December 12
10. Layout tools?
Then again CSS2 has few layout tools ...
Period.
Responsive web standards? Chris Mills
Friday, 7 December 12
11. We still abuse floats and padding
And positioning is good.
But doesn’t solve everything.
Responsive web standards? Chris Mills
Friday, 7 December 12
12. CSS2 has media types
But they are largely flawed
media=”screen”, media=”print”
media=”handheld”, media=”tv”
media=”wtf?”
Responsive web standards? Chris Mills
Friday, 7 December 12
14. <img> was never responsive
We had no need for responsive images
when <img> was created
Responsive web standards? Chris Mills
Friday, 7 December 12
15. And we’ve never had...
* “Proper” layout modules
* Feature detection
* Access to hardware features
* whinge whinge whinge...
* ...I want it all yesterday...
* ...etc.
Responsive web standards? Chris Mills
Friday, 7 December 12
17. The W3C process is long
Responsive web standards? Chris Mills
Friday, 7 December 12
18. The W3C process is long
* A problem first has to present itself
* Someone has to propose a solution
* Which has to be agreed by committee
* After checking for the “P” word
* And then implemented by browsers
* And then adopted by developers
Responsive web standards? Chris Mills
Friday, 7 December 12
19. Media queries succeed...
...where media types failed
Responsive web standards? Chris Mills
Friday, 7 December 12
20. Media queries
media="screen and (max-width: 481px)"
@media screen and (max-width: 481px) {
/* do amazing stuff for
narrow screens */
}
Responsive web standards? Chris Mills
Friday, 7 December 12
22. Viewport is also necessary
For making mobile browsers behave!
Responsive web standards? Chris Mills
Friday, 7 December 12
23. Viewport is also necessary
Responsive web standards? Chris Mills
Friday, 7 December 12
24. Viewport is also necessary
<meta name="viewport"
content="width=device-width">
Responsive web standards? Chris Mills
Friday, 7 December 12
25. CSS device adaptation spec
Does viewport stuff ... in CSS
Responsive web standards? Chris Mills
Friday, 7 December 12
26. CSS device adaptation spec
<meta name="viewport"
content="width=550,
maximum-scale=1.0,
target-densitydpi=device-dpi">
@viewport {
width: 550px;
max-zoom: 1;
resolution: device;
}
Responsive web standards? Chris Mills
Friday, 7 December 12
27. CSS4 media queries
* script
* hover
* pointer (none/coarse/fine)
* luminosity (dim/normal/washed)
Responsive web standards? Chris Mills
Friday, 7 December 12
28. Other media query ideas
* paged
* interactive
* touch
* keyboard
* remote
* network-speed
Responsive web standards? Chris Mills
Friday, 7 December 12
29. CSS3 features “proper” layout
* Flexbox
* Multi-col layout
* Grids
* Regions
* Exclusions and shapes
* GCPM
Responsive web standards? Chris Mills
Friday, 7 December 12
30. Example: Flexbox
* Easier UI layout
* Makes layout tasks much easier
* Cross browser support getting there
* Great for mobile UIs
Responsive web standards? Chris Mills
Friday, 7 December 12
31. Example: Flexbox
<section>
<article id="first"></article>
<article id="second"></article>
<article id="third"></article>
</section>
Responsive web standards? Chris Mills
Friday, 7 December 12
43. Responsive replaced elements
* max-width: 100% ...
* HTML5 <video>: <source> media
attributes
* <picture>
Responsive web standards? Chris Mills
Friday, 7 December 12
44. HTML5 <video>
<source src="crystal320.webm"
type="video/webm" media="all and (max-
width: 480px)">
<source src="crystal720.webm"
type="video/webm" media="all and (min-
width: 481px)">
Responsive web standards? Chris Mills
Friday, 7 December 12
45. The <picture> element
<picture alt="a picture of something">
<source src="mobile.jpg">
<source src="medium.jpg" media="min-
width: 600px">
<source src="fullsize.jpg" media="min-
width: 900px">
<img src="mobile.jpg">
<!-- fallback for
non-supporting browsers -->
</picture>
Responsive web standards? Chris Mills
Friday, 7 December 12
46. Other useful image features
* object-fit / object-position
* background-image:
image('image.png#xywh=150,250,100,100');
* background-image: image("wavy.svg",
'wavy.png' , "wavy.gif");
Responsive web standards? Chris Mills
Friday, 7 December 12
47. object-fit/object-position
img {
width: 300px;
height: 300px;
...
object-fit: contain;
}
Responsive web standards? Chris Mills
Friday, 7 December 12
48. Image fragments
background-image:
image('image.png#xywh=15,30,150,120');
Responsive web standards? Chris Mills
Friday, 7 December 12
49. Misc responsive features
* matchMedia
* Native feature detection with
@supports
* CSS3 web fonts for icons
* unicode-range
Responsive web standards? Chris Mills
Friday, 7 December 12
50. matchMedia
if (window.matchMedia("(min-width:
400px)").matches) {
/* Do stuff for wider screens */
} else {
/* Do stuff for narrow screens */
}
Responsive web standards? Chris Mills
Friday, 7 December 12
51. @supports
@supports (display:flex) {
section { display: flex }
...
}
Responsive web standards? Chris Mills
Friday, 7 December 12
52. unicode-range
@font-face {
font-family: myFont;
src: local(myFont), url(/fonts/myFont.otf);
unicode-range: U+000-49F, U+2000-27FF;
}
Responsive web standards? Chris Mills
Friday, 7 December 12