Adaptive layouts Patrick H. Lauke / standards>next / London / 28 May 2011 RANDOM THOUGHTS ON MAKING YOUR SITE CROSS-DEVICE FRIENDLY
Jan 28, 2015
Adaptive layouts
Patrick H. Lauke / standards>next / London / 28 May 2011
RANDOM THOUGHTS ON MAKING YOUR SITE CROSS-DEVICE FRIENDLY
we need a site that works on mobile
we need a site that works on iPhone
...works on iPhone...oh, and iPad
“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession
www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html
make your site work on all (most) mobile devices
what exactly is a “mobile device”?
don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/
CSS 2 Media Types
Media types
all brailleembossed handheldprint projectionscreen speechtty tv
media="handheld"
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
● build and extend CSS 2.1 Media Types● more granular control of capabilities
http://www.w3.org/TR/css3-mediaqueries/
Media featureswidth 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}
Negative expressions – only keyword@media only screen and (min-width:800px) { // only applied to screen device // with width > 800px}
Multiple media queries@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.alistapart.com/articles/responsive-web-design
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
http://mediaqueri.es
www.themaninblue.com/writing/perspective/2004/09/21
“not a magic bullet...”
viewport meta
physical vs virtual pixels
mobile devices lie(to better serve the user)
viewport metasuggests sizing to mobile browser
viewport meta<meta name="viewport" content="width=320">
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=480">
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550">
<meta name="viewport" content="width=550, maximum-scale=1.0">
maximum-scale=1.0breaks zooming!
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) { var viewportmeta = document.querySelector('meta[name="viewport"]'); if (viewportmeta) { viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0'; document.body.addEventListener('gesturestart', function() { viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6'; }, false); }}
adactio.com/journal/4470
device-width to the rescue?
in Mobile Safari only: device-width always same (portrait/landscape) … WTF?
high-dpi devices lieabout device-width
<meta name="viewport" content="width=device-width">
480px / 160% = 300px
<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">
CSS Device Adaptation@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}
dev.w3.org/csswg/css-device-adapt
Currently only in Opera Mobile 11 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
@media + @viewport@media screen and (max-device-width: 550px) { @-o-viewport { width: 550px; }}
only apply viewport width fixing on small-screen devices
@viewport@-o-viewport { width: 550px auto;}
minimum and maximum width
BUG ALERT: Opera currently not re-running Media Queries on portrait/landscape switch
www.opera.com/[email protected]