Your SlideShare is downloading. ×
0
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Optimizing your layout for phones and tablets using viewport and media queries
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Optimizing your layout for phones and tablets using viewport and media queries

21,312

Published on

With mobile web browsing becoming widespread, users expect their favorite sites to "just work" on their mobile device of choice. Exciting times, especially as there are a number of new hooks in modern …

With mobile web browsing becoming widespread, users expect their favorite sites to "just work" on their mobile device of choice. Exciting times, especially as there are a number of new hooks in modern mobile browsers that help web designers to create compelling experiences on phones and tablets.

In my talk, I cover the various features of the viewport meta tag, and look at how they allow you to control mobile browsers' zoom behaviors. I also connect this to Opera's CSS Device Adaptation proposal, which brings this feature to CSS in the form of the @viewport rule.

Furthermore, I explain how viewport can be combined with media queries to create super-flexible layouts that work nicely across different browsing contexts and devices, and explore various strategies to dealing with different screen sizes and pixel densities.

Viewport demos can be found on http://people.opera.com/andreasb/demos/parisweb2011/

Published in: Technology, Business
0 Comments
56 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
21,312
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
745
Comments
0
Likes
56
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

Transcript

  • 1. Optimizing your layoutfor phones and tabletsusing viewport andmedia queriesAndreas Bovens - Opera Software
  • 2. about me http://www.flickr.com/pho tos/thomaaas/4783952591 /
  • 3. about me http://www.flickr.com/pho tos/thomaaas/4783952591 /
  • 4. about me http://www.flickr.com/pho tos/thomaaas/4783952591 / ccio1/119626133/ om/photos/bocca http://www.flickr.c
  • 5. about me http://www.flickr.com/pho tos/thomaaas/4783952591 / ccio1/119626133/ om/photos/bocca http://www.flickr.c
  • 6. about me http://www.flickr.com/pho tos/thomaaas/4783952591 / ccio1/119626133/ om/photos/bocca http://www.flickr.c http://www.flickr.com/photos/forcery/ 3511170176/
  • 7. Bruce Lawson Daniel Davis Divya Manian Chris Mills Karl Dubost Shwetank Dixit Tiffany Brown Andreas Bovens Luz CaballeroPatrick Lauke Zi Bin Cheah Vadim Makeev Mike Taylor
  • 8. “Patterns forMultiscreenStrategies” Coherence Syncronization Screen sharingBy Precious http://slidesha.re/kiip5y Device shifting Complementarity Simultaneity These patterns should help understand and define strategies for the multiscreen world.
  • 9. Coherence Syncronization Screen sharing Device shifting Complementarity SimultaneityThese patterns should help understand and define strategies for the multiscreen world. http://slidesha.re/kiip5y
  • 10. “A digital product orservice looks andworks coherentlyacross devices.Features are optimizedfor specific devicecharacteristics andusage scenarios.” Coherence http://slidesha.re/kiip5y
  • 11. Coherence http://slidesha.re/kiip5y
  • 12. ?
  • 13. show top-left and pan
  • 14. small screen rendering aka single column view
  • 15. zoom and pan
  • 16. That’s all nice,but what if I want to control this zooming behavior?
  • 17. Answer:viewport meta
  • 18. This is the viewport
  • 19. (not just this)
  • 20. Most commonlythough, you’ll want tofocus on controllingpage width...
  • 21. <meta ...> ... using a "viewport" meta tag in the <head> of the page.
  • 22. works in:with some exceptions ;-)
  • 23. http://www.opera.com/developer/tools/mobile/
  • 24. HVGA portrait
  • 25. HVGA portrait
  • 26. HVGA portrait no viewport defined in <head>, so fallback to default of 850px, which is squeezed inside 320px.
  • 27. HVGA portrait <meta name="viewport" content="width=320">
  • 28. HVGA portrait <meta name="viewport" content="width=320">
  • 29. HVGA portrait HVGA landscape <meta name="viewport" content="width=320">
  • 30. HVGA portrait <meta name="viewport" content="width=device-width">
  • 31. HVGA portrait <meta name="viewport" content="width=device-width">
  • 32. HVGA portrait HVGA landscape <meta name="viewport" content="width=device-width">
  • 33. HVGA landscape HVGA landscape 480px 320px × 1.5 zoom
  • 34. HVGA landscape HVGA landscape 480px 320px × 1.5 zoom
  • 35. HVGA portrait <meta name="viewport" content="initial-scale=1">
  • 36. HVGA portrait <meta name="viewport" content="initial-scale=1">
  • 37. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1">
  • 38. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=1"> (same result as width=device-width)
  • 39. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=0.5">
  • 40. HVGA portrait HVGA landscape <meta name="viewport" content="initial-scale=2">
  • 41. <meta name="viewport"content="width=device-width">+<div style="width: 600px">
  • 42. HVGA portrait <meta name="viewport" content="width=device-width"> + <div style="width: 600px">
  • 43. HVGA portrait <meta name="viewport" content="width=device-width, initial-scale=1"> + <div style="width: 600px">
  • 44. other stuffmaximum-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">
  • 45. other stuffmaximum-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 stuffmaximum-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 stuffmaximum-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. NB:Make sure to use commas, not semi-colons asdelimiters between viewport values!Remember this, especially when syntax-googling ;-)
  • 49. http://www.flickr.com/photos/33284937@N04/4771132618/
  • 50. So, how to use this?Sniffing for mobilebrowsers maybe?
  • 51. So, how to use this?Sniffing for mobilebrowsers maybe?Better don’t sniff.
  • 52. Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00
  • 53. Opera/9.80 (Macintosh; Intel Mac OS X 10.5.8; U; en) Presto/2.9.220 Version/12.00
  • 54. So, avoid sniffing,but if you really have to,provide a way for usersto make corrections.
  • 55. So, avoid sniffing,but if you really have to*,provide a way for usersto make corrections.* always ask yourself why the mobile site should bedifferent from the desktop site
  • 56. * 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
  • 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 capability detection
  • 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 capability detection viewport + media queries
  • 59. Let’s talk aboutviewport + media queriesmedia queries
  • 60. Media queries are conditional hooksfor applying different CSS rules,depending on e.g. browser width,screen height, aspect ratio, etc.
  • 61. Differently said, media queriesallow you to optimize your sitelayout for all kinds of form factors. Via http://mediaqueri.es/
  • 62. @media screen and (min-width: 400px) { article { border: 5px solid hsla(32, 98%, 51%, 1); box-shadow: hsla(0, 100%, 0%, 0.5) 0 0 10px; max-width: 800px; margin: 0 auto 0 auto; } }
  • 63. @media screen and (min-width: 400px)and (max-width: 800px) { article { /* css for browsers with width ≥ 400px and ≤ 800px */ } }
  • 64. @media screen and (min-width: 400px),not projection and (aspect-ratio: 16/9) { article { /* css for browsers with width ≥ 400px, except projectors with 16/9 aspect ratio */ } }
  • 65. @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 */ } }
  • 66. @media screen and (max-width: 400px) { article { /* css for browsers with width ≤ 400px */ } }Remember that mobile browsers have adefault viewport width (e.g. 850px).For your mobile specific media queriesto work, you need to set the viewport!
  • 67. default viewport. width=device-width.mobile specific media mobile specific media queries not applied. queries applied.
  • 68. The viewport and media queriescombo allows you to create justone responsive site that workseverywhere.
  • 69. Q: What about max/min-device-width/height?A: There are use cases for this, but note that yourmedia queries won’t be applied when resizing thebrowser on desktop.
  • 70. Q: Should I start from small to large, or vice versa?A: Do mobile first, then enhance for desktop. Thiswill make the mobile experience faster. Deal withold IE using a polyfill, such as Respond.js https://github.com/scottjehl/Respond
  • 71. Q: Which screen sizes should I design for?A: All of them! No, seriously, don’t limit yourself.Resize your browser window and tweak differentelements’ CSS properties when needed.
  • 72. http://www.flickr.com/photos/33284937@N04/5445675024/
  • 73. Dealing withhigh-DPI screens
  • 74. A pixel is not what it seemsThus 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 portraitDevice is 480pxwide, but browserapplies defaultzoom of 150%.480px/1.5 = 320px
  • 78. In most scenarios, you won’thave to worry about this.It just works.
  • 79. However, if you want tocontrol DPI related stuff,these are the things you can do:
  • 80. almost WVGA portrait(1)Use high resolutionimages to preservecrispiness.
  • 81. almost WVGA portrait(2)Use the device-pixel-ratio mediaquery to serveDPI-specific CSS.
  • 82. almost WVGA portraitI’ve set the1500×1500pxbackground-imageto repeat every1000px, making itcrispy again. Therest of the content isstill scaled 150%.
  • 83. NB:-o-max/min-device-pixel-ratio uses fractions-webkit-max/min-device-pixel-ratio uses numbers
  • 84. almost WVGA portrait(3)Set the metaviewport’s target-densitydpi propertyto device-dpi.
  • 85. almost WVGA portrait(3)Everything is shownat 100%. One CSSpixel is equal to onedevice pixel.
  • 86. NB:There are other target-densitydpi values, such ashigh-dpi, medium-dpi, low-dpi, as well as actual DPInumbers, but don’t bother with them. Just usedevice-dpi, and then only if really needed.
  • 87. http://www.flickr.com/photos/33284937@N04/5588693890/
  • 88. @viewportCSS Device Adaptation ED
  • 89. Why doing all this viewportstuff with <meta> tags? Isn’tthis something for CSS?
  • 90. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">becomes@viewport { width: device-width; zoom: 1; user-zoom: fixed;}
  • 91. <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">becomes@-o-viewport { width: device-width; zoom: 1; user-zoom: fixed;}
  • 92. @-o-viewport { width: device-width;}@media screen and (max-device-width: 480px) { @-o-viewport { width: 480px; }}
  • 93. Craz y stu ff@-o-viewport { width: device-width;}@media screen and (max-device-width: 480px) { @-o-viewport { width: 480px; }}
  • 94. Phew, that was all!Thanks for listening :-) @andreasbovensThanks to ~yc for the wooden background: http://yc.deviantart.com/art/Wood-Rays-62468397

×