handys und tablets - webentwicklung jenseits des desktops - mobiletech conference - münchen...
TRANSCRIPT
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