Building Responsive Layouts

Size: px

Start display at page:

Download "Building Responsive Layouts"

Andra Kennedy
6 years ago
Views:

1 Building Responsive Layouts by Zoe Mickley zomigi.com December 5, 2012 CSS Dev Conf

2 hello nice to meet you 2

3 I don t use a mobile phone

4 I have a process for eating these

5 why responsive web design works 5

6 what why responsive web design means 6

7 what why? how to do responsive web design 7

8 fluid/liquid layout uses percentage widths to adapt to size of viewport 8

9 Look at this! This is so tough! I'm in such peril way up here! 9

10 Oh, wait 10

11 How do we make this fluid? 11

12 Start with fluid wrapper 12

13 Add opposing floats inside 13

14 3 cols with poor source order 14

15 Nest 2-col layout in 2-col layout 15

16 Percentages are relative 16

17 Determining nested widths width of column you want to match width of parent column = width of nested column 17

18 Determining nested widths width of column you want to match width of parent column = width of nested column target context = result 18

19 Determining nested widths width of column you want to match width of parent column = width of nested column target context = result =.25 which means 25% 19

20 That's more like it 20

21 What about fluid grids? 21

22 Width of this nested block? 22

23 Well that's not right 23

24 To the laboratory! width of column you want to match width of parent column = width of nested column target context = result =.4 which means 40% 24

25 There we go 25

26 widths? spacing between and in fluid columns 26

27 Leave a gap via widths 27

28 Declaring fluid margin/padding Adjust widths so everything adds to 100% For IE 6/7, make it 99%: avoids problems due to rounding % to px Nesting affects margin/padding values too Use target context formula to match outer spacing with inner spacing 28

29 Using box-sizing Makes px & em margin/padding on fluid layout easy Standard box model box-sizing: content-box Padding & border added on to width/height New box model box-sizing: border-box Padding & border subtracted from width/height 29

30 Fluid grid, fixed-width spacing.column { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; } Subtracted from width in border-box box model 30

31 Use border as faux margin.column { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; border-left: 10px solid rgba(0,0,0,0); -moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box; } Prevents background from displaying under border 31

32 Negate margin at start of row.column { float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; border-left: 10px solid rgba(0,0,0,0); -moz-background-clip: padding-box; -webkit-background-clip: padding-box; background-clip: padding-box; }.row { margin-left: -10px; } Removes gap to left of first column 32

33 Fix box-sizing in IE 7 and 6 Feed different dimensions based on content-box-model, or Use Christian Schaefer's box-sizing polyfill { box-sizing: border-box; *behavior: url(boxsizing.htc); } 33

34 I recommend gridpak.com 34

35 fluid? hybrid one+ column flexible, one+ not 35

36 Hybrid layout options Easy: sidebars first in HTML Float sidebars, main content moves up between floats But usually not option in responsive design Tricky: main content first in HTML Need to float it, but with what width? One solution: negative margins 36

37 Fixed-width sidebar starting point 37

38 Add wrapper with padding #content-wrapper { } padding-right: 290px; 38

39 Lay out main content div #content-main { float: left; width: 100%; } 39

40 Float sidebar #content-secondary { float: right; width: 250px; } 40

41 A positive right margin 150px 41

42 A negative right margin -150px 42

43 Pull sidebar into gap #content-secondary { float: right; width: 250px; margin-right: -290px; } Matches wrapper s right padding, just negative 43

44 Success! 44

45 To make sidebar show in IE 6 #content-wrapper { zoom: 1; } #content-main, #content-secondary { display: inline; } Adds haslayout Hell if I know, it just works 45

46 3-column hybrid layout Nest one 2-column layout inside another Components of each layout: 1. Wrapper with padding on one side 2. Fixed-width sidebar Same width as padding (or smaller) Floated same direction as padding Negative margin matching padding on same side 3. Fluid column Floated opposite direction Width 100% 46

47 fluid layout? media queries feed different styles based on viewport size 47

48 Choosing default styles Start "mobile," layer on wider styles? Start "desktop," layer on narrower styles? Start somewhere in between, layer on both? Learn full pros/cons: 48

49 Starting in the middle 49

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

51 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%; } } 51

52 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; } } Stack links Less tab-like 52

53 Wide-screen design 53

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

55 Things to fix too few words per line, so make all one column each too narrow, so stack instead and put pic on left 55

56 Narrowscreen design 56

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

58 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*/ } 58

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

60 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); } } 60

61 Mobile design 61

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

63 Fix ios zoom problems <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="ios-orientationchange-fix.js"> Add initial-scale=1 to make page reflow when you switch to landscape Add script to fix over-zoom bug that crops right side of page when you switch See the_ios_orientationchange_zoom_bug/ 63

64 Double-up inside the CSS rule, upcoming standard, inside style width:device-width width:device-width width:device-width width:device-width width:device-width } 64

65 conditional comments or JavaScript to deal with IE 8 and earlier 65

66 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 66

67 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)">  Source: 67

68 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)">  Source: 68

69 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:  69

70 View it live 70

71 Learn more Download slides and get links at Zoe Mickley zomigi.com stunningcss3.com flexiblewebbook.com Photo credits: 023 Tape measure 006 by Steve James ( Phone Booths by Kristin Nador ( Reese s Pieces by Dave Brown ( Frank on the main wall by Justin Johnson ( 71

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

CSS3, Media Queries, & Responsive Design May 23, 2012 STC Summit Zoe Mickley Gillenwater @zomigi What I do Books Stunning CSS3: A Project-based Guide to the Latest in CSS www.stunningcss3.com Flexible