Post on 28-Jan-2015
description
Adapt and respond MOBILE-FRIENDLY LAYOUTS BEYOND THE DESKTOP
Patrick H. Lauke / standards.next / 3 March 2012
mobile webis increasingly important
we need a site that works on iPhone
oh, and on the iPad
“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
sites that work on (almost) all mobile devices
3 approaches
1. do nothing
moved beyond WAP or text
modern mobile browserscan handle the “real web”
“but the mobile context...”
“Desktop computers and mobile devices are so different that the only way to offer a great user experience is to create two
separate designs — typically with fewer features for mobile.”www.useit.com/alertbox/mobile-redesign.html
twitter.com/#!/stephenhay/status/23350345962889216
2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)
beware browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/
let the user decide:diet or full fat?
“refactored” for small displays,
not dumbed down for mobile
3. single adaptive site
nothing new
www.alistapart.com/articles/dao
The Sage “... accepts the ebb and flow of things,
Nurtures them, but does not own them,”Tao Te Ching; 2 Abstraction
how to take “desktop” layout to “mobile”?
CSS 2 Media Types
Media types
all brailleembossed handheldprint projectionscreen speechtty tv
CSS 2.1 Media Types
<link rel="stylesheet" ... media="print" href="...">
@import url("...") print;
@media print {
// insert CSS rules here
}
CSS 3 Media Queries“...the new hotness” Jeffrey Zeldman
http://www.zeldman.com/2010/04/08/best-aea-yet/
CSS 3 Media Queries
● builds on CSS 2.1 Media Types concept● more granular control (not just screen, print...)
http://www.w3.org/TR/css3-mediaqueries/
Media features
width colorheight color-indexdevice-width monochromedevice-height resolutionorientation scanaspect-ratio griddevice-aspect-ratio
CSS 3 Media Queries
<link rel="stylesheet" ...
media="screen and (max-width:480px)" href="...">
@import url("...") screen and (max-width:480px);
@media screen and (max-width:480px) {
// insert CSS rules here
}
Multiple expressions – and keyword
@media screen and (min-width:180px) and (max-width:480px) {
// screen device and width > 180px
// and width < 480px
}
Multiple expressions – comma separated
@media screen and (min-width:800px),
print and (min-width:20em) {
// screen device with width > 800px
// or print device with width > 20em
}
Negative expressions – not keyword
@media not screen and (min-width:800px) {
// not applied to screen device
// with width > 800px
}
Exclusive expressions – only keyword
@media only screen and (min-width:800px) {
// only applied to screen device
// with width > 800px
}
Multiple media queries/* “The absence of a media query is the first media query” Bryan Rieger */
@media screen and (max-width:480px) {
// screen device and width < 480px
}
@media screen and (max-width:980px) {
// screen device and width < 980px
}
@media screen and (min-width:980px) {
// screen device and width > 980px
}
www.themaninblue.com/writing/perspective/2004/09/21
design approaches using media queries
www.alistapart.com/articles/responsive-web-design
grid-based layouts
Responsive Web Design™
fluid grid + fluid images + media queries
adaptive vs responsive?
“not a magic bullet...”
unsolved mysteries…
mobile devices lie
physical vs virtual pixels
viewport metasuggests an initial layout viewport
and zoom
viewport meta
<meta name="viewport" content="width=480">
<meta name="viewport" content="width=480, user-scalable=no">
http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Viewport properties
width initial-scaleheight minimum-scaleuser-scalable maximum-scale
<meta name="viewport" content="width=device-width">
high-dpi devices lie twice
<meta name="viewport" content="width=device-width,
target-densitydpi=device-dpi">
“interesting” iOS quirk
confused?a practical example…
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550,maximum-scale=1.0">
<meta name="viewport" content="width=550,maximum-scale=1.0,
target-densitydpi=device-dpi">
maximum-scale=1.0
breaks zooming!
JavaScript approaches to selectively apply viewport meta...argh!
CSS Device Adaptation@viewport {
width: 320px;
zoom: 2.3;
user-zoom: fixed;
}
www.w3.org/TR/css-device-adapt
only works in Opera Mobile 11+ at the moment, with -o- prefix dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport
Viewport properties
width / min-width / max-width user-zoom
height / min-height / max-height orientation
zoom / min-zoom / max-zoom resolution
<meta name="viewport" content="width=550">
@-o-viewport {
width: 550px;
}
<meta name="viewport" content="width=550,maximum-scale=1.0,
target-densitydpi=device-dpi">
@-o-viewport {
width: 550px;
max-zoom: 1;
resolution: device;
}
/* selective viewport via CSS */
@media … {
@-o-viewport {
… /* for propellerheads */
}
}
<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">
@media screen {
@-o-viewport {
/* undo meta viewport settings */
width: auto; max-zoom: auto;
}
}
@media screen and (max-device-width: 550px) {
@-o-viewport {
/* 550px viewport on small screen devices */
width: 550px;
}
}
<meta name="viewport" content="width=550,maximum-scale=1.0,target-densitydpi=device-dpi">
@media screen {
@-o-viewport {
/* undo meta viewport settings */
width: auto; max-zoom: auto;
}
}
@media screen and (max-device-width: 550px) {
@-o-viewport {
/* 550px viewport on small screen devices */
width: 550px;
}
}
@-o-viewport {
/* minimum of 550px viewport width */
width: 550px auto; max-zoom: auto;
}
more unsolved mysteries
Responsive Web Design™
fluid grid + fluid images + media queries
/* fluid image based on parent container */
img { max-width:100%; }
Responsive Web Design™
fluid grid + fluid images + media queries
www.zeldman.com/2011/12/29/state-of-the-web-of-apps-devices-and-breakpoints
“embrace the fluidity,don't fight it”
www.opera.com/developerpatrick.lauke@opera.com