building responsive layouts

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

Upload: zoe-gillenwater

Post on 27-Jan-2015

14.008 views

Category:

Design


2 download

DESCRIPTION

The updated CSS Dev Conference version of my Building Responsive Layouts talk. Get links to lots of related resources at http://zomigi.com/blog/responsive-layouts-css-dev-conf.

TRANSCRIPT

Page 1: Building Responsive Layouts

Building Responsive

Layouts

December 5, 2012

CSS Dev Conf

by Zoe Mickley Gillenwater

@zomigi

zomigi.com

Page 2: Building Responsive Layouts

2

hello

nice to meet you

Page 3: Building Responsive Layouts

I don’t use a mobile phone

Page 4: Building Responsive Layouts

I have a process for eating these

Page 5: Building Responsive Layouts

5

why

responsive web design works

Page 6: Building Responsive Layouts

6

why

responsive web design means

what

Page 7: Building Responsive Layouts

7

why

to do responsive web design

what

how ?

Page 8: Building Responsive Layouts

8

uses percentage widths to adapt

to size of viewport

fluid/liquid layout

Page 9: Building Responsive Layouts

9

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

Page 10: Building Responsive Layouts

10

Oh, wait…

Page 11: Building Responsive Layouts

11

How do we make this fluid?

Page 12: Building Responsive Layouts

12

Start with fluid wrapper

Page 13: Building Responsive Layouts

13

Add opposing floats inside

Page 14: Building Responsive Layouts

14

3 cols with poor source order

Page 15: Building Responsive Layouts

15

Nest 2-col layout in 2-col layout

Page 16: Building Responsive Layouts

16

Percentages are relative

Page 17: Building Responsive Layouts

17

Determining nested widths

width of column you want to match ÷ width of

parent column = width of nested column

Page 18: Building Responsive Layouts

18

Determining nested widths

width of column you want to match ÷ width of

parent column = width of nested column

target ÷ context = result

Page 19: Building Responsive Layouts

19

Determining nested widths

width of column you want to match ÷ width of

parent column = width of nested column

target ÷ context = result

20 ÷ 80 = .25

25% which means

Page 20: Building Responsive Layouts

20

That's more like it

Page 21: Building Responsive Layouts

21

What about fluid grids?

Page 22: Building Responsive Layouts

22

Width of this nested block?

Page 23: Building Responsive Layouts

23

Well that's not right…

Page 24: Building Responsive Layouts

24

To the laboratory!

width of column you want to match ÷ width of

parent column = width of nested column

target ÷ context = result

25 ÷ 62.5 = .4

40% which means

Page 25: Building Responsive Layouts

25

There we go

Page 26: Building Responsive Layouts

26

widths

between and in fluid columns

spacing ?

Page 27: Building Responsive Layouts

27

Leave a gap via widths

Page 28: Building Responsive Layouts

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

Page 29: Building Responsive Layouts

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

Page 30: Building Responsive Layouts

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

Page 31: Building Responsive Layouts

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

Page 32: Building Responsive Layouts

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

Page 33: Building Responsive Layouts

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 https://github.com/Schepp/box-sizing-polyfill .column {

box-sizing: border-box;

*behavior: url(boxsizing.htc);

}

Page 34: Building Responsive Layouts

34

I recommend gridpak.com

Page 35: Building Responsive Layouts

35

fluid

one+ column flexible, one+ not

hybrid ?

Page 36: Building Responsive Layouts

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

Page 37: Building Responsive Layouts

37

Fixed-width sidebar starting point

Page 38: Building Responsive Layouts

38

Add wrapper with padding

#content-wrapper {

padding-right: 290px;

}

Page 39: Building Responsive Layouts

39

Lay out main content div

#content-main {

float: left;

width: 100%;

}

Page 40: Building Responsive Layouts

40

Float sidebar

#content-secondary {

float: right;

width: 250px;

}

Page 41: Building Responsive Layouts

41

A positive right margin

150px

Page 42: Building Responsive Layouts

42

A negative right margin

-150px

Page 43: Building Responsive Layouts

43

Pull sidebar into gap

#content-secondary {

float: right;

width: 250px;

margin-right: -290px;

}

Matches wrapper’s right padding, just negative

Page 44: Building Responsive Layouts

44

Success!

Page 45: Building Responsive Layouts

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

Page 46: Building Responsive Layouts

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%

Page 47: Building Responsive Layouts

47

fluid layout

feed different styles based on

viewport size

media queries ?

Page 48: Building Responsive Layouts

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: www.zomigi.com/blog/essential-considerations-crafting-quality-media-queries

Page 49: Building Responsive Layouts

49

Starting in the middle

Page 50: Building Responsive Layouts

50

Wide-screen media query

/*all the other styles up here*/

@media screen and (min-width: 1200px) {

/*styles for larger screens in here*/

}

Page 51: Building Responsive Layouts

51

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

}

Page 52: Building Responsive Layouts

52

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;

}

}

Stack links

Less tab-like

Page 53: Building Responsive Layouts

53

Wide-screen design

Page 54: Building Responsive Layouts

54

Small-screen media query

/*all the other styles up here*/

@media screen and (max-width: 760px) {

/*styles for smaller screens in here*/

}

Page 55: Building Responsive Layouts

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

Page 56: Building Responsive Layouts

56

Narrow-screen design

Page 57: Building Responsive Layouts

57

Mobile media query

/*all the other styles up here*/

@media screen and (max-width: 550px) {

/*styles for tiny screens in here*/

}

Page 58: Building Responsive Layouts

58

Non-overlapping version

@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*/

}

Page 59: Building Responsive Layouts

59

Changing to single column

@media screen and (max-width: 550px) {

#content-main, #content-secondary,

#about, #credits {

float: none;

width: 100%;

}

}

Page 60: Building Responsive Layouts

60

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

}

}

Page 61: Building Responsive Layouts

61

Mobile design

Page 62: Building Responsive Layouts

62

Viewport meta tag

Forces mobile devices to scale viewport to actual device width

<meta name="viewport"

content="width=device-width">

Page 63: Building Responsive Layouts

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 http://filamentgroup.com/lab/a_fix_for_

the_ios_orientationchange_zoom_bug/

Page 64: Building Responsive Layouts

64

Double-up inside the CSS

Add @viewport rule, upcoming standard, inside style sheet: @-moz-viewport{ width:device-width }

@-ms-viewport{ width:device-width }

@-o-viewport{ width:device-width }

@-webkit-viewport{ width:device-width }

@viewport{ width:device-width }

Page 65: Building Responsive Layouts

65

conditional comments or JavaScript

to deal with IE 8 and earlier

Page 66: Building Responsive Layouts

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

Page 67: Building Responsive Layouts

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)">

<!--[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

Page 68: Building Responsive Layouts

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)">

<!--[if (lt IE 9)&(!IEMobile 7)]>

<link rel="stylesheet" href="desktop.css" media="all">

<![endif]-->

Source: http://adactio.com/journal/4494/

Page 69: Building Responsive Layouts

69

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-old-IE browsers using conditional comments:

<!--[if (lt IE 9)&(!IEMobile 7)]>

<script src="respond.min.js"></script>

<![endif]-->

Page 70: Building Responsive Layouts

70

View it live

http://stunningcss3.com/code/bakery/

Page 71: Building Responsive Layouts

71

Learn more

Download slides and get links at http://bit.ly/rwdlayout

Zoe Mickley Gillenwater

@zomigi

[email protected]

zomigi.com | stunningcss3.com | flexiblewebbook.com

Photo credits: “023 Tape measure 006” by Steve James (http://www.flickr.com/photos/steeljam/3350481764/) “Phone Booths” by Kristin Nador (http://www.flickr.com/photos/kristinnador/7744274382/) “Reese’s Pieces” by Dave Brown (http://www.flickr.com/photos/taids/2143865543/) “Frank on the main wall” by Justin Johnson (http://www.flickr.com/photos/justinjohnsen/4512815628/)