Responsive Day Out: What's next in StandardsLand?

980px

Samsung Galaxy SII, Opera, "Browser", Chrome, Firefox, QQ Browser, Maxthon, UCWeb HD, Baidu, Dolphin all default to 980px in absence of viewport meta.

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

<meta name="viewport"
 content="width=320, 
 user-scalable=no">

Rule of thumbs

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

<meta name="viewport" content="width=550">

Problems with viewport meta

• Philosophical: it's using HTML to control presentation
• Practical: it's a blunt instrument

CSS Device Adaptation

@viewport {
  width: 320px;
  zoom: 2.3;
  user-zoom: fixed;};

Prefixed: Opera Presto, IE10. WebKit support beginning

min and max width

@-o-viewport {
    /* minimum of 550px viewport width */
    width: 550px auto; max-zoom: auto;
}

The minimum width the page can be is 550px. So, if your physical width is less than 550 physical pixels, map this page's 550px width to whatever your real width is so it fills the page.

However, if you are more than 550 physical pixels wide, don't remap; put the 550px in the middle of the 980 pixels (which is the standard viewport width), and produce margins each side of (980 -550) / 2 (= 115 px). Please.

Windows tablet snap mode

@media only screen and (max-width: 400px) {
 @-ms-viewport { width: 320px; }
 }

Beware 2009, 2011 syntaxes

1. a box-{*} property
2. display: box;
3. display: flexbox;
4. flex() property

Easy vertical centering

<style>
 div {display:flex; height:500px;} 
 article {margin:auto;}
</style>

<div>
<article>hello</article>
</div>

Lining up boxes

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

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

Aligning items

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

Flexibility

#first {flex: 1;}
#second {flex: 1;}
#third {flex: 1;}

Flexibility

#first {flex: 1;}
#second {flex: 1;}
#third {flex: 2;}

justify-content

• flex-start
• flex-end
• center
• space-around
• space-between

Re-ordering content

#second {order: 1;}
#first {order: 2;}
#third {order: 3;}

@media screen and (max-width: 480px) {
	body {display: table;
	caption-side: bottom;}
    
	nav  {float: none;
	display: table-caption;
	width:100%;}
}

script Media Query

@media screen and (script) {…}

@media screen and not (script) {…}

hover Media Query

The ‘hover’ media feature is used to query whether primary pointing system used on the output device can hover or not.

@media screen and not (hover) {…}

pointer Media Query

@media (pointer:coarse) {
  input[type="checkbox"], input[type="radio"]
    {min-width:30px; min-height:40px;}
}

Choices are coarse, fine, none.

@media (paged) and (interactive:0) 
	{ /* I am like a printer */ }

@media (paged) and (interactive)
	{ /* I'm a projector, or like a Kindle */ }

@media (paged) and (interactive) and (touch) 
	{ /* I'm like a touch-screen Kindle */ }

@media (touch) and (keyboard) and (min-width:600) 
    { /* looks like a touch-screen laptop */ }

@media (remote) 
    { /* TV or set-top box? */ }

 @media (remote) and (hover) 
    { /* like a Wii? */ }

Pointer Events API

The events for handling generic pointer input look a lot like those for mouse: pointerdown, pointermove, pointerup, pointerover, pointerout, etc. This facilitates easy content migration from Mouse Events to Pointer Events.

http://smus.com/mouse-touch-pointer/

Pointer Events provide all the usual properties present in Mouse Events (client coordinates, target element, button states, etc.) in addition to new properties for other forms of input: pressure, contact geometry, tilt, etc. So authors can easily code to Pointer Events and their content just works no matter what input hardware is being used.

Scalable Vector Graphics

Media Queries in SVG

Note: MQs are in CSS inside SVG so are carried with it - no need to change site's CSS at all.

Read more on this technique (invented by Andreas Bovens - in 2009!)

Inside the SVG file

	@media screen and (max-width: 256px)
	{
	#circle1 {stroke-width: 10px;}
	#spiral {display: none;}
	}

WebP

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images

CSS Image Values and Replaced Content Module Level 4

background-image: url("wavy.png");
background-image: image("wavy.webp", "wavy.png");
	

HTML5 video

<video>
	<source src=foo.webm type=video/webm>
	<source src=foo.mp4 type=video/mp4>
	  <!-- Fallback content -->
</video>