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


mailto:[email protected]


Do web standards provide a good set of tools for responsive web design?

A question


We’re getting there ;-)

The answer


But the road has been hard


CSS first existed circa 1996


<table width="100%" style="height: 100%;" cellpadding="10" cellspacing="0" border="0"><tr><td colspan="2" style="height: 100px;" bgcolor="#777d6a"><h1>Website Logo</h1></td></tr>

<tr><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?


...RWD-friendly features

Because RWD problems didn’t exist back then!

CSS 1 and 2 had very few...


Then again CSS2 has few layout tools ...

Period.

Layout tools?


And positioning is good.

But doesn’t solve everything.

We still abuse floats and padding


But they are largely flawedmedia=”screen”, media=”print”media=”handheld”, media=”tv”media=”wtf?”

CSS2 has media types


Surely they are all really “screen”?


We had no need for responsive images when <img> was created

<img> was never responsive


* “Proper” layout modules* Feature detection* Access to hardware features* whinge whinge whinge...* ...I want it all yesterday...* ...etc.

And we’ve never had...


Whinge over


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

The W3C process is long


...where media types failed


Media queries succeed...


media="screen and (max-width: 481px)"

@media screen and (max-width: 481px) { /* do amazing stuff for narrow screens */}


Media queries



Media queries


For making mobile browsers behave!


Viewport is also necessary





<meta name="viewport" content="width=device-width">




Does viewport stuff ... in CSS


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;}


CSS device adaptation spec


* script* hover* pointer (none/coarse/fine)* luminosity (dim/normal/washed)


CSS4 media queries


* paged* interactive* touch* keyboard* remote* network-speed


Other media query ideas


* Flexbox* Multi-col layout* Grids* Regions* Exclusions and shapes* GCPM


CSS3 features “proper” layout


* Easier UI layout* Makes layout tasks much easier* Cross browser support getting there* Great for mobile UIs


Example: Flexbox


<section> <article id="first"></article> <article id="second"></article> <article id="third"></article></section>


Example: Flexbox



section { display: flex; flex-flow: row;}

section { display: flex; flex-flow: column;}


Example: Flexbox



section { display: flex; flex-flow: row; align-items: center;}


Example: Flexbox



#first, #third { order: 2;}

#second { order: 1;}


Example: Flexbox



#first { flex: 1;}

#second { flex: 1;}

#third { flex: 1;}


Example: Flexbox



#first { flex: 1;}

#second { flex: 1;}

#third { flex: 2;}


Example: Flexbox



* max-width: 100% ...* HTML5 <video>: <source> media attributes* <picture>


Responsive replaced elements


<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)">


HTML5 <video>


<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"> </picture>


The <picture> element


* object-fit / object-position* background-image: image('image.png#xywh=150,250,100,100');* background-image: image("wavy.svg", 'wavy.png' , "wavy.gif");


Other useful image features


img { width: 300px; height: 300px; ... object-fit: contain;}


object-fit/object-position


background-image: image('image.png#xywh=15,30,150,120');


Image fragments


* matchMedia* Native feature detection with @supports* CSS3 web fonts for icons* unicode-range


Misc responsive features


if (window.matchMedia("(min-width: 400px)").matches) { /* Do stuff for wider screens */} else { /* Do stuff for narrow screens */}


matchMedia


@supports (display:flex) { section { display: flex } ...}


@supports


@font-face { font-family: myFont; src: local(myFont), url(/fonts/myFont.otf); unicode-range: U+000-49F, U+2000-27FF;}


unicode-range


@[email protected]/[email protected]

slideshare.net/chrisdavidmillswebplatform.orgdev.opera.com

Thanks!

Date post:	27-Jan-2015
Category:	Technology
Upload:	chris-mills
View:	106 times
Download:	0 times

Responsive web design standards?

Technology