Responsive web design standards?
-
Upload
chris-mills -
Category
Technology
-
view
109 -
download
0
description
Transcript of Responsive web design standards?
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