Adapt! Media queries and viewport

Adapt!MEDIA QUERIES AND VIEWPORT

1.Tuesday, 31 July 2012

Hi — I’m Chris Mills!Open standards advocate and Education agitator

dev.opera.com editor

W3C web education community group chair

Accessibility whiner

HTML5/CSS3 wrangler

Heavy metal drummer and proud dad


Use*l Stuffdev.opera.com

slideshare.net/chrisdavidmills

[email protected]

@chrisdavidmills


mailto:[email protected]


Cont/t For Adaptive Design


Adaptive“Able to be easily modified to suit a new purpose or situation”


Responsive“Reacting quickly and positively.”


RWD/AWD“Designing sites that will dynamically adapt their layout, graphics and other features to suit different browsers and devices.”

Responsive design? Adaptive design? It matters not which term you use.


Responsive WebDesign is Hot!!


1ree Options for creating tailored displays

1. Adapt a single site

2. Do nothing

3. Create a separate site/separate sites


Creating separate sitesUsually a terrible idea

Despite what “that Nielsen bloke” says

Maintenance nightmare

Multiple codebases

Browser sniffing

And how many do you have to make?


Doing nothingActually goes a long way

The web is responsive by default

Mobile browsers have features to help render desktop sites


Adapt a single siteBy far the best option, usually

Let’s see how!


Adaptive

technologies14.

Tuesday, 31 July 2012

Adaptive Breadand Butter

Liquid layouts

Media types

Media queries

Viewport

Adaptive images


Media T4es The idea of adaptive design isn’t new

Media types have been around since CSS2

media="screen"

media="print"


Media T4es media="handheld"

media="tv"


Small TV Rant“Searching, browsing, updating and buffering are not TV-like. In fact an enormous number of people found that the technology they had purchased wasn't what they expected at all, that they were bringing the worst parts of using a computer into the television environment.”

-- www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspx18.


http://www.insideci.co.uk/news/rovi-research-reveals-changing-consumer-habits.aspx




Media T4es FailedBecause they make too many assumptions

And don’t give enough control

Devs used “handheld” to serve crap dumbed down experiences to mobile

“handheld”, “tv” and “projection” are really just “screen”


Media Queries & Viewport


Media Queries...succeed where media types failed, mostly

www.w3.org/TR/css3-mediaqueries/

Build on top of media types

Allow more granular control of style application

See mediaqueri.es for tonnes of examples


Basic Media Querymedia="screen and (max-width: 480px)"

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

/* Insert rules for narrow screens here */

}


Adding /tra conditions@media screen and (min-width: 480px) and (max-width: 1024px) {

/* Rules to be applied between 480 and 1024 pixels */

}


Multiple right answers@media screen and (max-width: 1024px), print and (max-width: 21cm) {

/* Rules to be applied if either of the two queries are true */

}


Media Query negation@media not screen and (max-width: 480px) {

/* Rules to be applied when the screen is NOT narrow */

}


5clusive Queries@media only screen and (max-width: 480px) {

/* An exclusive set of rules, ONLY for narrow screens */

}


T4ical stylesheet/* Default styles here */

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

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




BreakpointsWhere do you need to change your styles?

Device breakpoint: change styles for specific target device screen sizes

Content breakpoint: changes styles at the point where your layout actually breaks


Which way do you do it?For a general web site, content breakpoints

For a platform-targetted app, device breakpoints

More realistically, you’ll do a combination, eg fluid width for wide screens, a fixed width and height for iPad portrait/landscape, and a fluid width for smartphones and other devices.


1e different availableMedia Querieswidth color

height color-index

device-width monochrome

device-height resolution

orientation scan

aspect-ratio grid

device-aspect-ratiodevice-aspect-ratio32.


You will m7t commonly usewidth (and height): this is viewport w/h!

You could use device-width/height for mobiles/tablets, but this confuses things. There is a better way (see later)

resolution: for high fidelity devices

orientation: for landscape/portrait layout optimization (an iPad app, for example)


Beware! Mobiles lie! Want this... ...Got this?


Mobiles lie...They assume a wider viewport than they really have

Render the site at that width

Then shrink the result to fit on the screen

For example, Opera Mobile uses 980px


ViewportInvented by Apple

A meta tag

Suggests initial viewport, zoom, and resolution


Viewport /ample<meta name="viewport"content="width=device-width">


Much better!


Another common use<meta name="viewport" content="width=550">


Different availableViewport options

width height

minimum-scale maximum-scale

initial-scale user-scalable

target-densitydpitarget-densitydpi


CSS Device Adaptation Viewport = more of a style thing than a content thing

Provides @viewport at-rule to contain viewport info

Supported in Opera and IE10, with prefixes

dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport


CSS Device Adaptation <meta name="viewport"

content="width=550,

maximum-scale=1.0,

target-densitydpi=device-dpi">

@viewport { width: 550px; max-zoom: 1; resolution: device; }


Other Responsive Web Design Issues


What else have we got to worry about?

Responsive replaced elements

Bandwidth/loading of resources

Resolution

Processing power

Control mechanisms


Replaced elements


Replaced elements#related img {

display: block;

margin: 0 auto;

max-width: 100%;

}


Be warnedOld IE versions don’t support max-width, so you’ll have to fallback to width: 100% instead.


8le s9e also importantUsers on slow connections won’t want to download huge media files.

We need to try to serve them smaller files/alternatives.

Assumptions: e.g. narrow equals mobile equals slow connection


CSS resources easyto deal with

Use “mobile first”

Load smaller resources by default, and larger ones inside MQs

Saves narrow screen devices from loading wide screen resources


“Mobile first” stylesheet/* Default styles here */






“Mobile first” /ampleheader { background: url(small-image.png); }

@media screen and (min-width: 480px) { header { background: url(large-image.png); }

}


“Mobile first” problemsIE 6-8 left with mobile layout, as they don’t support media queries

You’ll need to polyfill media queries, e.g. with respond.js


HTML5 <video> well served <source src="crystal320.webm"type="video/webm" media="all and (max-width: 480px)">

<source src="crystal720.webm" type="video/webm" media="all and (min-width: 481px)">


<img> not so luckyhttp://dev.opera.com/articles/view/responsive-images-problem/

None work perfectly

Pre-fetch is a bitch


http://dev.opera.com/articles/view/responsive-images-problem/




adaptive-images.comAdd .htaccess and adaptive-images.php to your document root folder.

Add one line of JavaScript into the <head> of your site.

Add your CSS Media Query values into $resolutions in the PHP file.


1e <picture> element<picture alt="a picture of something"> <source src="mobile.jpg"> <source src="medium.jpg" media="min width: 600px"> <source src="fullsize.jpg" media="min width: 900px"> <img src="mobile.jpg">

</picture>


1e srcset attribute<img src="face-600-200-at-1.jpeg" alt=""srcset="face-600-200-at-1.jpeg 600w 200h 1x, face-600-200-at-2.jpeg 600w 200h 2x, face-icon.png 200w 200h">


Processing powerYou might want to turn off effects like shadows, gradients and animations for small screen devices

CSS effects are arguably less power draining than JS or Flash, but even so

They can cause the UI to look cluttered too


ResolutionHi-fidelity devices are causing an issue, e.g. iPhone 4s is 960 x 640 pixels at 326ppi

These devices lie twice

One CSS pixel = multiple device pixels

Images can start to look pixellated


Solutions<img src="500px_image.jpg" width="250">


Solutions@media screen and (-o-min-device-pixel-ratio: 3/2) {

body { background-size: 250px; }

}

@media screen and (-webkit-min-device-pixel-ratio: 1.5) {


}62.


Soon to be replaced by@media screen and (resolution: 1.5dppx) {


}


Tell the truth with viewport<meta name="viewport"

content="width=device-width,

target-densitydpi=device-dpi">


All good, but...Images may now start to look a little small

You could serve larger images for devices with higher resolutions


Control mechanismsCurrently tricky

Usual wisdom about web sites applies: Make pages keyboard accessible, etc.

Can’t be detected in CSS (yet)

JavaScript touch detection is an option: Modernizr, jQuery


68.

Buy my book“Subtle” advertisment


1anks!dev.opera.com | [email protected] | @chrisdavidmills




Adapt! Media queries and viewport

Technology

Transcript of Adapt! Media queries and viewport