Cross-Device Development with Web Standards

Cross-Device Development
with Web Standards

Tomomi Imura

flickr.com/photos/64855052@N00/3967578543/ by Yoichi Nakanishib

Hello

my name is

Tomomi

@girlie_mac

Front-end, UI/UX Developer
Mobile Geek
Open Web Advocate at Nokia
Formally at Palm webOS, Yahoo! Mobile etc.

One Web Approach

One Web means making, as far as is reasonable, the same information and services available to users irrespective of the device they are using.

Mobile Web Best Practices by W3C (2008)

Mobile Web Best Practices 1.0 (2008)

Form Factors · Screen Sizes

Adaptive Design

Progressive Enhancement
- Enhancing Experiences based on browser capabilities
- Graceful Degradation - Fallbacks
Responsive Design
- Fluid Layout
- Media Queries
- Responsive Images

Fluid Layout
Neue

flickr.com/photos/meantux/378103724/ by Denis-Carl Robidoux bn

Then

HTML Table Layout (Party like it's 1999)
The CSS "Holy Grail" Column Liquid Layout
- Float
- Negative margin
- All the hacks that are PITA
UI Frameworks for Grid Layout
- YUI
- jQuery Masonry

Now and Future: CSS3 Layouts

Columns
Flexible Box ("FlexBox")
Regions
Grids

Fluid Columns

Demo on JSFiddle

CSS Multi-column Layout Module

		
.col {
    -webkit-columns: 200px; 
    -moz-columns: 200px;
    columns: 200px;
    /* column-count: auto */
}

Browser Support:

*

2.1*

3*

7*

*

10

11.5p

15Bl*

http://www.w3.org/TR/css3-multicol/

Flexbox Layout with MQ

Demo on JSFiddle

CSS Flexible Box Layout Module

#main {
	display: flex;
	flex-flow: row;
} ...
@media all and (max-width: 640px) {
	#main {
	    flex-flow: column;
	}
}

Latest syntax:

21*

7*

10*

11

12p

15Bl

http://www.w3.org/TR/css3-flexbox/

Responsive Regions Layout

Demo on Codepen: http://cdpn.io/LbAFq

CSS Regions Module

http://dev.w3.org/csswg/css-regions/

Responsive Regions Layout

<div class="region region1"></div>
<div class="region region2"></div>	...	

<article class="content">content here...</article>

.content {flow-into: article;}
.region {flow-from: article;}

@media screen and (max-width: 400px) {
  .content {flow-into: none;}
  .region {display: none;}
}

7*

10*

IE10 requires iframe

Responsive Grid

An arrangement suitable for ‘portrait’ orientation.

An arrangement suitable for ‘landscape’ orientation.

10*

http://www.w3.org/TR/css3-grid-layout/

Media-Queries

http://commons.wikimedia.org/wiki/File:Metric_Volume_Measuring_Vessels_Frontsides-In_use.jpg ba

CSS2.1 @media Media-Types

For mobile phones:

		
@media handheld {
  /* Some mobile-specific CSS here */
}

Only supported by:

Opera Mini
OpenWave
Obigo
PIE (partial)

CSS3: Media-Queries

allows content rendering to adapt to conditions:

width of the target viewport
width of the device's screen size
screen orientations (landscape v. portrait)
device pixel ratio (aka. Retina)

etc...

CSS3: Media-Queries

Separate styles by the width of the target viewport (browser display area)


@media only screen
   and (min-width : 768px)
   and (max-width : 1024px) {
  
  /* Styles */
}

CSS3: Media-Queries

by device-width, the width of the device's screen size


@media only screen 
   and (min-device-width : 320px) 
   and (max-device-width : 480px) {
  
  /* Styles */
}

CSS3: Media-Queries

combined with screen orientations


@media only screen
   and (min-device-width : 768px)
   and (max-device-width : 1024px)
   and (orientation : landscape) {
  
  /* Styles */
}...

CSS3: Media-Queries

CSS3, Hell Yeah!


@media only screen
   and (max-width: calc(768px - 2em)) {
  /* Styles */
}...

CSS3: Media-Queries

separate styles by device pixel ratio

High Pixel Density Displays

The High DPI

https://www.webkit.org/blog/55/high-dpi-web-sites/

The High DPI: Mobile Screens

CSS Pixel vs. Device Pixel

Pixel in CSS is relative
1 CSS pixel != 1 device pixel

Pixel Density in DOM


window.devicePixelRatio

Device	Browser	Pixel Density
Nexus One	Android browser	1.5
Galaxy Nexus	Chrome	2.0
Galaxy Nexus	Opera Mobile	2.25
Samsung Galaxy S4	Chrome	3.0

Zoom Dependent Pixel Density

⌘+ and ⌘-, but not for pinch-zoom

Test page (Firefox and Chrome 31+)

Media-Queries for "Retina"


@media only screen and (min-device-pixel-ratio: 2) {
	   /* styles for hi-DPI screens */
}

WTF Vendor Prefix!


@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {...}


@media only screen and (min--moz-device-pixel-ratio: 1.5) {...}


@media only screen and (-o-min-device-pixel-ratio: 3/2) {...}

Unprefix: resolution MQ


@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 192dpi) {
       ...
}

Typical Browser: 96dpi (96 CSS-pixel in 1 CSS-inch)

...even easier


@media (-webkit-min-device-pixel-ratio: 2),  
       (min-resolution: 2dppx) {
...
}

29

16

CSSOM View Module: matchMedia()

approaching media-queries in DOM


var mql = window.matchMedia(mediaQueryString);

Browser Support:

9

3

5

10

6

10

12.1p

15Bl

http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface


var mql = window.matchMedia('(orientation:landscape)');

if (mql.matches) {  
  /* the current orientation is in landscape */  
} else {
  /* portrait */ 
}

CSS Device Adaptation


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

↓ CSS

@viewport {
  width: device-width;
}

CSS Device Adaptation


@-o-viewport {width: device-width}
@-ms-viewport {width: device-width} *
@viewport {width: device-width}

11P

10

* bug in IE10 - reports in device pixel value

@viewport in @media


@media screen and (orientation: portrait) {
  @viewport {
    width: 768px;
    height: 1024px;
  }
  /* CSS for portrait layout goes here */
}

Media Queries Level 4

"pointer" - accuracy of a pointing device.
- none
- coarse aka "fat finger"
- fine
"hover"
- 0
- 1

http://dev.w3.org/csswg/mediaqueries4/#pointer

Media Queries Level 4


@media (hover) {
   .menu li:hover {
      background-color: #bada55;
   }
}

MQ L4: Range Features


@media (min-height: 600px) { ... }

↓

@media (height >=  600px) { ... }

http://dev.w3.org/csswg/mediaqueries/#mq-range-context

MQ L4: Luminosity

@media (luminosity: normal) {
  body {background-color: #ddd; color: #000;}
}
@media (luminosity: dim) {
  body {background-color: #444; color: #fff;}
}
@media (luminosity: washed) {
  body {background-color: #fff; color: #333;}
}

http://dev.w3.org/csswg/mediaqueries4/#luminosity

DOM Ambient Light Events Demo

Video Link: https://vimeo.com/79466285 • Codepen Demo: http://cdpn.io/pvmBs

Responsive Images

flickr.com/photos/joaomoura/2348271655/bna

Responsive Images Use Cases

Resolution switching
Art Direction
DPR Switching (High-Res images)

Resolution switching

Art-Direction

instead of simple scaling

DPR Switching: High-Res Images

1x

2x

Currently used methods
and problems

Using Media-Queries


@media only screen 
  and (min-device-width : 768px) 
  and (max-device-width : 1024px) {
    background-image: url(cat-tablet.jpg);
    width: 640px; height: 320px;
}
@media only screen and (min-width : 1224px) {
	background-image: url(cat-desktop.jpg); 
	...
}

Yay

Easy enough. No scripts.

Meh

Hard to figure out MQ Breakpoint
Not semantic to use background for contents
Some browsers download all assets (Tests by Tim Kadlec)

Fluid Resizing an Image

Shrink and Stretch without MQ


		
<img src="images/relatively-large-photo.jpg" alt="cat">

img {
    width: 100%;
    height: auto;
}

Yay

Only one asset
Easy to implement. No MQ breakpoints needed.

Meh

CPU intensive
Westing bandwidth

Art Direction: Cropping with CSS

https://dl.dropboxusercontent.com/u/1330446/tests/clip.html

CSS2 Clip Property


<div class="image-container">	
  <img src="images/sushi-large.jpg"></div>


.image-container {position: relative;}
.image-container img {position: absolute;}

@media only screen and (max-width: 480px) {
  .image-container img {
      clip: rect(80px 270px 270px 240px); // BLEH!!!
  }
}

CSS2 Clip Property

position: absolute;
clip: rect(top right bottom left);

Photo: http://www.flickr.com/photos/nicolelee/1798352472/ by Nicole Leebna

Yay

Only one asset

Meh

CSS clip is cumbersome
Westing bandwidth

Up-Res for Hi-DPI Screens

Up-Res Images with MQ


.banner {
    background-image: url(banner.png);
    width: 320px; height: 160px;
}
@media (-webkit-min-device-pixel-ratio: 2), 
       (min-resolution: 2dppx) {
  .banner {
      background-image: url(banner-2x.png);
      background-size: 100%;
  }
}

Yay

Simple enough to implement

Meh

Browser-dependent MQ data types / prefix
Not semantic to use background for contents
Some browsers download all assets (Tests by Tim Kadlec)

Up-Res with CSS image-set()

<div id="photo01"></div>


#photo01 {
    width: 300px; height: 200px;
    background-image: url(images/lowres.jpg); 
    background-image: 
        -webkit-image-set(url(images/lowres.jpg) 1x,    
                          url(images/hires.jpg) 2x);
}

6*

19*

15bl*

CSS Image Values and Replaced Content Module Level 4

Yay

Less hassle syntax

Meh

Not enough browser supports. Spec is unstable.
Not semantic to use background for contents

Vector Graphics FTW!

SVG


<img src="logo.svg" width="">

Web Font Icons

IcoMoon

Web Font Icons

<span data-icon="&#xe000;">fork me</span>


@font-face {
	font-family: 'icons';
	src: url('fonts/icons.woff') format('woff');
}
[data-icon]::before {
	font-family: 'icons';
	content: attr(data-icon);
	font-size: 72px;
}

Responsive <img>?

O NOES! <img> was not made for the responsive design!

We need a standard solution.
... or a few.

The srcset attribute

Proposal by Apple & adopted by WhatWG


<img alt="The Breakfast Combo"
     src="banner.jpeg"
     srcset="banner-HD.jpeg 2x, 
             banner-phone.jpeg 100w, 
             banner-phone-HD.jpeg 100w 2x">

WebKit Nightly r154002

The srcset attribute - An HTML extension for adaptive images

Picture Element

Proposal RespImg CG


<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
   <source media="(min-width: 18em)" src="med.jpg">
   <source src="small.jpg">
   <img src="fallback.jpg">
   <p>Accessible text</p>
</picture>

Responsive Images Community Group

HTTP Client-Hints

Proposal from Google: let the server selects the right asset


[Request]

GET /kitten.jpg HTTP/1.1
User-Agent: ...	
Accept: image/webp, image/jpg
CH: dpr=2.0

http://www.igvita.com/2013/08/29/automating-dpr-switching-with-client-hints/

What's
Next?

http://www.flickr.com/photos/barbostick/3581760713/ ba

Smart TV

W3C: Web and TV Interest Group

Panasonic Viera Smart TV

Automotive

proposals for standardizing HTML5-based vehicle APIs:

Tizen
Webinos
GENIVI
QNX

W3C: Automotive and Web Platform Business Group

QNX Auto Blog

Wearable Devices & IoT

http://imgur.com/g/memes/qKH2tM8

Thank you!

Tomomi Imura

Slide: http://girliemac.github.io/presentation-slides/html5-mobile-approach/rwd.html