[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)

Cross-Device Development
with Web Standards
Tomomi Imura
flickr.com/photos/64855052@N00/3967578543/ by Yoichi Nakanishi b

H E L L O
M Y N A M E I S
Tomomi
@girlie_mac
02

One Web Approach
Mobile Web Best Practices by W3C (2008)
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 1.0 (2008)
03

Adaptive Design
1. Progressive Enhancement
• Enhancing Experiences based on browser
capabilities
• Graceful Degradation - Fallbacks
2. Responsive Design
• Fluid Layout
• Media Queries
• Responsive Images08

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 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;
}...
@mediaalland(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
<divclass="regionregion1"></div>
<divclass="regionregion2"></div> ...
<articleclass="content">contenthere...</article>
.content{flow-into:article;}
.region{flow-from:article;}
@mediascreenand(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 ba

CSS2.1 @media Media-Types
For mobile phones:
@mediahandheld{
/*Somemobile-specificCSShere*/
}
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)
@mediaonlyscreen
and(min-width:768px)
and(max-width:1024px){
/*Styles*/
}
23

CSS3: Media-Queries
by device-width, the width of the device's screen size
@mediaonlyscreen
and(min-device-width:320px)
and(max-device-width:480px){
/*Styles*/
}
24

CSS3: Media-Queries
combined with screen orientations
@mediaonlyscreen
and(max-device-width:1024px)
and(orientation:landscape){
/*Styles*/
}...
25

CSS3: Media-Queries
CSS3, Hell Yeah!
@mediaonlyscreen
and(max-width:calc(768px-2em)){
/*Styles*/
}...
26

CSS3: Media-Queries
separate styles by device pixel ratio
27

The High DPI
https://www.webkit.org/blog/55/high-dpi-web-sites/
29

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"
@mediaonlyscreenand(min-device-pixel-ratio:2){
/*stylesforhi-DPIscreens*/
}
38

WTF Vendor Prefix!
@mediaonlyscreenand(-webkit-min-device-pixel-ratio:1.5){...}
@mediaonlyscreenand(min--moz-device-pixel-ratio:1.5){...}
@mediaonlyscreenand(-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
(min-resolution:2dppx){
...
}
29 16
41

CSSOM View Module:
matchMedia()
approaching media-queries in DOM
varmql=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

varmql=window.matchMedia('(orientation:landscape)');
if(mql.matches){
/*thecurrentorientationisinlandscape*/
}else{
/*portrait*/
}
43

CSS Device Adaptation
<metaname="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
@mediascreenand(orientation:portrait){
@viewport{
width:768px;
height:1024px;
}
/*CSSforportraitlayoutgoeshere*/
}
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){
.menuli: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:22
51

Responsive Images
flickr.com/photos/joaomoura/2348271655/ bna

Responsive Images Use Cases
1. Resolution switching
2. Art Direction
3. DPR Switching (High-Res images)
53

Art-Direction
instead of simple scaling
55

DPR Switching: High-Res Images
1x
2x56

Currently used methods
and problems
57

Using Media-Queries
@mediaonlyscreen
and(max-device-width:1024px){
background-image:url(cat-tablet.jpg);
width:640px;height:320px;
}
@mediaonlyscreenand(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
Shrink and Stretch without MQ
<imgsrc="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
<divclass="image-container">
<imgsrc="images/sushi-large.jpg"></div>
.image-container{position:relative;}
.image-containerimg{position:absolute;}
@mediaonlyscreenand(max-width:480px){
.image-containerimg{
clip:rect(80px270px270px240px);//BLEH!!!
}
}64

CSS2 Clip Property
position:absolute;
clip:rect(toprightbottomleft);
Photo: http://www.flickr.com/photos/nicolelee/1798352472/ by Nicole Lee bna
65

Yay
• Only one asset
Meh
• CSS clip is cumbersome
• Westing bandwidth
66

Up-Res Images with MQ
.banner{
background-image:url(banner.png);
}
(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
• Some browsers download all assets (Tests by Tim
Kadlec)
69

Up-Res with CSS image-set()
<divid="photo01"></div>
#photo01{
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.
71

SVG
<imgsrc="logo.svg"width="432 ">
73

Web Font Icons
36px 72px 108px
144px 288px
  
  IcoMoon
74

Web Font Icons
<spandata-icon="">forkme</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

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
<imgalt="TheBreakfastCombo"
src="banner.jpeg"
srcset="banner-HD.jpeg2x,
banner-phone.jpeg100w,
banner-phone-HD.jpeg100w2x">
WebKit Nightly r154002
The srcset attribute - An HTML extension for adaptive images
80

Picture Element
Proposal RespImg CG
<picturewidth="500"height="500">
<sourcemedia="(min-width:45em)"src="large.jpg">
<sourcemedia="(min-width:18em)"src="med.jpg">
<sourcesrc="small.jpg">
<imgsrc="fallback.jpg">
<p>Accessibletext</p>
</picture>
Responsive Images Community Group
81

HTTP Client-Hints
Proposal from Google: let the server selects the right asset
[Request]
GET/kitten.jpgHTTP/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's
Next?
http://www.flickr.com/photos/barbostick/3581760713/ ba

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

[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)

More Related Content

Similar to [SF HTML5] Responsive Cross-Device Development with Web Standards (2013) (20)

More from Tomomi Imura (20)

Recently uploaded (20)

[SF HTML5] Responsive Cross-Device Development with Web Standards (2013)