Handys und Tablets WEBENTWICKLUNG JENSEITS DES DESKTOPS

Patrick H. Lauke / WebTech Conference / 12 October 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

</werbung>

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

there's an app for that...

“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

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

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

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

Opera/9.80 (Android; Linux; Opera Mobi/18187; U; en) Presto/2.8.149 Version/11.10

was bin ich?

lasst den user entscheiden:desktop oder mobile?

“refactored” für kleine displays,

nicht verwässert für handys

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

was unterscheidet “desktop” von “mobile”?

wie unterscheiden sich verschiedene devices?

1. input mechanismen2. displaygrösse

1. input mechanismen2. displaygrösse

mouse / keyboard / touch

touch interfaces

kein hover auftouch devices*

*nicht ganz wahr

:hover, :focus

onmouseover(...), onfocus(...)

onmouseout(...), onblur(...)

kein focus auftouch devices*

*nur nach einem click

mouseover > mousemove > mousedown > (focus) > mouseup > click

http://developer.apple.com/library/IOS/...

Touch events

touchstart touchentertouchmove touchleavetouchend touchcancel

www.w3.org/TR/touch-events

touch events

blah.addEventListener('touchstart', function(e){ … }, true);

blah.addEventListener('touchmove', function(e){ … }, true);

blah.addEventListener('touchend', function(e){ … }, true);

var hazTouch = 'ontouchstart' in window || 'onMozTouchDown' in window || 'createTouch' in document;

if (hazTouch) { … }

interface TouchEvent : UIEvent {

readonly attribute TouchList touches;

readonly attribute TouchList targetTouches;

readonly attribute TouchList changedTouches;

readonly attribute boolean altKey;

readonly attribute boolean metaKey;

readonly attribute boolean ctrlKey;

readonly attribute boolean shiftKey;

readonly attribute EventTarget relatedTarget;

};

interface Touch {

readonly attribute long identifier;

readonly attribute long screenX;

readonly attribute long screenY;

readonly attribute long clientX;

readonly attribute long clientY;

readonly attribute long pageX;

readonly attribute long pageY;

…

};

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

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

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

blah.addEventListener('touchstart', function(e){

…

e.preventDefault(); /* stop gestures, scrolling, context */

}, true);

proprietary touch events

Mobile Safari: gesturestart, gesturechange, gestureend

developer.apple.com/library/IOS/...

IE10: MSPointerDown, MSPointerMove, MSPointerUp, MSPointerOver, MSPointerOut

msdn.microsoft.com/en-us/ie/hh272903.aspx#_DOMTouch

1. input mechanismen2. displaygrösse

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

}

Negative 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.alistapart.com/articles/responsive-web-design

Responsive Web Design (RWD)

fluid grid + fluid images + media queries

bostonglobe.com

http://mediaqueri.es

http://mediaqueri.es

http://mediaqueri.es

http://mediaqueri.es

www.themaninblue.com/writing/perspective/2004/09/21

“not a magic bullet...”

ungelöste probleme…

viewport meta

physiche vs virtuelle pixel

mobile devices lügen

viewport metaschlägt dem browser interpretierung vor

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 lügen zweimal

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

target-densitydpi=device-dpi">

confused?“kleines” Fallbeispiel

<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

verhindert zooming!

JavaScript ansätze, um selektiv

meta viewport zu modifizieren...argh!

CSS Device Adaptation

@viewport {

width: device-width;

}

@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;

}

/* selektiver viewport per CSS */

@media … {

@-o-viewport {

…

}

}

<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;

}

}

still confused?ihr seid nicht allein...

#headfuck

ungelöste probleme…

Responsive Web Design (RWD)

fluid grid + fluid images + media queries

/* fluid image based on parent container */

img { width:100%; }

http://adaptive-images.com

mit HTML5 in die Zukunft...

video, audio und canvasohne “steck-eins”

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

geolocationnavigator.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;

...

}

offline applicationsapplication cache,

localStorage/sessionStorage, IndexDB

my.opera.com/core/blog/2011/03/23/webcam-orientation-preview

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

http://futurefriend.ly

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