Diese Präsentation wurde erfolgreich gemeldet.

Responsive design: techniques and tricks to prepare your websites for the multi-screen future

131

Teilen

Wird geladen in …3
×
1 von 131
1 von 131

Responsive design: techniques and tricks to prepare your websites for the multi-screen future

131

Teilen

Herunterladen, um offline zu lesen

Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.

I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.

Websites are viewed on all kinds of devices, in all kinds of browsers. In this presentation, I explain how you can adapt your site to these different environments, using modern browser hooks and techniques.

I cover the various aspects (and some gotchas) of the viewport mechanism and media queries, and shed a light on how new CSS3 properties allow you to optimize images and videos for multiple screens.

Weitere Verwandte Inhalte

Ähnliche Bücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Ähnliche Hörbücher

Kostenlos mit einer 14-tägigen Testversion von Scribd

Alle anzeigen

Responsive design: techniques and tricks to prepare your websites for the multi-screen future

  1. Responsive design: techniques and tricks to prepare your websites for the multi-screen future Andreas Bovens - Opera Software http://www.flickr.com/photos/redux/7145995789/
  2. Responsive design: techniques and tricks to prepare your websites for the multi-screen future Andreas Bovens - Opera Software http://www.flickr.com/photos/redux/7145995789/
  3. @andreasbovens
  4. “Patterns for Multiscreen Strategies” Coherence Syncronization Screen sharing By Precious http:/ /slidesha.re/kiip5y Device shifting Complementarity Simultaneity These patterns should help understand and define strategies for the multiscreen world.
  5. Coherence Syncronization Screen sharing Device shifting Complementarity Simultaneity These patterns should help understand and define strategies for the multiscreen world. http:/ /slidesha.re/kiip5y
  6. “A digital product or service looks and works coherently across devices. Features are optimized for specific device characteristics and usage scenarios.” Coherence http:/ /slidesha.re/kiip5y
  7. Coherence http://slidesha.re/kiip5y
  8. ?
  9. small screen rendering aka single column view
  10. zoom and pan
  11. “Nice, but how can we control this zooming behavior?”
  12. Let’s talk about the viewport mechanism
  13. This is the viewport.
  14. <meta ...> Using a "viewport" meta tag in the <head> of the page...
  15. ...we can control page width & height, zoom level, etc.
  16. This works in: with some exceptions ;-)
  17. http:/ /www.opera.com/developer/tools/mobile/
  18. HVGA portrait
  19. HVGA portrait
  20. HVGA portrait
  21. HVGA portrait
  22. HVGA portrait
  23. HVGA portrait
  24. HVGA portrait
  25. HVGA portrait
  26. HVGA portrait
  27. HVGA portrait
  28. HVGA portrait no viewport defined in <head>, so fallback to default of 980px, which is squeezed inside 320px.
  29. HVGA portrait <meta name="viewport" content="width=320">
  30. HVGA portrait <meta name="viewport" content="width=320">
  31. HVGA portrait HVGA landscape <meta name="viewport" content="width=320">
  32. HVGA portrait <meta name="viewport" content="width=device-width">
  33. HVGA portrait <meta name="viewport" content="width=device-width">
  34. HVGA portrait HVGA landscape <meta name="viewport" content="width=device-width">
  35. HVGA landscape HVGA landscape 480px 320px × 1.5 zoom
  36. HVGA portrait <meta name="viewport" content="initial-scale=1">
  37. HVGA portrait <meta name="viewport" content="initial-scale=1">
  38. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1">
  39. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1"> (same result as width=device-width)
  40. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=0.5">
  41. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=2">
  42. <meta name="viewport" content="width=device-width"> + <div style="width: 600px">
  43. HVGA portrait <meta name="viewport" content="width=device-width"> + <div style="width: 600px">
  44. HVGA portrait <meta name="viewport" content="width=device-width, initial-scale=1"> + <div style="width: 600px">
  45. other settings maximum-scale=... , minimum-scale=... <meta name="viewport" content="initial-scale=1, maximum-scale=1.5"> user-scalable=yes|no <meta name="viewport" content="width=320, user-scalable=no"> height=... <meta name="viewport" content="height=device-height">
  46. other settings maximum-scale=... , minimum-scale=... <meta name="viewport" content="initial-scale=1, maximum-scale=1.5"> user-scalable=yes|no <meta name="viewport" content="width=320, user-scalable=no"> height=... <meta name="viewport" content="height=device-height">
  47. other settings maximum-scale=... , minimum-scale=... <meta name="viewport" content="initial-scale=1, maximum-scale=1.5"> user-scalable=yes|no <meta name="viewport" content="width=320, user-scalable=no"> height=... <meta name="viewport" content="height=device-height">
  48. other settings maximum-scale=... , minimum-scale=... <meta name="viewport" content="initial-scale=1, maximum-scale=1.5"> user-scalable=yes|no <meta name="viewport" content="width=320, user-scalable=no"> height=... <meta name="viewport" content="height=device-height">
  49. Important! Make sure to use commas, not semi-colons as delimiters between viewport values! <meta name="viewport" content="initial-scale=1; user-scalable=no"> <meta name="viewport" content="initial-scale=1, user-scalable=no">
  50. caveats Android Browser doesn’t support user-scalable=no. IE interprets width=device-width as 320px. Safari on iPad always interprets width=device-width as 768px, although it’s 1024px wide in landscape mode. This can be overridden with initial-scale=1, which... triggers a zooming bug* on orientation change. * Patch: https:/ /github.com/scottjehl/iOS-Orientationchange-Fix
  51. http://www.flickr.com/photos/33284937@N04/4771132618/
  52. So, how to use this? Sniff for mobile browsers maybe?
  53. So, how to use this? Sniff for mobile browsers maybe? Better don’t sniff.
  54. Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00
  55. So, avoid sniffing, but if you really have to, provide a way for users to make corrections, and remember their preference.
  56. So, avoid sniffing, but if you really have to*, provide a way for users to make corrections, and remember their preference. * always ask yourself why the mobile site should be different from the desktop site
  57. * always ask yourself why the mobile site should be different from the desktop site customer requir ements tim e restrictions budget limitations capabilities are different different layout needed
  58. * always ask yourself why the mobile site should be different from the desktop site customer requir ements tim e restrictions budget limitations capabilities are different different layout needed
  59. * always ask yourself why the mobile site should be different from the desktop site customer requir ements tim e restrictions budget limitations capabilities are different different layout needed capability detection
  60. * always ask yourself why the mobile site should be different from the desktop site customer requir ements tim e restrictions budget limitations capabilities are different different layout needed capability detection viewport + media queries
  61. Let’s talk about media queries
  62. Media queries are conditional hooks for applying different CSS rules, depending on e.g. browser width or height, orientation, aspect ratio, etc.
  63. Differently said, media queries allow you to optimize your site layout for all kinds of form factors. Via http://mediaqueri.es/
  64. @media screen and (min-width: 400px) and (max-width: 800px) { article { /* css for browsers with width ≥ 400px and ≤ 800px */ } }
  65. @media screen and (aspect-ratio: 16/9) and (orientation: landscape) { article { /* css for browsers with an aspect ratio of 16/9 and orientation is landscape */ } }
  66. @media screen and (max-width: 800px) { article { /* css for browsers with width ≤ 800px */ } } @media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ } }
  67. @media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ } } Remember that mobile browsers have a default viewport width (e.g. 980px). For your mobile specific media queries to work, you need to set the viewport!
  68. default viewport. width=device-width. mobile specific media mobile specific media queries not applied. queries applied.
  69. The viewport and media queries combo allows you to create just one responsive site that works everywhere.
  70. Q: What do I start with, desktop or mobile? A: Do mobile first, and build up your desktop styles from there.
  71. Q: Which devices, screen sizes should I design for? A: All of them! Use content breakpoints, instead of device breakpoints and you’ll get a long way.
  72. http:/ /www.flickr.com/photos/33284937@N04/5445675024/
  73. Dealing with high-PPI “Retina” screens
  74. A pixel is not what it seems. Thus far, we’ve talked about pixels in terms of “CSS pixels”. One CSS pixel can be multiple device pixels.
  75. HVGA portrait almost WVGA portrait
  76. HVGA portrait almost WVGA portrait
  77. almost WVGA portrait Browser pretends that 480px is 320px.
  78. In most scenarios, you won’t have to worry about this. It just works.
  79. However, if you want to control PPI related stuff, these are the things you can do:
  80. almost WVGA portrait (1) Set the meta viewport’s target-densitydpi to device-dpi.
  81. almost WVGA portrait (1) Everything is shown at 100%. One CSS pixel is equal to one device pixel.
  82. almost WVGA portrait (2) Use special device- pixel-ratio media query to serve PPI-specific CSS.
  83. almost WVGA portrait I’ve set the 1500×1500px background-image to repeat every 1000px, making it crispy again. The rest of the content is still scaled 150%.
  84. caveats -o-max/min-device-pixel-ratio uses fractions instead of numbers. So 3/2, not 1.5. Watch out for max/min--moz-device-pixel-ratio.
  85. max/min-device-pixel-ratio might be dropped, and we get a resolution media query instead. @media screen and (min-device-pixel-ratio: 3/2) { body {background-size: 250px;} } would become: @media screen and (min-resolution: 1.5dppx) { body {background-size: 250px;} }
  86. almost WVGA portrait (3) Use high-res images to preserve crispiness.
  87. http:/ /www.w3.org/community/respimg/
  88. You will be able to specify multiple image sources: <picture> <source media="(orientation: landscape)" srcset="long.jpg 1x, long2.jpg 2x"> <source media="(orientation: portrait)" srcset="tall.jpg 1x, tall2.jpg 2x"> <img src="fallback.jpg" /> </picture>
  89. You already can specify multiple video sources: <video> <source type="video/webm" src="small.webm" media="all and (max-width: 480px)"> <source type="video/webm" src="large.webm" media="all and (min-width: 481px)" > </video>
  90. Sidenote about another responsive image technique: object-fit and object-position allow you to crop images
  91. simple resize
  92. resize with object-fit and object-position adjustments
  93. http:/ /dev.opera.com/articles/view/css3-object-fit-object-position/
  94. http://www.flickr.com/photos/33284937@N04/5588693890/
  95. Why do all this viewport stuff with <meta> tags? Isn’t this something for CSS?
  96. http:/ /dev.w3.org/csswg/css-device-adapt/
  97. <meta name="viewport" content="width=device- width, initial-scale=1, user-scalable=no"> becomes @viewport { width: device-width; zoom: 1; user-zoom: fixed; }
  98. <meta name="viewport" content="width=device- width, initial-scale=1, user-scalable=no"> becomes @-o-/-ms-viewport { width: device-width; zoom: 1; user-zoom: fixed; }
  99. http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
  100. Responsive design: techniques and tricks to prepare your websites for the multi-screen future Andreas Bovens - Opera Software http://www.flickr.com/photos/redux/7145995789/
  101. Responsive design: techniques and tricks to prepare your websites for the multi-screen future nt prese Andreas Bovens - Opera Software http://www.flickr.com/photos/redux/7145995789/
  102. Thank you! @andreasbovens Dosis font: http:/ /www.impallari.com/dosis Glyphicons: http:/ /glyphicons.com/glyphicons-licenses/ Corkboard background: http:/ /psd.tutsplus.com/freebies/texture/corkboard-texture-pack/

Notizen

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • ×