Post on 09-May-2015
transcript
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
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%; }
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
www.opera.com/developerpatrick.lauke@opera.com