Responsive web design standards?

Responsive web standards?

Chris Mills
Opera Software/W3C

Friday, 7 December 12

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

Useful stuff

@chrisdavidmills
cmills@opera.com/cmills@w3.org
slideshare.net/chrisdavidmills
webplatform.org
dev.opera.com


A question

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


The answer

We’re getting there ;-)


But the road has been hard


CSS first existed circa 1996


But ... browser support?
<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>
</td>

CSS 1 and 2 had very few...

...RWD-friendly features

Because RWD problems didn’t exist back
then!


Layout tools?

Then again CSS2 has few layout tools ...

Period.


We still abuse floats and padding

And positioning is good.

But doesn’t solve everything.


CSS2 has media types

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


Surely they are all really “screen”?


<img> was never responsive

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


And we’ve never had...

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


Whinge over


The W3C process is long


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


Media queries succeed...

...where media types failed


Media queries

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

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


Media queries


Viewport is also necessary

For making mobile browsers behave!


CSS device adaptation spec

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


CSS4 media queries

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


Other media query ideas

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


CSS3 features “proper” layout

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


Example: Flexbox

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

Responsive replaced elements

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


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


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

</picture>

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


object-fit/object-position

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


Image fragments

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


Misc responsive features

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


matchMedia

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


@supports

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


unicode-range

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


Thanks!

@chrisdavidmills
cmills@opera.com/cmills@w3.org
slideshare.net/chrisdavidmills
webplatform.org
dev.opera.com


Responsive web design standards?

More Related Content

Viewers also liked (20)

Similar to Responsive web design standards? (20)

More from Chris Mills (20)

Recently uploaded (20)

Responsive web design standards?