Meta layout: a closer look at media queries

A CLOSER LOOK AT MEDIA QUERIESSTEPHEN HAYBY

@media mobilism and (year: 2011)

B. Rowser

Hi handsome.

@media mood and (min-level: fine)

Fine.

@media screen and (min-width: 600px)

Yes.

@media all and (orientation: landscape)

What are you,an idiot?

As you wish.

MEDIA QUERIES

@media [not|only] type [and] (expr) { rules;}

== Feature detection

MEDIA TYPES@media screen { ... }@media print { ... }

@media handheld { ... }



Let’s add some logic...@media screen and { ... }




and a feature to query@media screen and (color) { ... }




and a feature to query@media screen and (color) { ... }

Hey— tell them some more about logic,

you bastard.

logical AND

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

constrains a query

logical OR

@media screen and (min-resolution: 300dpi), screen and (-webkit-min-device-pixel-ratio: 2)

the comma is an OR

logical NOT

@media not screen and (color)

logical NOT

@media not screen and (color)

be careful...

logical NOT @media not screen and (min-width: 600px)


does not evaluate as:@media (not screen) and (min-width: 600px)


does evaluate as: @media (not (screen and (min-width: 600px)))

does not evaluate as:@media (not screen) and (min-width: 600px)

ONLY

@media only all and (device-aspect-ratio: 16/9)

hides the CSS from older browsers

ONLY

@media only all and (device-aspect-ratio: 16/9)

hides the CSS from older browsers

Enough. Enough. What about the

Media Features?

Media Features

widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratio

colorcolor-indexmonochromeresolutionscangrid

Media Features

widthheightdevice-widthdevice-heightorientationaspect-ratiodevice-aspect-ratio

colorcolor-indexmonochromeresolutionscangrid

likely you’ll use these most:

Testing

Testing

Yes, you are.

Prefixed Features

Prefixed Features

How many device pixels per CSS pixel?

Prefixed Features

-webkit-[min|max]-device-pixel-ratio[min|max]--moz-device-pixel-ratio-o-[min|max]-device-pixel-ratio


Prefixed Features

-webkit-[min|max]-device-pixel-ratio[min|max]--moz-device-pixel-ratio-o-[min|max]-device-pixel-ratio


-webkit-min-device-pixel-ratio: 1.5-o-min-device-pixel-ratio: 3/2

Prefixed Features

A pixel is not a pixel.

Prefixed Features

-moz-touch-enabled

Is this a touch device?

Prefixed Features

-moz-touch-enabled

Is this a touch device?

@media screen and (-moz-touch-enabled) { /* touchy styles */}

Viewport@media screen and (max-device-width: 320px)


device-width

layout viewport


Meta viewport.

Meta viewport<meta name="viewport"

content="width=device-width">

Meta viewport<meta name="viewport"

content="width=device-width">

@media screen and (max-width: 320px) { div { width: 80%; }}

use that in combination with WIDTH

Meta viewport

@media screen and (max-width: 320px) { div { width: 80%; }}

use that in combination with WIDTH

<meta name="viewport" content="width=device-width,

initial-scale=1">

viewport in CSS?

@viewport { width: device-width; zoom: 1; /* No, not THAT zoom */}

viewport in CSS?

@viewport { width: device-width; zoom: 1; /* No, not THAT zoom */}

Enough already. How can we apply

these things?

Applying media queries

Applying media queriesas blocks in css


media attribute of link element

as blocks in css


media attribute of link element

as blocks in css

@import

You don’t always need them

Layout is not design.

Design is the art of putting form and content together.

Paul Rand said that

The media query is a screwdriver.

Layout is only one of the components of

design.

Hey dude, remember when we designed

web PAGES?

Pagesto

Componentsto

Systems

Layout strategywireframes

drupal.org/node/413910

Layout strategywireframes

graffletopia.com/stencils/358

Layout strategyReference wireframing

A B C

D E

F

g H

Layout strategyBreakpoint graphs

0 px We have no idea600 px 900 px

Structured content first



Structured content first



Fluid layout

Order-independent layout mechanisms

N

S

E

ENS

Flexible Box Layout module

Flexible Box Layout module

N

S

E

tb

H

C

A

F

Grid layout module

H

C

F

AGrid layout module

Grid layout module

(templates)

H

C

F

A

Grid layout module

(templates)

Grid layout module

(templates)

F

C

H

A

F

C

H

A

Not as cool as two bears fighting a hockey player.

Media queries / (meta) viewport


fluid layouts


fluid layouts

device/browser support profiles


fluid layouts


content reference wireframing


fluid layouts



layout breakpoint graphs


fluid layouts



layout breakpoint graphs

new layout mechanisms

Think in terms of design principles & systems

The art of letting go

We need to think up new ways to design layout, and new ways

to communicate these new designs to our colleagues and our clients.

Thank you!

Starring magician Howard Thurston as B. Rowser

http://www.slideshare.net/stephenhay/mobilism2011




Thank you!

http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011


http://www.delicious.com/stephenhay/mobilismconf2011








Thank you!

@stephenhay

http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011










Meta layout: a closer look at media queries

Technology

Transcript of Meta layout: a closer look at media queries