[CSS Dev Conf: "The Shining" ver.] 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(), device adaptation, MQ Level 4), fluid layout "neue" with CSS 3, and responsive images.

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

thanks :-)

Transcript

1. Cross-Device Development with Web Standards Tomomi Imura flickr.com/photos/64855052@N00/3967578543/ by Yoichi Nakanishi b
2. @ The Stanley Hotel
3. H E L L O M Y N A M E I S Tomomi @girlie_mac 03
4. 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) 04
5. Form Factors · Screen Sizes
8. Adaptive Design 08
9. Adaptive Design 1. Progressive Enhancement • Enhancing Experiences based on browser capabilities • Graceful Degradation - Fallbacks 2. Responsive Design • Fluid Layout • Media Queries • Responsive Images 09
10. Responsive Web Design 10
11. Responsive Web Design mediaqueri.es 11
12. Why Should You Consider? • One URL works across the browsers • No redirect • No User-Agent sniffing • Maintainable • A single content • No separate markup 12
13. Fluid Layout Neue flickr.com/photos/meantux/378103724/ by Denis-Carl Robidoux bn
14. 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 14
15. Now and Future: CSS3 • Column • Flexible Box Layout ("FlexBox") • Grid Layout 15
16. Fluid Columns Demo on JSFiddle 16
17. 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/ 17
18. Flexbox Layout with MQ Demo on JSFiddle 18
19. 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/ 19
20. Grid Layout with MQ An arrangement suitable for ‘portrait’ orientation. An arrangement suitable for ‘landscape’ orientation. 10* http://www.w3.org/TR/css3-grid-layout/ 20
21. Media-Queries http://commons.wikimedia.org/wiki/File:Metric_Volume_Measuring_Vessels_Frontsides-In_use.jpg ba
22. 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) 22
23. 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... 23
24. CSS3: Media-Queries Separate styles by the width of the target viewport @ 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 * / } 24
25. 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 * / } 25
26. 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 * / } . . . 26
27. 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 * / } . . . 27
28. CSS3: Media-Queries separate styles by device pixel ratio 28
29. High Pixel Density Displays
30. The High DPI https://www.webkit.org/blog/55/high-dpi-web-sites/ 30
36. CSS Pixel vs. Device Pixel • Pixel in CSS is relative • 1 CSS pixel != 1 device pixel 36
37. 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 37
38. Zoom Dependent Pixel Density ⌘+ and ⌘- , but not for pinch-zoom Test page (Firefox and Chrome 31+) 38
39. 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 * / } 39
40. 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 ) { . . . } 40
41. 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) 41
42. ...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 42
43. 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 43
44. matchMedia() 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 * / } 44
45. 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 ; } 45
46. 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 46
47. @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 * / } 47
48. 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 48
49. 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 ; } } 49
50. MQ L4 - Ambient Light Detection @ m e d i a ( l u m i n o s i t y : n o r m a l ) { / * n o r m a l l i g h t e n v i r o n m e n t - n o a d j u s t m e n t n e e d e d * / } @ m e d i a ( l u m i n o s i t y : d i m ) { / * s t y l e s f o r d i m m e d l i g h t e n v i r o n m e n t * / } @ m e d i a ( l u m i n o s i t y : w a s h e d ) { / * s t y l e s f o r b r i g h t l i g h t e n v - e . g . u n d e r s u n l i g h t * / } http://dev.w3.org/csswg/mediaqueries4/#luminosity 50
51. Responsive Images flickr.com/photos/joaomoura/2348271655/ bna
52. Responsive Images Use Cases 1. Resolution switching 2. Art Direction 3. High-res images for screens with higher DPR 52
53. Methods • Providing different images with media-queries • ...with JavaScript • ...with server-side content negotiation • Resizing / cropping a single image • Creative Hacks • New: proposed solutions 53
54. Different images with MQ Resolution switching 54
55. Different images with MQ Art-Direction, instead of simple scaling 55
56. Dynamically Resizing an Image 56
57. Dynamically 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 ; } 57
58. Art Direction: Cropping with CSS https://dl.dropboxusercontent.com/u/1330446/tests/clip.html 58
59. 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 ! ! ! } } 59
60. 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 60
61. High Resolution Images 1x 2x 61
62. Blurry Images on Hi-DPI Screens 62
63. 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 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 : 2 ) , o n l y s c r e e n a n d ( 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 % ; } } 63
64. 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 20 15bl CSS Image Values and Replaced Content Module Level 4 64
65. Heavy resource loading Hi-Res Image loading problems: • Large sizes • Extra http requests * • Image resizing performance • Data transfer cost • Battery consumption 65
66. SVG < i m g s r c = " l o g o . s v g " w i d t h = "4 3 2 " > 66
67. Web Font Icons 36px 72px 108px 144px 288px      IcoMoon 67
68. 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 ; } 68
69. Other Solutions • JavaScript • matchMedia() • Picturefill.js • Server-side • "Adaptive Images" (PHP) • Sencha.io Src (UA lookup in DB) • Creative Hacks • Clown Car Technique 69
70. Responsive <img>? O NOES! <img> was not made for the responsive design! 70
71. Responsive <img>? We need a solution. ... or two. 71
72. The srcset attribute Proposal by Apple < 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 72
73. Picture Element Proposal by 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 73
74. 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/ 74
75. What's Next? http://www.flickr.com/photos/barbostick/3581760713/ ba
76. Smart TV W3C: Web and TV Interest Group Panasonic Viera Smart TV 76
77. Automotive proposals for standardizing HTML5-based vehicle APIs: • Tizen • Webinos • GENIVI • QNX W3C: Automotive and Web Platform Business Group QNX Auto Blog 77
78. Wearable Devices & IoT http://imgur.com/g/memes/qKH2tM8 78
79. 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 79
80. http://motleynews.net/2012/07/12/the-parting-shot-for-july-12-2012/