Responsive design: techniques andtricks to prepare your websites forthe multi-screen future                         Andrea...
Responsive design: techniques andtricks to prepare your websites forthe multi-screen future                         Andrea...
@andreasbovens
“Patterns forMultiscreenStrategies”                                  Coherence                      Syncronization        ...
Coherence                      Syncronization                   Screen sharing     Device shifting                 Complem...
“A digital product orservice looks andworks coherentlyacross devices.Features areoptimized forspecific devicecharacteristic...
Coherence        http://slidesha.re/kiip5y
?
small screen rendering         aka single column view
zoom and pan
“Nice, but how can we controlthis zooming behavior?”
Let’s talk about theviewport mechanism
This is the viewport.
<meta ...>             Using a "viewport"             meta tag in the             <head> of the page...
...we can control pagewidth & height, zoomlevel, etc.
This works in:with some exceptions ;-)
http:/     /www.opera.com/developer/tools/mobile/
HVGA portrait
HVGA portrait
HVGA portrait
HVGA portrait
HVGA portrait
HVGA portrait
HVGA portrait
HVGA portrait
HVGA portrait
HVGA portrait
HVGA portrait                no viewport defined in <head>,                so fallback to default of 980px,                ...
HVGA portrait                <meta name="viewport"                content="width=320">
HVGA portrait                <meta name="viewport"                content="width=320">
HVGA portrait   HVGA landscape                <meta name="viewport"                content="width=320">
HVGA portrait                <meta name="viewport"                content="width=device-width">
HVGA portrait                <meta name="viewport"                content="width=device-width">
HVGA portrait   HVGA landscape                <meta name="viewport"                content="width=device-width">
HVGA landscape   HVGA landscape      480px                       320px × 1.5 zoom
HVGA portrait                <meta name="viewport"                content="initial-scale=1">
HVGA portrait                <meta name="viewport"                content="initial-scale=1">
HVGA portrait   HVGA landscape                <meta name="viewport"                content="initial-scale=1">
HVGA portrait   HVGA landscape                <meta name="viewport"                content="initial-scale=1">             ...
HVGA portrait   HVGA landscape                <meta name="viewport"                content="initial-scale=0.5">
HVGA portrait   HVGA landscape                <meta name="viewport"                content="initial-scale=2">
<meta name="viewport"content="width=device-width">+<div style="width: 600px">
HVGA portrait                <meta name="viewport"                content="width=device-width">                +          ...
HVGA portrait                <meta name="viewport"                content="width=device-width,                initial-scal...
other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user...
other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user...
other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user...
other settingsmaximum-scale=... , minimum-scale=...<meta name="viewport" content="initial-scale=1, maximum-scale=1.5">user...
Important!Make sure to use commas, not semi-colonsas delimiters between viewport values! <meta name="viewport" content="in...
caveatsAndroid Browser doesn’t support user-scalable=no.IE interprets width=device-width as 320px.Safari on iPad always in...
http://www.flickr.com/photos/33284937@N04/4771132618/
So, how to use this?Sniff for mobilebrowsers maybe?
So, how to use this?Sniff for mobilebrowsers maybe?Better don’t sniff.
Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00
So, avoid sniffing,but if you really have to,provide a way for usersto make corrections,and remember theirpreference.
So, avoid sniffing,but if you really have to*,provide a way for usersto make corrections,and remember theirpreference.* alw...
* always ask yourself why the mobile site should be     different from the desktop sitecustomer requir                  em...
* always ask yourself why the mobile site should be     different from the desktop sitecustomer requir                  em...
* always ask yourself why the mobile site should be     different from the desktop sitecustomer requir                   e...
* always ask yourself why the mobile site should be     different from the desktop sitecustomer requir                   e...
Let’s talk about media queries
Media queries are conditionalhooks for applying differentCSS rules, depending on e.g.browser width or height,orientation, ...
Differently said, media queriesallow you to optimize your sitelayout for all kinds of form factors.                       ...
@media screen         and (min-width: 400px)         and (max-width: 800px) {   article {      /* css for browsers with wi...
@media screen         and (aspect-ratio: 16/9)         and (orientation: landscape) {   article {      /* css for browsers...
@media screen         and (max-width: 800px) {   article {      /* css for browsers with width ≤ 800px */      } }@media s...
@media screen and (max-width: 400px) {     article {        /* css for browsers with width ≤ 400px */        }   }Remember...
default viewport.      width=device-width.mobile specific media    mobile specific media queries not applied.      queries a...
The viewport and media queriescombo allows you to createjust one responsive sitethat works everywhere.
Q: What do I start with, desktop or mobile?A: Do mobile first, and build up your desktopstyles from there.
Q: Which devices, screen sizes should I design for?A: All of them! Use content breakpoints, instead ofdevice breakpoints a...
http:/     /www.flickr.com/photos/33284937@N04/5445675024/
Dealing withhigh-PPI “Retina” screens
A pixel is not what it seems.Thus far, we’ve talked aboutpixels in terms of “CSS pixels”.One CSS pixel can be multipledevi...
HVGA portraitalmost WVGA portrait
HVGA portraitalmost WVGA portrait
almost WVGA portraitBrowser pretendsthat 480px is 320px.
In most scenarios, you won’thave to worry about this.It just works.
However, if you want tocontrol PPI related stuff,these are the things you can do:
almost WVGA portrait(1)Set the metaviewport’starget-densitydpito device-dpi.
almost WVGA portrait(1)Everything isshown at 100%.One CSS pixel isequal to one devicepixel.
almost WVGA portrait(2)Use special device-pixel-ratio mediaquery to servePPI-specific CSS.
almost WVGA portraitI’ve set the1500×1500pxbackground-imageto repeat every1000px, making itcrispy again. Therest of the co...
caveats-o-max/min-device-pixel-ratio uses fractionsinstead of numbers. So 3/2, not 1.5.Watch out for max/min--moz-device-p...
max/min-device-pixel-ratio might be dropped,and we get a resolution media query instead.@media screen and (min-device-pixe...
almost WVGA portrait(3)Use high-resimages to preservecrispiness.
http:/     /www.w3.org/community/respimg/
You will be able to specify multiple image sources:  <picture>  <source media="(orientation: landscape)"  srcset="long.jpg...
You already can specify multiple video sources:  <video>  <source type="video/webm" src="small.webm"  media="all and (max-...
Sidenote about another responsive image technique:object-fit and object-position allow you to crop images
simple resize
resize withobject-fit andobject-positionadjustments
http:/     /dev.opera.com/articles/view/css3-object-fit-object-position/
http://www.flickr.com/photos/33284937@N04/5588693890/
Why do all this viewportstuff with <meta> tags?Isn’t this something for CSS?
http:/     /dev.w3.org/csswg/css-device-adapt/
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">becomes@viewport {  width: device-wi...
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">becomes@-o-/-ms-viewport {  width: d...
http:/     /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
Responsive design: techniques andtricks to prepare your websites forthe multi-screen future                         Andrea...
Responsive design: techniques andtricks to prepare your websites forthe multi-screen future nt                   prese    ...
Thank you!                                              @andreasbovensDosis font: http:/                 /www.impallari.co...
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Responsive design: techniques and tricks to prepare your websites for the multi-screen future
Prochain SlideShare
Chargement dans... 5
×

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

118,455

Published on

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.

Published in: Technologies, Affaires
1 Comment
129 mentions J'aime
Statistiques
Remarques
Aucun téléchargement
Vues
Total des vues
118,455
Sur Slideshare
0
À partir des ajouts
0
Nombre d'ajouts
95
Actions
Partages
0
Téléchargements
1,007
Commentaires
1
J'aime
129
Ajouts 0
No embeds

No notes for slide
  • \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
  • Responsive design: techniques and tricks to prepare your websites for the multi-screen future

    1. 1. Responsive design: techniques andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
    2. 2. Responsive design: techniques andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
    3. 3. @andreasbovens
    4. 4. “Patterns forMultiscreenStrategies” Coherence Syncronization Screen sharingBy Precioushttp:/ /slidesha.re/kiip5y Device shifting Complementarity Simultaneity These patterns should help understand and define strategies for the multiscreen world.
    5. 5. Coherence Syncronization Screen sharing Device shifting Complementarity SimultaneityThese patterns should help understand and define strategies for the multiscreen world. http:/ /slidesha.re/kiip5y
    6. 6. “A digital product orservice looks andworks coherentlyacross devices.Features areoptimized forspecific devicecharacteristics andusage scenarios.” Coherence http:/ /slidesha.re/kiip5y
    7. 7. Coherence http://slidesha.re/kiip5y
    8. 8. ?
    9. 9. small screen rendering aka single column view
    10. 10. zoom and pan
    11. 11. “Nice, but how can we controlthis zooming behavior?”
    12. 12. Let’s talk about theviewport mechanism
    13. 13. This is the viewport.
    14. 14. <meta ...> Using a "viewport" meta tag in the <head> of the page...
    15. 15. ...we can control pagewidth & height, zoomlevel, etc.
    16. 16. This works in:with some exceptions ;-)
    17. 17. http:/ /www.opera.com/developer/tools/mobile/
    18. 18. HVGA portrait
    19. 19. HVGA portrait
    20. 20. HVGA portrait
    21. 21. HVGA portrait
    22. 22. HVGA portrait
    23. 23. HVGA portrait
    24. 24. HVGA portrait
    25. 25. HVGA portrait
    26. 26. HVGA portrait
    27. 27. HVGA portrait
    28. 28. HVGA portrait no viewport defined in <head>, so fallback to default of 980px, which is squeezed inside 320px.
    29. 29. HVGA portrait <meta name="viewport" content="width=320">
    30. 30. HVGA portrait <meta name="viewport" content="width=320">
    31. 31. HVGA portrait HVGA landscape <meta name="viewport" content="width=320">
    32. 32. HVGA portrait <meta name="viewport" content="width=device-width">
    33. 33. HVGA portrait <meta name="viewport" content="width=device-width">
    34. 34. HVGA portrait HVGA landscape <meta name="viewport" content="width=device-width">
    35. 35. HVGA landscape HVGA landscape 480px 320px × 1.5 zoom
    36. 36. HVGA portrait <meta name="viewport" content="initial-scale=1">
    37. 37. HVGA portrait <meta name="viewport" content="initial-scale=1">
    38. 38. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1">
    39. 39. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1"> (same result as width=device-width)
    40. 40. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=0.5">
    41. 41. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=2">
    42. 42. <meta name="viewport"content="width=device-width">+<div style="width: 600px">
    43. 43. HVGA portrait <meta name="viewport" content="width=device-width"> + <div style="width: 600px">
    44. 44. HVGA portrait <meta name="viewport" content="width=device-width, initial-scale=1"> + <div style="width: 600px">
    45. 45. other settingsmaximum-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. 46. other settingsmaximum-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. 47. other settingsmaximum-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. 48. other settingsmaximum-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. 49. Important!Make sure to use commas, not semi-colonsas 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. 50. caveatsAndroid Browser doesn’t support user-scalable=no.IE interprets width=device-width as 320px.Safari on iPad always interprets width=device-widthas 768px, although it’s 1024px wide in landscapemode. This can be overridden with initial-scale=1,which... triggers a zooming bug* on orientationchange. * Patch: https:/ /github.com/scottjehl/iOS-Orientationchange-Fix
    51. 51. http://www.flickr.com/photos/33284937@N04/4771132618/
    52. 52. So, how to use this?Sniff for mobilebrowsers maybe?
    53. 53. So, how to use this?Sniff for mobilebrowsers maybe?Better don’t sniff.
    54. 54. Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00
    55. 55. So, avoid sniffing,but if you really have to,provide a way for usersto make corrections,and remember theirpreference.
    56. 56. So, avoid sniffing,but if you really have to*,provide a way for usersto make corrections,and remember theirpreference.* always ask yourself why the mobile site should bedifferent from the desktop site
    57. 57. * always ask yourself why the mobile site should be different from the desktop sitecustomer requir ements tim e restrictions budget limitationscapabilities are different different layout needed
    58. 58. * always ask yourself why the mobile site should be different from the desktop sitecustomer requir ements tim e restrictions budget limitationscapabilities are different different layout needed
    59. 59. * always ask yourself why the mobile site should be different from the desktop sitecustomer requir ements tim e restrictions budget limitationscapabilities are different different layout needed capability detection
    60. 60. * always ask yourself why the mobile site should be different from the desktop sitecustomer requir ements tim e restrictions budget limitationscapabilities are different different layout needed capability detection viewport + media queries
    61. 61. Let’s talk about media queries
    62. 62. Media queries are conditionalhooks for applying differentCSS rules, depending on e.g.browser width or height,orientation, aspect ratio, etc.
    63. 63. Differently said, media queriesallow you to optimize your sitelayout for all kinds of form factors. Via http://mediaqueri.es/
    64. 64. @media screen and (min-width: 400px) and (max-width: 800px) { article { /* css for browsers with width ≥ 400px and ≤ 800px */ } }
    65. 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. 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. 67. @media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ } }Remember that mobile browsers havea default viewport width (e.g. 980px).For your mobile specific media queriesto work, you need to set the viewport!
    68. 68. default viewport. width=device-width.mobile specific media mobile specific media queries not applied. queries applied.
    69. 69. The viewport and media queriescombo allows you to createjust one responsive sitethat works everywhere.
    70. 70. Q: What do I start with, desktop or mobile?A: Do mobile first, and build up your desktopstyles from there.
    71. 71. Q: Which devices, screen sizes should I design for?A: All of them! Use content breakpoints, instead ofdevice breakpoints and you’ll get a long way.
    72. 72. http:/ /www.flickr.com/photos/33284937@N04/5445675024/
    73. 73. Dealing withhigh-PPI “Retina” screens
    74. 74. A pixel is not what it seems.Thus far, we’ve talked aboutpixels in terms of “CSS pixels”.One CSS pixel can be multipledevice pixels.
    75. 75. HVGA portraitalmost WVGA portrait
    76. 76. HVGA portraitalmost WVGA portrait
    77. 77. almost WVGA portraitBrowser pretendsthat 480px is 320px.
    78. 78. In most scenarios, you won’thave to worry about this.It just works.
    79. 79. However, if you want tocontrol PPI related stuff,these are the things you can do:
    80. 80. almost WVGA portrait(1)Set the metaviewport’starget-densitydpito device-dpi.
    81. 81. almost WVGA portrait(1)Everything isshown at 100%.One CSS pixel isequal to one devicepixel.
    82. 82. almost WVGA portrait(2)Use special device-pixel-ratio mediaquery to servePPI-specific CSS.
    83. 83. almost WVGA portraitI’ve set the1500×1500pxbackground-imageto repeat every1000px, making itcrispy again. Therest of the contentis still scaled 150%.
    84. 84. caveats-o-max/min-device-pixel-ratio uses fractionsinstead of numbers. So 3/2, not 1.5.Watch out for max/min--moz-device-pixel-ratio.
    85. 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. 86. almost WVGA portrait(3)Use high-resimages to preservecrispiness.
    87. 87. http:/ /www.w3.org/community/respimg/
    88. 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. 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. 90. Sidenote about another responsive image technique:object-fit and object-position allow you to crop images
    91. 91. simple resize
    92. 92. resize withobject-fit andobject-positionadjustments
    93. 93. http:/ /dev.opera.com/articles/view/css3-object-fit-object-position/
    94. 94. http://www.flickr.com/photos/33284937@N04/5588693890/
    95. 95. Why do all this viewportstuff with <meta> tags?Isn’t this something for CSS?
    96. 96. http:/ /dev.w3.org/csswg/css-device-adapt/
    97. 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. 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. 99. http:/ /dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/
    100. 100. Responsive design: techniques andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
    101. 101. Responsive design: techniques andtricks to prepare your websites forthe multi-screen future nt prese Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
    102. 102. Thank you! @andreasbovensDosis font: http:/ /www.impallari.com/dosisGlyphicons: http:/ /glyphicons.com/glyphicons-licenses/Corkboard background: http:/ /psd.tutsplus.com/freebies/texture/corkboard-texture-pack/
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×