Handys und Tablets MOBILE-FRIENDLY WEBENTWICKLUNG JENSEITS DES DESKTOPS

Patrick H. Lauke / MobileTech Conference 2011 / München / 30 März 2011

web evangelist bei Opera

mobile web istimmer wichtiger

wir brauchen eine site für's iPhone

oh, und für's iPad

“remove iPhone from ass”Peter-Paul Koch, The iPhone obsession

www.quirksmode.org/blog/archives/2010/02/the_iphone_obse.html

sites die auf (fast) allen mobilen devices laufen

was ist überhaupt ein “mobile device”?

3 ansätze

1. nichts tun

nicht mehr nur WAP oder text

moderne mobile browserkommen mit

“normalen” sites zurecht

“aber der mobile kontext...”

“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, ...)

vorsicht: browser sniffingphoto: http://www.flickr.com/photos/timdorr/2096272747/

lasst den user entscheiden:desktop oder mobile?

“refactored” für kleinere displays,nicht verwässert für “mobile”

3. einzige adaptive site

nichts neues...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 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

● erweitern CSS 2.1 Media Types konzept● präzisere kontrolle (nicht nur screen, print...)

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

“not a magic bullet...”

viewport meta

physische vs virtuelle pixel

viewport metaschlägt dem browser interpretierung vor

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

<meta name="viewport" content="width=320, initial-scale=2.3,user-scalable=no">

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

<meta name="viewport" content="width=550">

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

+

@media screen and (…) { … }

CSS Device Adaptation@viewport { width: device-width;}

@viewport { width: 320px; zoom: 2.3; user-zoom: fixed;}

dev.w3.org/csswg/css-device-adapt

Momentan nur in Opera Mobile 11 beta mit -o- prefix dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport

touch interfaces

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

kein hover auftouch devices**einige devices “faken” es aber

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

kein focus auftouch devices*

*nur nach einem 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:maus, keyboard und touch events

multimedia

video, audio und canvasohne “steck-eins”

(kein Java / Flash / Silverlight auf mobilen geräten)

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 als sahnehäubchen

(+ IP look-up, form, ...)

online/offline

application cache, localStorage/sessionStorage,

WebSQL, IndexDB

…und mehr (in arbeit)WebGL, device API, orientation …

adaptive technikennicht nur für “mobile”

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

1. nichts tun2. separate mobile site3. einzige adaptive site

www.opera.com/developerpatrick.lauke@opera.com