Adapt! Media queries and viewport
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Adapt! Media queries and viewport

on

  • 4,357 views

The world is now officially device-crazy! ...

The world is now officially device-crazy!

Just look at the number of Mobile phones and tablets sold recently, and the number of ordinary people (not just geeks) who have a mobile device and a tablet in addition to their desktop computer, or have even dispensed with the desktop computer altogether.

It would be foolish of us to just design for desktop, or just for mobile. What we need is a way to optimize our layouts for a multitude of different screen sizes and other factors!

In this talk Chris Mills looks at media queries and viewport in detail:
Their origins in media types
Why media types failed for mobile and devices, and why media queries will succeed
Media query basics
Practical examples of how they work across modern browsers and devices
Exploring viewport - why it is needed, and how best to use viewport and MQ's together
A look forward to the future, and the @viewport proposal
Mobile first versus desktop first
The IE problem, and how we can slay that beast in this particular context
Device breakpoints versus content breakpoints. What works best?

Statistics

Views

Total Views
4,357
Views on SlideShare
4,283
Embed Views
74

Actions

Likes
6
Downloads
63
Comments
0

2 Embeds 74

http://lanyrd.com 73
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Adapt! Media queries and viewport Presentation Transcript

  • 1. Adapt! MEDIA QUERIES AND VIEWPORT 1.Tuesday, 31 July 2012
  • 2. Hi — I’m Chris Mills! Open standards advocate and Education agitator dev.opera.com editor W3C web education community group chair Accessibility whiner HTML5/CSS3 wrangler Heavy metal drummer and proud dad 2.Tuesday, 31 July 2012
  • 3. 3.Tuesday, 31 July 2012
  • 4. Useful Stuff dev.opera.com slideshare.net/chrisdavidmills cmills@opera.com @chrisdavidmills 4.Tuesday, 31 July 2012
  • 5. Context For 5. Adaptive DesignTuesday, 31 July 2012
  • 6. Adaptive “Able to be easily modified to suit a new purpose or situation” 6.Tuesday, 31 July 2012
  • 7. Responsive “Reacting quickly and positively.” 7.Tuesday, 31 July 2012
  • 8. RWD/AWD “Designing sites that will dynamically adapt their layout, graphics and other features to suit different browsers and devices.” Responsive design? Adaptive design? It matters not which term you use. 8.Tuesday, 31 July 2012
  • 9. Responsive Web Design is Hot!! 9.Tuesday, 31 July 2012
  • 10. Three Options for creating tailored displays 1. Adapt a single site 2. Do nothing 3. Create a separate site/separate sites 10.Tuesday, 31 July 2012
  • 11. Creating separate sites Usually a terrible idea Despite what “that Nielsen bloke” says Maintenance nightmare Multiple codebases Browser sniffing And how many do you have to make? 11.Tuesday, 31 July 2012
  • 12. Doing nothing Actually goes a long way The web is responsive by default Mobile browsers have features to help render desktop sites 12.Tuesday, 31 July 2012
  • 13. Adapt a single site By far the best option, usually Let’s see how! 13.Tuesday, 31 July 2012
  • 14. Adaptive technologies 14.Tuesday, 31 July 2012
  • 15. Adaptive Bread and Butter Liquid layouts Media types Media queries Viewport Adaptive images 15.Tuesday, 31 July 2012
  • 16. Media Types The idea of adaptive design isn’t new Media types have been around since CSS2 media="screen" media="print" 16.Tuesday, 31 July 2012
  • 17. Media Types media="handheld" media="tv" 17.Tuesday, 31 July 2012
  • 18. Small TV Rant “Searching, browsing, updating and buffering are not TV-like. In fact an enormous number of people found that the technology they had purchased wasnt what they expected at all, that they were bringing the worst parts of using a computer into the television environment.” -- www.insideci.co.uk/news/rovi-research-reveals- 18. changing-consumer-habits.aspxTuesday, 31 July 2012
  • 19. 19.Tuesday, 31 July 2012
  • 20. Media Types Failed Because they make too many assumptions And don’t give enough control Devs used “handheld” to serve crap dumbed down experiences to mobile “handheld”, “tv” and “projection” are really just “screen” 20.Tuesday, 31 July 2012
  • 21. Media Queries & 21. ViewportTuesday, 31 July 2012
  • 22. Media Queries ...succeed where media types failed, mostly www.w3.org/TR/css3-mediaqueries/ Build on top of media types Allow more granular control of style application See mediaqueri.es for tonnes of examples 22.Tuesday, 31 July 2012
  • 23. Basic Media Query media="screen and (max-width: 480px)" @media screen and (max-width: 480px) { /* Insert rules for narrow screens here */ } 23.Tuesday, 31 July 2012
  • 24. 24.Tuesday, 31 July 2012
  • 25. Adding extra conditions @media screen and (min-width: 480px) and (max-width: 1024px) { /* Rules to be applied between 480 and 1024 pixels */ } 25.Tuesday, 31 July 2012
  • 26. Multiple right answers @media screen and (max-width: 1024px), print and (max-width: 21cm) { /* Rules to be applied if either of the two queries are true */ } 26.Tuesday, 31 July 2012
  • 27. Media Query negation @media not screen and (max-width: 480px) { /* Rules to be applied when the screen is NOT narrow */ } 27.Tuesday, 31 July 2012
  • 28. Exclusive Queries @media only screen and (max-width: 480px) { /* An exclusive set of rules, ONLY for narrow screens */ } 28.Tuesday, 31 July 2012
  • 29. Typical stylesheet /* Default styles here */ @media screen and (min-width: 1400px) {} @media screen and (max-width: 800px) {} @media screen and (max-width: 480px) {} @media screen and (max-width: 320px) {} 29.Tuesday, 31 July 2012
  • 30. Breakpoints Where do you need to change your styles? Device breakpoint: change styles for specific target device screen sizes Content breakpoint: changes styles at the point where your layout actually breaks 30.Tuesday, 31 July 2012
  • 31. Which way do you do it? For a general web site, content breakpoints For a platform-targetted app, device breakpoints More realistically, you’ll do a combination, eg fluid width for wide screens, a fixed width and height for iPad portrait/landscape, and a fluid width for smartphones and other devices. 31.Tuesday, 31 July 2012
  • 32. The different available Media Queries width color height color-index device-width monochrome device-height resolution orientation scan aspect-ratio grid device-aspect-ratio 32.Tuesday, 31 July 2012
  • 33. You will most commonly use width (and height): this is viewport w/h! You could use device-width/height for mobiles/tablets, but this confuses things. There is a better way (see later) resolution: for high fidelity devices orientation: for landscape/portrait layout optimization (an iPad app, for example) 33.Tuesday, 31 July 2012
  • 34. Beware! Mobiles lie! Want this... ...Got this? 34.Tuesday, 31 July 2012
  • 35. Mobiles lie... They assume a wider viewport than they really have Render the site at that width Then shrink the result to fit on the screen For example, Opera Mobile uses 980px 35.Tuesday, 31 July 2012
  • 36. Viewport Invented by Apple A meta tag Suggests initial viewport, zoom, and resolution 36.Tuesday, 31 July 2012
  • 37. Viewport example <meta name="viewport" content="width=device-width"> 37.Tuesday, 31 July 2012
  • 38. Much better! 38.Tuesday, 31 July 2012
  • 39. Another common use <meta name="viewport" content="width=550"> 39.Tuesday, 31 July 2012
  • 40. 40.Tuesday, 31 July 2012
  • 41. Different available Viewport options width height minimum-scale maximum-scale initial-scale user-scalable target-densitydpi 41.Tuesday, 31 July 2012
  • 42. CSS Device Adaptation Viewport = more of a style thing than a content thing Provides @viewport at-rule to contain viewport info Supported in Opera and IE10, with prefixes dev.opera.com/articles/view/an-introduction- to-meta-viewport-and-viewport 42.Tuesday, 31 July 2012
  • 43. CSS Device Adaptation <meta name="viewport" content="width=550, maximum-scale=1.0, target-densitydpi=device-dpi"> @viewport { width: 550px; max-zoom: 1; resolution: device; } 43.Tuesday, 31 July 2012
  • 44. Other Responsive Web Design Issues 44.Tuesday, 31 July 2012
  • 45. What else have we got to worry about? Responsive replaced elements Bandwidth/loading of resources Resolution Processing power Control mechanisms 45.Tuesday, 31 July 2012
  • 46. Replaced elements 46.Tuesday, 31 July 2012
  • 47. Replaced elements #related img { display: block; margin: 0 auto; max-width: 100%; } 47.Tuesday, 31 July 2012
  • 48. Be warned Old IE versions don’t support max-width, so you’ll have to fallback to width: 100% instead. 48.Tuesday, 31 July 2012
  • 49. File size also important Users on slow connections won’t want to download huge media files. We need to try to serve them smaller files/ alternatives. Assumptions: e.g. narrow equals mobile equals slow connection 49.Tuesday, 31 July 2012
  • 50. CSS resources easy to deal with Use “mobile first” Load smaller resources by default, and larger ones inside MQs Saves narrow screen devices from loading wide screen resources 50.Tuesday, 31 July 2012
  • 51. “Mobile first” stylesheet /* Default styles here */ @media screen and (min-width: 320px) {} @media screen and (min-width: 480px) {} @media screen and (min-width: 800px) {} @media screen and (min-width: 1400px) {} 51.Tuesday, 31 July 2012
  • 52. “Mobile first” example header { background: url(small- image.png); } @media screen and (min-width: 480px) { header { background: url(large- image.png); } } 52.Tuesday, 31 July 2012
  • 53. “Mobile first” problems IE 6-8 left with mobile layout, as they don’t support media queries You’ll need to polyfill media queries, e.g. with respond.js 53.Tuesday, 31 July 2012
  • 54. HTML5 <video> well served <source src="crystal320.webm" type="video/webm" media="all and (max- width: 480px)"> <source src="crystal720.webm" type="video/webm" media="all and (min- width: 481px)"> 54.Tuesday, 31 July 2012
  • 55. <img> not so lucky http://dev.opera.com/articles/view/ responsive-images-problem/ None work perfectly Pre-fetch is a bitch 55.Tuesday, 31 July 2012
  • 56. adaptive-images.com Add .htaccess and adaptive-images.php to your document root folder. Add one line of JavaScript into the <head> of your site. Add your CSS Media Query values into $resolutions in the PHP file. 56.Tuesday, 31 July 2012
  • 57. The <picture> element <picture alt="a picture of something"> <source src="mobile.jpg"> <source src="medium.jpg" media="min width: 600px"> <source src="fullsize.jpg" media="min width: 900px"> <img src="mobile.jpg"> </picture> 57.Tuesday, 31 July 2012
  • 58. The srcset attribute <img src="face-600-200-at-1.jpeg" alt="" srcset="face-600-200-at-1.jpeg 600w 200h 1x, face-600-200-at-2.jpeg 600w 200h 2x, face-icon.png 200w 200h"> 58.Tuesday, 31 July 2012
  • 59. Processing power You might want to turn off effects like shadows, gradients and animations for small screen devices CSS effects are arguably less power draining than JS or Flash, but even so They can cause the UI to look cluttered too 59.Tuesday, 31 July 2012
  • 60. Resolution Hi-fidelity devices are causing an issue, e.g. iPhone 4s is 960 x 640 pixels at 326ppi These devices lie twice One CSS pixel = multiple device pixels Images can start to look pixellated 60.Tuesday, 31 July 2012
  • 61. Solutions <img src="500px_image.jpg" width="250"> 61.Tuesday, 31 July 2012
  • 62. Solutions @media screen and (-o-min-device-pixel- ratio: 3/2) { body { background-size: 250px; } } @media screen and (-webkit-min-device- pixel-ratio: 1.5) { body { background-size: 250px; } } 62.Tuesday, 31 July 2012
  • 63. 63.Tuesday, 31 July 2012
  • 64. Soon to be replaced by @media screen and (resolution: 1.5dppx) { body { background-size: 250px; } } 64.Tuesday, 31 July 2012
  • 65. Tell the truth with viewport <meta name="viewport" content="width=device-width, target-densitydpi=device-dpi"> 65.Tuesday, 31 July 2012
  • 66. All good, but... Images may now start to look a little small You could serve larger images for devices with higher resolutions 66.Tuesday, 31 July 2012
  • 67. Control mechanisms Currently tricky Usual wisdom about web sites applies: Make pages keyboard accessible, etc. Can’t be detected in CSS (yet) JavaScript touch detection is an option: Modernizr, jQuery 67.Tuesday, 31 July 2012
  • 68. “Subtle” advertisment Buy my book 68.Tuesday, 31 July 2012
  • 69. dev.opera.com | cmills@opera.com | @chrisdavidmills Thanks! 69.Tuesday, 31 July 2012