CSS3: Using media queries to improve the web site experience
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

CSS3: Using media queries to improve the web site experience

on

  • 5,071 views

NOTE: A more updated version of this presentation is at http://www.slideshare.net/zomigi/css3-media-queries-and-responsive-design.

NOTE: A more updated version of this presentation is at http://www.slideshare.net/zomigi/css3-media-queries-and-responsive-design.

Statistics

Views

Total Views
5,071
Views on SlideShare
4,737
Embed Views
334

Actions

Likes
7
Downloads
66
Comments
1

4 Embeds 334

http://www.scoop.it 321
http://paper.li 11
http://us-w1.rockmelt.com 1
http://www.linkedin.com 1

Accessibility

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…
  • The            setup            in            the            video            no            longer            works.           
    And            all            other            links            in            comment            are            fake            too.           
    But            luckily,            we            found            a            working            one            here (copy paste link in browser) :            www.goo.gl/yT1SNP
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

CSS3: Using media queries to improve the web site experience Presentation Transcript

  • 1. CSS3:Using media queriesto improve the website experienceNovember 19, 2011indieconfZoe Mickley Gillenwater | @zomigi
  • 2. What I do Books Web Stunning CSS3: Accessibility A Project-based Guide to specialist on the Latest in CSS AT&Ts design www.stunningcss3.com standards team Visual designer CSS developer Flexible Web Design: and consultant Creating Liquid and Elastic Layouts with CSS www.flexiblewebbook.com 2
  • 3. My 7 web-enabled devices• 3 laptops (plus 2 external monitors)• Android smartphone• iPod Touch• Google TV• Wii 3
  • 4. how can our sitesaccommodate all this DIVERSITY ? 4
  • 5. Introducing media queries• Awesome new part of CSS3• Simple way to feed different CSS based on characteristics of users device• Not: – for feeding styles based on browser – just for feeding styles based on viewport size 5
  • 6. Media query syntax: internalbody { background: gray;}@media screen and (max-width:500px) { body { background: blue; }}English translation:Make the background gray. But up to a maximum width of500 pixels, make the background blue. 6
  • 7. Media query syntax: internalbody { background: blue;}@media screen and (min-width:501px) { body { background: gray; }}English translation:Make the background blue. But at and past the minimum widthof 501 pixels, make the background gray. 7
  • 8. How it looks 8
  • 9. Media query syntax: externalExtend the existing media part of the linkelement or @import rule:<link href="narrow.css" rel="stylesheet"media="only screen and (max-width:500px)">@import url(narrow.css) only screen and(max-width:500px); 9
  • 10. Internal media queriesPros: Cons:• No extra HTTP • Extra kb in file size request(s) for everyone to• Not out of sight and download forgotten • Have to use JavaScript to make it work with old IE 10
  • 11. External media queriesPros: Cons:• Smaller file size for • Extra HTTP requests non-supporting • Out of sight so could browsers be forgotten when• Easier to keep updating organized if CSS extensive• Can feed to old IE using conditional comments 11
  • 12. you now know media query syntax YAY ! 12
  • 13. but thats not where the CHALLENGES are 13
  • 14. Designing for different widths• Create wireframe comps for placement of major layout areas• Design details in browser if possible• Focus on content• Harder to retrofit existing design 14
  • 15. Structuring HTML for reorder• Build HTML so layout pieces can be rearranged visually as wanted• This is why retrofitting so difficult 15
  • 16. Organizing media queries formaximum efficiency and reach• Internal or external?• Overlap or stack?• Which media features to test against?• Where to make breaking points?• Which dimension as starting point?• Workarounds for non-supporting browsers? 16
  • 17. Starting/default width or ( ) or something in between 17
  • 18. Starting with desktop stylesPros: Cons:• No extra work to • Mobile devices may make majority width have to download appear correctly on unneeded desktop IE 6-8 assets• Easiest way to • Requires separate retrofit existing site style sheets or JavaScript to make mobile design appear in IE Mobile and older mobile browsers 18
  • 19. Starting with mobile stylesPros: Cons:• Prevents mobile • Desktop devices devices from may have to downloading download unneeded unneeded desktop mobile assets assets • Requires separate• Older, non-media- style sheets or query-supporting JavaScript to make mobile browsers still majority desktop get the mobile styles design appear in IE without any extra 6-8 work 19
  • 20. Ourstartingpoint 20
  • 21. Very wide: awkward 21
  • 22. Verynarrow:awkward 22
  • 23. Wide-screen media query/*all the other styles up here*/@media screen and (min-width: 1200px) { /*styles for larger screens in here*/} 23
  • 24. Add third column@media screen and (min-width: 1200px) { #nav-main { position: fixed; top: 136px; width: 13%; margin: 0; } #content-main { width: 58%; margin-left: 18%; } #content-secondary { width: 20%; }} 24
  • 25. Style nav as vertical menu@media screen and (min-width: 1200px) { ... #nav-main li { float: none; margin: 0; } #nav-main a { -moz-border-radius: 0; -webkit-border-radius: 0; border-radius: 0; }} 25
  • 26. Wide-screen design 26
  • 27. Small-screen media query/*all the other styles up here*/@media screen and (max-width: 760px) { /*styles for smaller screens in here*/} 27
  • 28. Remove columns from text@media screen and (max-width: 760px) { h1 + p { -moz-column-count: 1; -o-column-count: 1; -webkit-column-count: 1; column-count: 1; }} 28
  • 29. Stack feature boxes@media screen and (max-width: 760px) { ... .feature { float: none; width: auto; margin: 0 0 1.6em 0; padding: 0 0 0 140px; background-position: top left; }} 29
  • 30. Narrow-screendesign 30
  • 31. pause for CAVEATS &CLARIFICATIONS 31
  • 32. Some sites would be betterserved with a separate site formobile devices instead ofusing media queries. 32
  • 33. Even if a separate mobile sitewould be best, using mediaqueries is a good first step if aseparate site isnt currentlyfeasible. 33
  • 34. “The choice is not between using media queriesand creating a dedicated mobile site; the choiceis between using media queries and doingnothing at all.” ―Jeremy Keith http://adactio.com/journal/1696/ 34
  • 35. If you do use them, theyre notthe only tool you can use—youcan add scripting as well tofurther customize the content,functionality, etc. 35
  • 36. Media queries are only meantto solve the problem ofmobiles small viewports, notall the other things that canmake mobile browsingdifferent (such as context,bandwidth, etc.). 36
  • 37. “Its making sure your layout doesnt look crapon diff. sized screens.” ―Mark Boulton http://twitter.com/#!/markboulton/status/50237480368214016 37
  • 38. back toCSS 38
  • 39. Mobile media query/*all the other styles up here*/@media screen and (max-width: 550px) { /*styles for tiny screens in here*/} 39
  • 40. Non-overlapping mobile mediaqueries@media screen and (min-width: 551px) and(max-width: 760px) { /*styles for small screens in here*/}@media screen and (max-width: 550px) { /*styles for tiny screens in here*/} 40
  • 41. Media features for mobilemin-widthmax-widthdevice-widthmin-device-widthmax-device-widthorientationmin-device-pixel-ratio -webkit-min-device-pixel-ratio min--moz-device-pixel-ratio -o-min-device-pixel-ratio 41
  • 42. Changing to single column@media screen and (max-width: 550px) { #content-main, #content-secondary, #about, #credits { float: none; width: 100%; }} 42
  • 43. Changing feature images@media screen and (max-width: 550px) { ... .feature { padding-left: 70px; } #feature-candy { background-image: url(icon_candy_64.png); } #feature-pastry { background-image: url(icon_pastry_64.png); } #feature-dessert { background-image: url(icon_dessert_64.png); }} 43
  • 44. Mobiledesign 44
  • 45. Viewport meta tagForces mobile devices to scale viewport toactual device width<meta name="viewport" content="width=device-width, maximum-scale=1.0"> 45
  • 46. View it livehttp://stunningcss3.com/code/bakery/ 46
  • 47. Dealing with IE 6, 7, and 8• Conditional comments• JavaScript 47
  • 48. Conditional comments• Split styles into separate sheets and feed applicable sheet to IE based on whether its IE on desktop or mobile• Approach varies based on which set of styles are your default 48
  • 49. Conditional comment whendesktop styles are defaultFeed mobile IE media query sheet:<link rel="stylesheet" href="global.css" media="all"><link rel="stylesheet" href="mobile.css" media="alland (max-width: 700px)"><!--[if IEMobile 7]><link rel="stylesheet" href="mobile.css" media="all"><![endif]-->Source: http://blogs.msdn.com/b/iemobile/archive/2010/12/08/targeting-mobile-optimized-css-at-windows-phone-7.aspx 49
  • 50. Conditional comment whenmobile styles are defaultFeed older IE media query sheet, hide frommobile IE:<link rel="stylesheet" href="global.css" media="all"><link rel="stylesheet" href="desktop.css" media="alland (min-width: 700px)"><!--[if (lt IE 9)&(!IEMobile 7)]><link rel="stylesheet" href="desktop.css" media="all"><![endif]-->Source: http://adactio.com/journal/4494/ 50
  • 51. Pre-fab JavaScript for non-supporting browsers• Simply add one of these scripts: – Respond: https://github.com/scottjehl/Respond – css3-mediaqueries.js: http://code.google.com/p/css3- mediaqueries-js/• Avoid extra HTTP request for non-IE browsers using conditional comments: <!--[if (lt IE 9)&(!IEMobile 7)]> <script src="respond.min.js"></script> <![endif]--> 51
  • 52. WHAT ELSEcan media queries do? 52
  • 53. Swapping images on high-resdisplays@mediascreen and (moz--min-device-pixel-ratio : 1.5),screen and (-o-min-device-pixel-ratio : 3/2),screen and (-webkit-min-device-pixel-ratio : 1.5),screen and (min-device-pixel-ratio : 1.5) {} 53
  • 54. Swapping images on high-resdisplays@media ... screen and (min-device-pixel-ratio : 1.5) { .feature { -moz-background-size: 64px 64px; -webkit-background-size: 64px 64px; background-size: 64px 64px; } #feature-candy { background-image: url(icon_candy_128.png); } #feature-pastry { background-image: url(icon_pastry_128.png); } #feature-dessert { background-image: url(icon_dessert_128.png); }} 54
  • 55. Examples of sites using mediaqueries• Gallery: http://mediaqueri.es/• My own bookmarks: – https://gimmebar.com/loves/zomigi/tag/ mediaqueries – www.delicious.com/pixelsurge/ nicedesign+mediaqueries – www.delicious.com/pixelsurge/ nicedesign+liquid 55
  • 56. Learn moreDownload slides and get links athttp://zomigi.com/blog/media-queries-presentation 56
  • 57. Questions?Zoe Mickley Gillenwater@zomigidesign@zomigi.comzomigi.com | stunningcss3.com | flexiblewebbook.com 57