СМАРТФОНЫ И ПЛАНШЕТНИКИMOBILE-FRIENDLY ВЕБ-РАЗРАБОТКА ПОМИМО ДЕСКТОПА

Patrick H. Lauke / RIT++ Conference 2011 / Moscow / 25 April 2011

mobile web is increasingly important

we need a website optimised for iPhone

oh, und another onefor 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

what exactly is a “mobile device”?

3 approaches

1. do nothing

not WAP or text anymore...

modern mobile browserswork ok with “normal” sites

“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

2. separate mobile site(m.flickr.com, mobile.mysite.com, ...)

внимание: browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/

let the user decide:desktop or mobile?

refactored for small screen,not dumbed down for mobile

3. single adaptive site

nothing new...fluid layout, progressive enhancement, graceful degradation

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

adaptive layouts

CSS 2.1 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

● extend concept of 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 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">

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

BUG ALERT: Opera currently not re-running Media Queries on portrait/landscape switch

touch interfaces

:hoveronmouseover(...)onmouseout(...)

no hover ontouch devices*

*but some devices/browsers fake it

:focusonfocus(...)onblur(...)

no focus ontouch devices*

*only after an actual click

touch events

window.addEventListener('touchstart', function(e){ … }, true);window.addEventListener('touchmove', function(e){ … }, true);window.addEventListener('touchend', function(e){ … }, true);

e.touches[0].pageX; e.touches[0].pageY; …

progressive enhancement:mouse, keyboard and touch events

multimedia

video, audio und canvaswithout plug-ins

(Java / Flash / Silverlight absent from some devices)

www.splintered.co.uk/experiments/archives/paranoid_0.3

geolocation

navigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);

function success(position) {/* where's Wally? */var lat = position.coords.latitude;var long = position.coords.longitude;...

}

progressive enhancement:geolocation in addition to other

methods (IP address look-up, form, ...)

online/offline

application cache, localStorage/sessionStorage,

WebSQL, IndexDB

…and more (work in progress)WebGL, device API, orientation …

adaptive techniquesnot just for “mobile”

twitter.com/#!/stephenhay/status/23350345962889216

1. do nothing2. separate mobile site3. single adaptive site

Спасибоwww.opera.com/developer

patrick.lauke@opera.com