Cross-Device Developmentwith Web Standards

Tomomi Imura

flickr.com/photos/64855052@N00/3967578543/ by Yoichi Nakanishi b

H E L L OM Y N A M E I S

Tomomi@girlie_m

ac

02

One Web Approach

Mobile Web Best Practices by W3C (2008)

One Web means making, as far as isreasonable, the same informationand services available to usersirrespective of the device they areusing. ”

“

Mobile Web Best Practices 1.0 (2008)

03

Form Factors · Screen Sizes

Adaptive Design

07

Adaptive Design

1. Progressive Enhancement

• Enhancing Experiences based on browser

capabilities

• Graceful Degradation - Fallbacks

2. Responsive Design

• Fluid Layout

• Media Queries

• Responsive Images08

Fluid LayoutNeue

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

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 Masonry10

Now and Future: CSS3 Layouts

• Columns

• Flexible Box ("FlexBox")

• Regions

• Grids

11

Fluid Columns

Demo on JSFiddle

12

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/

13

Flexbox Layout with MQ

Demo on JSFiddle

14

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/

15

Responsive Regions Layout

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

16

CSS Regions Module

A

1

2

3

4

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

17

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 iframe18

Responsive Grid

An arrangement suitable for ‘portrait’ orientation. An arrangement suitable for ‘landscape’ orientation.

10*

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

19

Media-Queries

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

CSS2.1 @media Media-Types

For mobile phones:

@media handheld {

/* Some mobile-specific CSS here */

}

Only supported by:

• Opera Mini

• OpenWave

• Obigo

• PIE (partial)21

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

22

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 */

}

23

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 */

}

24

CSS3: Media-Queries

combined with screen orientations

@media only screen

and (min-device-width : 768px)

and (max-device-width : 1024px)

and (orientation : landscape) {

/* Styles */

}...

25

CSS3: Media-Queries

CSS3, Hell Yeah!

@media only screen

and (max-width: calc(768px - 2em)) {

/* Styles */

}...

26

CSS3: Media-Queries

separate styles by device pixel ratio

27

High Pixel DensityDisplays

The High DPI

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

29

30

31

32

33

34

CSS Pixel vs. Device Pixel

• Pixel in CSS is relative

• 1 CSS pixel != 1 device pixel

35

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

36

Zoom Dependent Pixel Density

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

Test page (Firefox and Chrome 31+)37

Media-Queries for "Retina"

@media only screen and (min-device-pixel-ratio: 2) {

/* styles for hi-DPI screens */

}

38

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) {...}

39

Unprefix: resolution MQ

@media (-webkit-min-device-pixel-ratio: 2),

(min-resolution: 192dpi) {

...

}

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

40

...even easier

@media (-webkit-min-device-pixel-ratio: 2),

(min-resolution: 2dppx) {

...

}

29 16

41

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

42

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

if (mql.matches) {

/* the current orientation is in landscape */

} else {

/* portrait */

}

43

CSS Device Adaptation

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

↓ CSS

@viewport {

width: device-width;

}

44

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

45

@viewport in @media

@media screen and (orientation: portrait) {

@viewport {

width: 768px;

height: 1024px;

}

/* CSS for portrait layout goes here */

}

46

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

47

Media Queries Level 4

@media (hover) {

.menu li:hover {

background-color: #bada55;

}

}

48

MQ L4: Range Features

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

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

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

49

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

50

DOM Ambient Light Events Demo

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

0:2251

Responsive Images

flickr.com/photos/joaomoura/2348271655/ b n a

Responsive Images Use Cases

1. Resolution switching

2. Art Direction

3. DPR Switching (High-Res images)

53

Resolution switching

54

Art-Direction

instead of simple scaling

55

DPR Switching: High-Res Images

1x

2x56

Currently used methodsand problems

57

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

...

}

58

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

Fluid Resizing an Image

60

Fluid Resizing an Image

Shrink and Stretch without MQ

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

img {

width: 100%;

height: auto;

}

61

Yay

• Only one asset

• Easy to implement. No MQ breakpoints needed.

Meh

• CPU intensive

• Westing bandwidth

62

Art Direction: Cropping with CSS

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

63

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

}

}

64

CSS2 Clip Propertyposition: absolute;

clip: rect(top right bottom left);

Photo: http://www.flickr.com/photos/nicolelee/1798352472/ by Nicole Lee b n a

65

Yay

• Only one asset

Meh

• CSS clip is cumbersome

• Westing bandwidth

66

Up-Res for Hi-DPI Screens

67

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

}

}

68

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

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

70

Yay

• Less hassle syntax

Meh

• Not enough browser supports. Spec is unstable.

• Not semantic to use background for contents

71

Vector Graphics FTW!

72

SVG

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

73

Web Font Icons

36px 72px 108px

144px 288px

IcoMoon

74

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;

}

75

Other Solutions

• Javascript

• Mobify.js etc.

• Polyfills (Picturefill.js, x-picture/Polymer)

• Server-side

• "Adaptive Images" (PHP)

• Sencha.io Src (UA lookup in Cloud)

• Creative Hacks

• Clown Car Technique76

Responsive <img>?

77

O NOES! <img> was not made for the

responsive design!

78

We need a standard solution.

... or a few.

79

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

80

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

81

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/

82

What'sNext?

http://www.flickr.com/photos/barbostick/3581760713/ b a

Smart TV

W3C: Web and TV Interest Group

Panasonic Viera Smart TV

84

Automotive

proposals for standardizing HTML5-based

vehicle APIs:

• Tizen

• Webinos

• GENIVI

• QNX

W3C: Automotive and Web Platform Business Group

QNX Auto Blog

85

Wearable Devices & IoT

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

86

Thank you!

Tomomi Imura

• @girlie_mac

• girliemac.com

• github.com/girliemac

• speakerdeck.com/girlie_mac

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

approach/rwd.html87

88