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

  • 114,652 views
Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
114,652
On Slideshare
0
From Embeds
0
Number of Embeds
94

Actions

Shares
Downloads
997
Comments
1
Likes
127

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    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

Transcript

  • 1. Responsive design: techniques andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
  • 2. Responsive design: techniques andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
  • 3. @andreasbovens
  • 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. Coherence Syncronization Screen sharing Device shifting Complementarity SimultaneityThese patterns should help understand and define strategies for the multiscreen world. http:/ /slidesha.re/kiip5y
  • 6. “A digital product orservice looks andworks coherentlyacross devices.Features areoptimized forspecific devicecharacteristics andusage 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 controlthis zooming behavior?”
  • 12. Let’s talk about theviewport mechanism
  • 13. This is the viewport.
  • 14. <meta ...> Using a "viewport" meta tag in the <head> of the page...
  • 15. ...we can control pagewidth & height, zoomlevel, 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 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. 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. 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. 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. 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. 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. http://www.flickr.com/photos/33284937@N04/4771132618/
  • 52. So, how to use this?Sniff for mobilebrowsers maybe?
  • 53. So, how to use this?Sniff for mobilebrowsers 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 usersto make corrections,and remember theirpreference.
  • 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. * 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. * 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. * 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. * 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. Let’s talk about media queries
  • 62. Media queries are conditionalhooks for applying differentCSS rules, depending on e.g.browser width or height,orientation, aspect ratio, etc.
  • 63. Differently said, media queriesallow you to optimize your sitelayout 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 havea default viewport width (e.g. 980px).For your mobile specific media queriesto 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 queriescombo allows you to createjust one responsive sitethat works everywhere.
  • 70. Q: What do I start with, desktop or mobile?A: Do mobile first, and build up your desktopstyles from there.
  • 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. http:/ /www.flickr.com/photos/33284937@N04/5445675024/
  • 73. Dealing withhigh-PPI “Retina” screens
  • 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. HVGA portraitalmost WVGA portrait
  • 76. HVGA portraitalmost WVGA portrait
  • 77. almost WVGA portraitBrowser pretendsthat 480px is 320px.
  • 78. In most scenarios, you won’thave to worry about this.It just works.
  • 79. However, if you want tocontrol PPI related stuff,these are the things you can do:
  • 80. almost WVGA portrait(1)Set the metaviewport’starget-densitydpito device-dpi.
  • 81. almost WVGA portrait(1)Everything isshown at 100%.One CSS pixel isequal to one devicepixel.
  • 82. almost WVGA portrait(2)Use special device-pixel-ratio mediaquery to servePPI-specific CSS.
  • 83. almost WVGA portraitI’ve set the1500×1500pxbackground-imageto repeat every1000px, making itcrispy again. Therest of the contentis still scaled 150%.
  • 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. 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-resimages to preservecrispiness.
  • 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 withobject-fit andobject-positionadjustments
  • 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 viewportstuff 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 andtricks to prepare your websites forthe multi-screen future Andreas Bovens - Opera Softwarehttp://www.flickr.com/photos/redux/7145995789/
  • 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. 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/