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

1b741e5d8f5efe12c6307db4ebfab8f9?s=47 Tomomi Imura
November 15, 2013

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

Cross-device development using standard technologies- current stable state and emerging standards.

I am covering media-queries (incl. high-DPI screen support, matchMedia(), MQ Level 4), Fluid Layout Neue with CSS 3 (regions, columns, flex box, and grids), and responsive images.

The interactive slides (in html) is hosted on Github:
http://girliemac.github.io/presentation-slides/html5-mobile-approach/rwd.html

thanks :-)

1b741e5d8f5efe12c6307db4ebfab8f9?s=128

Tomomi Imura

November 15, 2013
Tweet

Transcript

  1. 2.

    H E L L O M Y N A M

    E I S Tomomi @girlie_mac 02
  2. 3.

    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
  3. 5.
  4. 6.
  5. 8.

    Adaptive Design 1. Progressive Enhancement • Enhancing Experiences based on

    browser capabilities • Graceful Degradation - Fallbacks 2. Responsive Design • Fluid Layout • Media Queries • Responsive Images 08
  6. 10.

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

    Now and Future: CSS3 Layouts • Columns • Flexible Box

    ("FlexBox") • Regions • Grids 11
  8. 13.

    CSS Multi-column Layout Module . c o l { -

    w e b k i t - c o l u m n s : 2 0 0 p x ; - m o z - c o l u m n s : 2 0 0 p x ; c o l u m n s : 2 0 0 p x ; / * c o l u m n - c o u n t : a u t o * / } Browser Support: * 2.1* 3* 7* * 10 11.5p 15Bl* http://www.w3.org/TR/css3-multicol/ 13
  9. 15.

    CSS Flexible Box Layout Module # m a i n

    { d i s p l a y : f l e x ; f l e x - f l o w : r o w ; } . . . @ m e d i a a l l a n d ( m a x - w i d t h : 6 4 0 p x ) { # m a i n { f l e x - f l o w : c o l u m n ; } } Latest syntax: 21* 7* 10* 11 12p 15Bl http://www.w3.org/TR/css3-flexbox/ 15
  10. 18.

    Responsive Regions Layout < d i v c l a

    s s = " r e g i o n r e g i o n 1 " > < / d i v > < d i v c l a s s = " r e g i o n r e g i o n 2 " > < / d i v > . . . < a r t i c l e c l a s s = " c o n t e n t " > c o n t e n t h e r e . . . < / a r t i c l e > . c o n t e n t { f l o w - i n t o : a r t i c l e ; } . r e g i o n { f l o w - f r o m : a r t i c l e ; } @ m e d i a s c r e e n a n d ( m a x - w i d t h : 4 0 0 p x ) { . c o n t e n t { f l o w - i n t o : n o n e ; } . r e g i o n { d i s p l a y : n o n e ; } } 7* 10* IE10 requires iframe 18
  11. 19.

    Responsive Grid An arrangement suitable for ‘portrait’ orientation. An arrangement

    suitable for ‘landscape’ orientation. 10* http://www.w3.org/TR/css3-grid-layout/ 19
  12. 21.

    CSS2.1 @media Media-Types For mobile phones: @ m e d

    i a h a n d h e l d { / * S o m e m o b i l e - s p e c i f i c C S S h e r e * / } Only supported by: • Opera Mini • OpenWave • Obigo • PIE (partial) 21
  13. 22.

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

    CSS3: Media-Queries Separate styles by the width of the target

    viewport (browser display area) @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 7 6 8 p x ) a n d ( m a x - w i d t h : 1 0 2 4 p x ) { / * S t y l e s * / } 23
  15. 24.

    CSS3: Media-Queries by device-width, the width of the device's screen

    size @ m e d i a o n l y s c r e e n a n d ( m i n - d e v i c e - w i d t h : 3 2 0 p x ) a n d ( m a x - d e v i c e - w i d t h : 4 8 0 p x ) { / * S t y l e s * / } 24
  16. 25.

    CSS3: Media-Queries combined with screen orientations @ m e d

    i a o n l y s c r e e n a n d ( m i n - d e v i c e - w i d t h : 7 6 8 p x ) a n d ( m a x - d e v i c e - w i d t h : 1 0 2 4 p x ) a n d ( o r i e n t a t i o n : l a n d s c a p e ) { / * S t y l e s * / } . . . 25
  17. 26.

    CSS3: Media-Queries CSS3, Hell Yeah! @ m e d i

    a o n l y s c r e e n a n d ( m a x - w i d t h : c a l c ( 7 6 8 p x - 2 e m ) ) { / * S t y l e s * / } . . . 26
  18. 30.

    30

  19. 31.

    31

  20. 32.

    32

  21. 33.

    33

  22. 34.

    34

  23. 35.

    CSS Pixel vs. Device Pixel • Pixel in CSS is

    relative • 1 CSS pixel != 1 device pixel 35
  24. 36.

    Pixel Density in DOM w i n d o w

    . d e v i c e P i x e l R a t i o 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
  25. 37.

    Zoom Dependent Pixel Density ⌘+ and ⌘- , but not

    for pinch-zoom Test page (Firefox and Chrome 31+) 37
  26. 38.

    Media-Queries for "Retina" @ m e d i a o

    n l y s c r e e n a n d ( m i n - d e v i c e - p i x e l - r a t i o : 2 ) { / * s t y l e s f o r h i - D P I s c r e e n s * / } 38
  27. 39.

    WTF Vendor Prefix! @ m e d i a o

    n l y s c r e e n a n d ( - w e b k i t - m i n - d e v i c e - p i x e l - r a t i o : 1 . 5 ) { . . . } @ m e d i a o n l y s c r e e n a n d ( m i n - - m o z - d e v i c e - p i x e l - r a t i o : 1 . 5 ) { . . . } @ m e d i a o n l y s c r e e n a n d ( - o - m i n - d e v i c e - p i x e l - r a t i o : 3 / 2 ) { . . . } 39
  28. 40.

    Unprefix: resolution MQ @ m e d i a (

    - w e b k i t - m i n - d e v i c e - p i x e l - r a t i o : 2 ) , ( m i n - r e s o l u t i o n : 1 9 2 d p i ) { . . . } Typical Browser: 96dpi (96 CSS-pixel in 1 CSS-inch) 40
  29. 41.

    ...even easier @ m e d i a ( -

    w e b k i t - m i n - d e v i c e - p i x e l - r a t i o : 2 ) , ( m i n - r e s o l u t i o n : 2 d p p x ) { . . . } 29 16 41
  30. 42.

    CSSOM View Module: matchMedia() approaching media-queries in DOM v a

    r m q l = w i n d o w . m a t c h M e d i a ( m e d i a Q u e r y S t r i n g ) ; Browser Support: 9 3 5 10 6 10 12.1p 15Bl http://dev.w3.org/csswg/cssom-view/#the-mediaquerylist-interface 42
  31. 43.

    v a r m q l = w i n

    d o w . m a t c h M e d i a ( ' ( o r i e n t a t i o n : l a n d s c a p e ) ' ) ; i f ( m q l . m a t c h e s ) { / * t h e c u r r e n t o r i e n t a t i o n i s i n l a n d s c a p e * / } e l s e { / * p o r t r a i t * / } 43
  32. 44.

    CSS Device Adaptation < m e t a n a

    m e = " v i e w p o r t " c o n t e n t = " w i d t h = d e v i c e - w i d t h " > ↓ CSS @ v i e w p o r t { w i d t h : d e v i c e - w i d t h ; } 44
  33. 45.

    CSS Device Adaptation @ - o - v i e

    w p o r t { w i d t h : d e v i c e - w i d t h } @ - m s - v i e w p o r t { w i d t h : d e v i c e - w i d t h } * @ v i e w p o r t { w i d t h : d e v i c e - w i d t h } 11P 10 * bug in IE10 - reports in device pixel value 45
  34. 46.

    @viewport in @media @ m e d i a s

    c r e e n a n d ( o r i e n t a t i o n : p o r t r a i t ) { @ v i e w p o r t { w i d t h : 7 6 8 p x ; h e i g h t : 1 0 2 4 p x ; } / * C S S f o r p o r t r a i t l a y o u t g o e s h e r e * / } 46
  35. 47.

    Media Queries Level 4 • "pointer" - accuracy of a

    pointing device. • n o n e • c o a r s e aka "fat finger" • f i n e • "hover" • 0 • 1 http://dev.w3.org/csswg/mediaqueries4/#pointer 47
  36. 48.

    Media Queries Level 4 @ m e d i a

    ( h o v e r ) { . m e n u l i : h o v e r { b a c k g r o u n d - c o l o r : # b a d a 5 5 ; } } 48
  37. 49.

    MQ L4: Range Features @ m e d i a

    ( m i n - h e i g h t : 6 0 0 p x ) { . . . } ↓ @ m e d i a ( h e i g h t > = 6 0 0 p x ) { . . . } http://dev.w3.org/csswg/mediaqueries/#mq-range-context 49
  38. 50.

    MQ L4: Luminosity @ m e d i a (

    l u m i n o s i t y : n o r m a l ) { b o d y { b a c k g r o u n d - c o l o r : # d d d ; c o l o r : # 0 0 0 ; } } @ m e d i a ( l u m i n o s i t y : d i m ) { b o d y { b a c k g r o u n d - c o l o r : # 4 4 4 ; c o l o r : # f f f ; } } @ m e d i a ( l u m i n o s i t y : w a s h e d ) { b o d y { b a c k g r o u n d - c o l o r : # f f f ; c o l o r : # 3 3 3 ; } } http://dev.w3.org/csswg/mediaqueries4/#luminosity 50
  39. 58.

    Using Media-Queries @ m e d i a o n

    l y s c r e e n a n d ( m i n - d e v i c e - w i d t h : 7 6 8 p x ) a n d ( m a x - d e v i c e - w i d t h : 1 0 2 4 p x ) { b a c k g r o u n d - i m a g e : u r l ( c a t - t a b l e t . j p g ) ; w i d t h : 6 4 0 p x ; h e i g h t : 3 2 0 p x ; } @ m e d i a o n l y s c r e e n a n d ( m i n - w i d t h : 1 2 2 4 p x ) { b a c k g r o u n d - i m a g e : u r l ( c a t - d e s k t o p . j p g ) ; . . . } 58
  40. 59.

    Yay • Easy enough. No scripts. Meh • Hard to

    figure out MQ Breakpoint • Not semantic to use b a c k g r o u n d for contents • Some browsers download all assets (Tests by Tim Kadlec) 59
  41. 61.

    Fluid Resizing an Image Shrink and Stretch without MQ <

    i m g s r c = " i m a g e s / r e l a t i v e l y - l a r g e - p h o t o . j p g " a l t = " c a t " > i m g { w i d t h : 1 0 0 % ; h e i g h t : a u t o ; } 61
  42. 62.

    Yay • Only one asset • Easy to implement. No

    MQ breakpoints needed. Meh • CPU intensive • Westing bandwidth 62
  43. 64.

    CSS2 Clip Property < d i v c l a

    s s = " i m a g e - c o n t a i n e r " > < i m g s r c = " i m a g e s / s u s h i - l a r g e . j p g " > < / d i v > . i m a g e - c o n t a i n e r { p o s i t i o n : r e l a t i v e ; } . i m a g e - c o n t a i n e r i m g { p o s i t i o n : a b s o l u t e ; } @ m e d i a o n l y s c r e e n a n d ( m a x - w i d t h : 4 8 0 p x ) { . i m a g e - c o n t a i n e r i m g { c l i p : r e c t ( 8 0 p x 2 7 0 p x 2 7 0 p x 2 4 0 p x ) ; / / B L E H ! ! ! } } 64
  44. 65.

    CSS2 Clip Property p o s i t i o

    n : a b s o l u t e ; c l i p : r e c t ( t o p r i g h t b o t t o m l e f t ) ; Photo: http://www.flickr.com/photos/nicolelee/1798352472/ by Nicole Lee bna 65
  45. 66.

    Yay • Only one asset Meh • CSS clip is

    cumbersome • Westing bandwidth 66
  46. 68.

    Up-Res Images with MQ . b a n n e

    r { b a c k g r o u n d - i m a g e : u r l ( b a n n e r . p n g ) ; w i d t h : 3 2 0 p x ; h e i g h t : 1 6 0 p x ; } @ m e d i a ( - w e b k i t - m i n - d e v i c e - p i x e l - r a t i o : 2 ) , ( m i n - r e s o l u t i o n : 2 d p p x ) { . b a n n e r { b a c k g r o u n d - i m a g e : u r l ( b a n n e r - 2 x . p n g ) ; b a c k g r o u n d - s i z e : 1 0 0 % ; } } 68
  47. 69.

    Yay • Simple enough to implement Meh • Browser-dependent MQ

    data types / prefix • Not semantic to use b a c k g r o u n d for contents • Some browsers download all assets (Tests by Tim Kadlec) 69
  48. 70.

    Up-Res with CSS image-set() < d i v i d

    = " p h o t o 0 1 " > < / d i v > # p h o t o 0 1 { w i d t h : 3 0 0 p x ; h e i g h t : 2 0 0 p x ; b a c k g r o u n d - i m a g e : u r l ( i m a g e s / l o w r e s . j p g ) ; b a c k g r o u n d - i m a g e : - w e b k i t - i m a g e - s e t ( u r l ( i m a g e s / l o w r e s . j p g ) 1 x , u r l ( i m a g e s / h i r e s . j p g ) 2 x ) ; } 6* 19* 15bl* CSS Image Values and Replaced Content Module Level 4 70
  49. 71.

    Yay • Less hassle syntax Meh • Not enough browser

    supports. Spec is unstable. • Not semantic to use b a c k g r o u n d for contents 71
  50. 73.

    SVG < i m g s r c = "

    l o g o . s v g " w i d t h = "4 3 2 " > 73
  51. 75.

    Web Font Icons < s p a n d a

    t a - i c o n = " & # x e 0 0 0 ; " > f o r k m e < / s p a n > @ f o n t - f a c e { f o n t - f a m i l y : ' i c o n s ' ; s r c : u r l ( ' f o n t s / i c o n s . w o f f ' ) f o r m a t ( ' w o f f ' ) ; } [ d a t a - i c o n ] : : b e f o r e { f o n t - f a m i l y : ' i c o n s ' ; c o n t e n t : a t t r ( d a t a - i c o n ) ; f o n t - s i z e : 7 2 p x ; } 75
  52. 76.

    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 Technique 76
  53. 80.

    The srcset attribute Proposal by Apple & adopted by WhatWG

    < i m g a l t = " T h e B r e a k f a s t C o m b o " s r c = " b a n n e r . j p e g " s r c s e t = " b a n n e r - H D . j p e g 2 x , b a n n e r - p h o n e . j p e g 1 0 0 w , b a n n e r - p h o n e - H D . j p e g 1 0 0 w 2 x " > WebKit Nightly r154002 The srcset attribute - An HTML extension for adaptive images 80
  54. 81.

    Picture Element Proposal RespImg CG < p i c t

    u r e w i d t h = " 5 0 0 " h e i g h t = " 5 0 0 " > < s o u r c e m e d i a = " ( m i n - w i d t h : 4 5 e m ) " s r c = " l a r g e . j p g " > < s o u r c e m e d i a = " ( m i n - w i d t h : 1 8 e m ) " s r c = " m e d . j p g " > < s o u r c e s r c = " s m a l l . j p g " > < i m g s r c = " f a l l b a c k . j p g " > < p > A c c e s s i b l e t e x t < / p > < / p i c t u r e > Responsive Images Community Group 81
  55. 82.

    HTTP Client-Hints Proposal from Google: let the server selects the

    right asset [ R e q u e s t ] G E T / k i t t e n . j p g H T T P / 1 . 1 U s e r - A g e n t : . . . A c c e p t : i m a g e / w e b p , i m a g e / j p g C H : d p r = 2 . 0 http://www.igvita.com/2013/08/29/automating-dpr-switching-with-client-hints/ 82
  56. 85.

    Automotive proposals for standardizing HTML5-based vehicle APIs: • Tizen •

    Webinos • GENIVI • QNX W3C: Automotive and Web Platform Business Group QNX Auto Blog 85
  57. 87.

    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.html 87
  58. 88.

    88