CSS3, Media Queries, & Responsive Design. May 23, 2012 STC Summit Zoe Mickley

Transcription

1 CSS3, Media Queries, & Responsive Design May 23, 2012 STC Summit Zoe Mickley

2 What I do Books Stunning CSS3: A Project-based Guide to the Latest in CSS Flexible Web Design: Creating Liquid and Elastic Layouts with CSS Web Accessibility specialist at AT&T Visual designer CSS developer and consultant 2

3 My home's web-enabled devices

4 more mobile devices & more diversity within devices EVERY DAY 4

5 every day 1.45 MILLION DEVICES & 317,124 BABIES enter the world Source: 5

6 Growing screen resolution diversity on desktop May 2009 widths May 2012 widths other other Source: 6

7 25% of U.S. smartphone users do MOST OR ALL of their web browsing on mobile Source: 7

8 how can our sites accommodate all this DIVERSITY? 8

9 Introducing media queries Awesome new part of CSS3 Simple way to feed different CSS based on characteristics of user's device Used to build responsive/adaptive designs Not: for feeding styles based on browser just for feeding styles based on viewport size 9

10 Media query syntax: internal body { background: gray; screen and (max-width:500px) { body { background: blue; } } English translation: Make the background gray. But up to a maximum width of 500 pixels, make the background blue. 10

11 Flip flop it body { background: blue; screen and (min-width:501px) { body { background: gray; } } English translation: Make the background blue. But at and past the minimum width of 501 pixels, make the background gray. 11

12 How it looks 12

13 Media query syntax: external Extend the existing media part of the link element rule: <link href="narrow.css" rel="stylesheet" media="only screen and url(narrow.css) only screen and (max-width:500px); 13

14 Recommendation: internal Main advantages: No extra HTTP request(s) Not out of sight and forgotten Learn full pros/cons: essential-considerations-crafting-qualitymedia-queries 14

15 you now know media query syntax YAY! 15

16 but media queries don't actually DO anything 16

17 it's the CSS INSIDE that changes the appearance 17

18 Width-dependent layout changes Responsive web design: Media queries + fluid layouts + fluid media See Adaptive layouts: Media queries + fixed-width layouts See adaptive-layouts-media-queries 18

19 Retrofitting responsiveness Typical to add on media queries for both smaller and wider styles CSS before media queries is default Can take different approach when starting from scratch Start with "mobile," layer on wider styles? Start with "desktop," layer on narrower styles? Start with something in between for majority? 19

20 Starting with desktop styles Pros: No extra work to make majority width appear correctly on IE 6-8 Easiest way to retrofit existing site Cons: Mobile devices may have to download unneeded desktop assets Need separate style sheets or JavaScript to make mobile design appear in IE Mobile 7 and other older mobile browsers 20

21 Starting with mobile styles Pros: Mobile devices won't download unneeded desktop assets Older, non-mediaquery-supporting mobile browsers still get the mobile styles without any extra work Cons: Desktop devices may have to download unneeded mobile assets Need separate style sheets or JavaScript to make majority desktop design appear in IE

22 Our starting point 22

23 Very wide: awkward 23

24 Very narrow: awkward 24

25 Wide-screen media query /*all the other styles up screen and (min-width: 1200px) { /*styles for larger screens in here*/ } 25

26 Add third 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%; } } 26

27 Style nav as vertical 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; } } 27

28 Wide-screen design 28

29 Small-screen media query /*all the other styles up screen and (max-width: 760px) { /*styles for smaller screens in here*/ } 29

30 Remove columns from screen and (max-width: 760px) { h1 + p { -moz-column-count: 1; -o-column-count: 1; -webkit-column-count: 1; column-count: 1; } } 30

31 Stack feature screen and (max-width: 760px) {....feature { float: none; width: auto; margin: em 0; padding: px; background-position: top left; } } 31

32 Narrowscreen design 32

33 pause for CAVEATS & CLARIFICATIONS 33

34 Some sites would be better served with a separate site for mobile devices instead of using media queries. 34

35 Even if a separate mobile site would be best, using media queries is a good first step if a separate site isn't currently feasible. 35

36 The choice is not between using media queries and creating a dedicated mobile site; the choice is between using media queries and doing nothing at all. Jeremy Keith 36

37 You can add media queries to a dedicated mobile site in order to cater to the wide range of mobile viewport sizes. 37

38 If you do use media queries on a single site, they're not the only tool you can use you can add scripting as well to further customize the content, markup, functionality, etc. 38

39 Media queries are only meant to solve the problem of mobile's small viewports, not all the other things that can make mobile browsing different (such as context, bandwidth, etc.). 39

40 It's making sure your layout doesn't look crap on diff. sized screens. Mark Boulton 40

41 back to CSS 41

42 Mobile media query /*all the other styles up screen and (max-width: 550px) { /*styles for tiny screens in here*/ } 42

43 Non-overlapping screen and (min-width: 551px) and (max-width: 760px) { /*styles for small screens in here*/ screen and (max-width: 550px) { /*styles for tiny screens in here*/ } 43

44 Media features for mobile min-width max-width device-width min-device-width max-device-width orientation min-device-pixel-ratio -webkit-min-device-pixel-ratio min--moz-device-pixel-ratio -o-min-device-pixel-ratio 44

45 Useful media features for mobile min-width max-width device-width min-device-width max-device-width orientation min-device-pixel-ratio -webkit-min-device-pixel-ratio min--moz-device-pixel-ratio -o-min-device-pixel-ratio 45

46 Changing to single screen and (max-width: 550px) { #content-main, #content-secondary, #about, #credits { float: none; width: 100%; } } 46

47 Changing feature 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); } } 47

48 Mobile design 48

49 Viewport meta tag Forces mobile devices to scale viewport to actual device width <meta name="viewport" content="width=device-width"> 49

50 Zoom problem in ios Remember: device-width on ios devices always matches portrait width This means design doesn't reflow when you switch to landscape, but instead just zooms 50

51 Fixing (and adding) zoom issues Option 1: add maximum-scale=1 But disables user scaling <meta name="viewport" content="width=device-width, maximum-scale=1"> Option 2: add initial-scale=1 Allows user scaling But triggers over-zoom/crop bug when changing from portrait to landscape <meta name="viewport" content="width=device-width, initial-scale=1"> 51

52 The best way to fix zoom issues Option 3: add initial-scale=1 plus script to fix over-zoom bug See the_ios_orientationchange_zoom_bug/ <head>... <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="ios-orientationchange-fix.js">... </head> 52

53 View it live 53

54 More responsive examples Design patterns: "Multi-Device Layout Patterns" by Luke Wroblewski: "Responsive Navigation Patterns" by Brad Frost: responsive-nav-patterns/ Inspiration: Gallery: My own bookmarks: loves/zomigi/tag/mediaqueries 54

55 Dealing with IE 8 and earlier Conditional comments JavaScript 55

56 Conditional comments Split styles into separate sheets and feed applicable sheet to IE based on whether it's IE on desktop or mobile Approach varies based on which set of styles are your default 56

57 Conditional comment when desktop styles are default Feed IE Mobile 7 media query sheet: <link rel="stylesheet" href="global.css" media="all"> <link rel="stylesheet" href="mobile.css" media="all and (max-width: 700px)"> <!--[if IEMobile 7]> <link rel="stylesheet" href="mobile.css" media="all"> <![endif]--> Source: 57

58 Conditional comment when mobile styles are default Feed older IE media query sheet, hide from IE Mobile 7: <link rel="stylesheet" href="global.css" media="all"> <link rel="stylesheet" href="desktop.css" media="all and (min-width: 700px)"> <!--[if (lt IE 9)&(!IEMobile 7)]> <link rel="stylesheet" href="desktop.css" media="all"> <![endif]--> Source: 58

59 Pre-fab JavaScript for nonsupporting browsers Simply add one of these scripts: Respond: css3-mediaqueries.js: Avoid extra HTTP request for non-old-ie browsers using conditional comments: <!--[if (lt IE 9)&(!IEMobile 7)]> <script src="respond.min.js"></script> <![endif]--> 59

60 WHAT ELSE can media queries do? 60

61 Swapping images on high-res screen 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) { } 61

62 Swapping images on high-res 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); } } 62

63 Learn more Download slides and get links at Zoe Mickley zomigi.com stunningcss3.com flexiblewebbook.com 63