Upload
chris-mills
View
107
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
Chris MillsOpera Software/W3C
Responsive web standards?
Friday, 7 December 12
* Works for Opera and W3C* Open standards evangelist* HTML5/CSS3 wrangler* Accessibility whinger* Education agitator* Heavy metal drummer
Who am I?
Responsive web standards? Chris MillsFriday, 7 December 12
@[email protected]/[email protected]
slideshare.net/chrisdavidmillswebplatform.orgdev.opera.com
Useful stuff
Friday, 7 December 12
Do web standards provide a good set of tools for responsive web design?
A question
Responsive web standards? Chris MillsFriday, 7 December 12
We’re getting there ;-)
The answer
Responsive web standards? Chris MillsFriday, 7 December 12
But the road has been hard
Friday, 7 December 12
CSS first existed circa 1996
Responsive web standards? Chris MillsFriday, 7 December 12
<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"><tr><!-- ============ HEADER SECTION ============== --><td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>
<tr><!-- ============ LEFT COLUMN (MENU) ============== --><td width="20%" valign="top" bgcolor="#999f8e"><a href="#">Menu link</a><br><a href="#">Menu link</a><br><a href="#">Menu link</a><br><a href="#">Menu link</a><br><a href="#">Menu link</a></td>
But ... browser support?
Responsive web standards? Chris MillsFriday, 7 December 12
...RWD-friendly features
Because RWD problems didn’t exist back then!
CSS 1 and 2 had very few...
Responsive web standards? Chris MillsFriday, 7 December 12
Then again CSS2 has few layout tools ...
Period.
Layout tools?
Responsive web standards? Chris MillsFriday, 7 December 12
And positioning is good.
But doesn’t solve everything.
We still abuse floats and padding
Responsive web standards? Chris MillsFriday, 7 December 12
But they are largely flawedmedia=”screen”, media=”print”media=”handheld”, media=”tv”media=”wtf?”
CSS2 has media types
Responsive web standards? Chris MillsFriday, 7 December 12
Surely they are all really “screen”?
Friday, 7 December 12
We had no need for responsive images when <img> was created
<img> was never responsive
Responsive web standards? Chris MillsFriday, 7 December 12
* “Proper” layout modules* Feature detection* Access to hardware features* whinge whinge whinge...* ...I want it all yesterday...* ...etc.
And we’ve never had...
Responsive web standards? Chris MillsFriday, 7 December 12
Whinge over
Responsive web standards? Chris MillsFriday, 7 December 12
The W3C process is long
Responsive web standards? Chris MillsFriday, 7 December 12
* 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
The W3C process is long
Friday, 7 December 12
...where media types failed
Responsive web standards? Chris Mills
Media queries succeed...
Friday, 7 December 12
media="screen and (max-width: 481px)"
@media screen and (max-width: 481px) { /* do amazing stuff for narrow screens */}
Responsive web standards? Chris Mills
Media queries
Friday, 7 December 12
Responsive web standards? Chris Mills
Media queries
Friday, 7 December 12
For making mobile browsers behave!
Responsive web standards? Chris Mills
Viewport is also necessary
Friday, 7 December 12
Responsive web standards? Chris Mills
Viewport is also necessary
Friday, 7 December 12
<meta name="viewport" content="width=device-width">
Responsive web standards? Chris Mills
Viewport is also necessary
Friday, 7 December 12
Does viewport stuff ... in CSS
Responsive web standards? Chris Mills
CSS device adaptation spec
Friday, 7 December 12
<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
CSS device adaptation spec
Friday, 7 December 12
* script* hover* pointer (none/coarse/fine)* luminosity (dim/normal/washed)
Responsive web standards? Chris Mills
CSS4 media queries
Friday, 7 December 12
* paged* interactive* touch* keyboard* remote* network-speed
Responsive web standards? Chris Mills
Other media query ideas
Friday, 7 December 12
* Flexbox* Multi-col layout* Grids* Regions* Exclusions and shapes* GCPM
Responsive web standards? Chris Mills
CSS3 features “proper” layout
Friday, 7 December 12
* Easier UI layout* Makes layout tasks much easier* Cross browser support getting there* Great for mobile UIs
Responsive web standards? Chris Mills
Example: Flexbox
Friday, 7 December 12
<section> <article id="first"></article> <article id="second"></article> <article id="third"></article></section>
Responsive web standards? Chris Mills
Example: Flexbox
Friday, 7 December 12
Responsive web standards? Chris MillsFriday, 7 December 12
section { display: flex; flex-flow: row;}
section { display: flex; flex-flow: column;}
Responsive web standards? Chris Mills
Example: Flexbox
Friday, 7 December 12
Responsive web standards? Chris MillsFriday, 7 December 12
section { display: flex; flex-flow: row; align-items: center;}
Responsive web standards? Chris Mills
Example: Flexbox
Friday, 7 December 12
Responsive web standards? Chris MillsFriday, 7 December 12
#first, #third { order: 2;}
#second { order: 1;}
Responsive web standards? Chris Mills
Example: Flexbox
Friday, 7 December 12
Responsive web standards? Chris MillsFriday, 7 December 12
#first { flex: 1;}
#second { flex: 1;}
#third { flex: 1;}
Responsive web standards? Chris Mills
Example: Flexbox
Friday, 7 December 12
Responsive web standards? Chris MillsFriday, 7 December 12
#first { flex: 1;}
#second { flex: 1;}
#third { flex: 2;}
Responsive web standards? Chris Mills
Example: Flexbox
Friday, 7 December 12
Responsive web standards? Chris MillsFriday, 7 December 12
* max-width: 100% ...* HTML5 <video>: <source> media attributes* <picture>
Responsive web standards? Chris Mills
Responsive replaced elements
Friday, 7 December 12
<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
HTML5 <video>
Friday, 7 December 12
<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
The <picture> element
Friday, 7 December 12
* 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
Other useful image features
Friday, 7 December 12
img { width: 300px; height: 300px; ... object-fit: contain;}
Responsive web standards? Chris Mills
object-fit/object-position
Friday, 7 December 12
background-image: image('image.png#xywh=15,30,150,120');
Responsive web standards? Chris Mills
Image fragments
Friday, 7 December 12
* matchMedia* Native feature detection with @supports* CSS3 web fonts for icons* unicode-range
Responsive web standards? Chris Mills
Misc responsive features
Friday, 7 December 12
if (window.matchMedia("(min-width: 400px)").matches) { /* Do stuff for wider screens */} else { /* Do stuff for narrow screens */}
Responsive web standards? Chris Mills
matchMedia
Friday, 7 December 12
@supports (display:flex) { section { display: flex } ...}
Responsive web standards? Chris Mills
@supports
Friday, 7 December 12
@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
unicode-range
Friday, 7 December 12
@[email protected]/[email protected]
slideshare.net/chrisdavidmillswebplatform.orgdev.opera.com
Thanks!
Friday, 7 December 12