Meta layout: a closer look at media queries

@media mobilism and (year: 2011) MEDIA QUERIESA CLOSER LOOK AT BY STEPHEN HAY

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 { ... }

MEDIA TYPES @media screen { ... } @media print { ... } @media handheld { ... }Let’s add some logic...@media screen and { ... }

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) { ... }

MEDIA TYPES @media screen { ... } @media print { ... }Hey—@media handheld { ... } tell them some more about logic, Let’s add you bastard. some logic... @media screen and { ... }and a feature to query@media screen and (color) { ... }

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)

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

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

ONLY @media only all and (device-aspect-ratio: 16/9)hides the CSS from older browsers

ONLY @media only all andEnough. Enough. (device-aspect-ratio: 16/9)What about theMedia Features? hides the CSS from older browsers

Media Featureswidth colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio

Media Featureslikely you’ll use these most:width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio

Testing

TestingYes, you are.

Prefixed Features

Prefixed FeaturesHow many device pixels per CSS pixel?

Prefixed FeaturesHow many device pixels per CSS pixel? -webkit-[min|max]-device-pixel-ratio [min|max]--moz-device-pixel-ratio -o-[min|max]-device-pixel-ratio

Prefixed FeaturesHow many device pixels per CSS pixel? -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 FeaturesA pixel is not a pixel.

Prefixed Features Is this a touch device? -moz-touch-enabled

Prefixed Features Is this a touch device? -moz-touch-enabled@media screen and (-moz-touch-enabled) { /* touchy styles */}

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

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

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

Meta viewport <meta name="viewport"content="width=device-width">

Meta viewport <meta name="viewport" content="width=device-width">use that in combination with WIDTH @media screen and (max-width: 320px) { div { width: 80%; } }

Meta viewport <meta name="viewport" content="width=device-width, initial-scale=1">use that in combination with WIDTH @media screen and (max-width: 320px) { div { width: 80%; } }

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

viewport in CSS? Enough already. @viewport {How zoom: 1; /* No, not THAT can we apply width: device-width; zoom */ these things? }

Applying media queries

Applying media queries as blocks in css

Applying media queries as blocks in cssmedia attribute of link element

Applying media queries as blocks in cssmedia attribute of link element @import

Applying media queries

You don’t always need them

Layout is not design.

Design is the art of putting form andcontent 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?

Pages toComponents to Systems

Layout strategy wireframes drupal.org/node/413910

Layout strategy wireframes graffletopia.com/stencils/358

Layout strategyReference wireframing A B C D g E H F

Layout strategy Breakpoint graphs0 px 600 px 900 px We have no idea

Layout strategy Breakpoint graphs0 px 600 px 900 px We have no ideaStructured content first

Layout strategy Breakpoint graphs0 px 600 px 900 px We have no idea Fluid layoutStructured content first

Order-independentlayout mechanisms

Flexible BoxLayout moduleS N E

Flexible BoxLayout module tb S N E

Grid layout module

HGrid layout C A module F

HGrid layout module C A(templates) F

Grid layout module(templates)

F CGrid layout module(templates) H A

Not as cool as two bears fighting a F hockey player. C Grid layout module (templates) H A

Media queries / (meta) viewport

Media queries / (meta) viewport fluid layouts

Media queries / (meta) viewport fluid layoutsdevice/browser support profiles

Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing

Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing layout breakpoint graphs

Media queries / (meta) viewport fluid layoutsdevice/browser support profilescontent reference wireframing layout breakpoint graphs new layout mechanisms

Think in terms ofdesign principles & systems

The art of letting go

We need to think up new ways to design layout, and new waysto communicate these new designs to our colleagues and our clients.

Thank you!Starring magician Howard Thurstonas B. Rowser

http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011Thank you!Starring magician Howard Thurstonas B. Rowser

http://www.delicious.com/stephenhay/mobilismconf2011http://www.slideshare.net/stephenhay/mobilism2011Thank you! @stephenhayStarring magician Howard Thurstonas B. Rowser

http://www.splashnology.com	3373
http://www.blackphoebe.com	401
http://lanyrd.com	344
http://escuela.adistancia.mx	53
http://twitter.com	43
https://twitter.com	11
http://interactive.lukkien.com	11
http://sumerator.blogspot.com	10
http://translate.googleusercontent.com	6
http://sumerator.blogspot.co.uk	4
url_unknown	3
http://sumerator.blogspot.in	3
http://sumerator.blogspot.ca	2
http://sumerator.blogspot.kr	2
http://127.0.0.1:8000	2
http://www.slideshare.net	2
http://2105.tumblr.com	2
http://estudia.uni.opole.pl	2
http://sumerator.blogspot.com.es	1
https://twimg0-a.akamaihd.net	1
http://ninostalento.adistancia.mx	1
http://www.onlydoo.com	1
http://nexoweb.wordpress.com	1
http://webcache.googleusercontent.com	1
http://trunk.ly	1
http://safe.tumblr.com	1
http://131.253.14.98	1

Meta layout: a closer look at media queries

by Stephen Hay

Accessibility

Categories

Upload Details

Usage Rights

27 Embeds 4,283

Statistics

Meta layout: a closer look at media queries Presentation Transcript