Responsive web design standards?

transcript

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

@chrisdavidmillscmills@opera.com/cmills@w3.org

slideshare.net/chrisdavidmillswebplatform.orgdev.opera.com

Useful stuff

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>

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

For making mobile browsers behave!

Viewport is also necessary

Does viewport stuff ... in CSS

CSS device adaptation spec

@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

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

HTML5 <video>

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

@chrisdavidmillscmills@opera.com/cmills@w3.org

slideshare.net/chrisdavidmillswebplatform.orgdev.opera.com

Thanks!

Responsive web design standards?

Technology