Post on 09-May-2015
webseiten für mobile geräte PATRICK H. LAUKE / OPERA SOFTWARE
Patrick H. Lauke / M-Days / Frankfurt / 27 Januar 2011
web evangelist bei Opera
Opera – one browser on many devices
</werbung>
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...”
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 kleine displays,nicht verwässert für handys
3. einzige adaptive site
nichts neues...fluid layout, progressive enhancement, graceful degradation
CSS 2 Media Types(screen, print, handheld)
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...)● width, height, orientation, color, resolution, …
http://www.w3.org/TR/css3-mediaqueries/
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}
www.alistapart.com/articles/responsive-web-design
viewport meta
physiche 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">
generelle tips“best practices” auf mobile umso wichtiger
performance optimieren
daten und server requests minimieren / vermeiden
(minify JavaScript, kombinierte CSS files, …)
CSS spritesDave Shea, A List Apartwww.alistapart.com/articles/sprites
width: 50px; height: 50px;background: url(icons.gif) no-repeat -51px 0;
:hover / onmouseover
HTML5<!DOCTYPE html>
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
…und mehr (in arbeit)WebGL, <device>, DAP …
1. nichts tun2. separate mobile site3. einzige adaptive site
www.opera.com/developerpatrick.lauke@opera.com
people.opera.com/patrickl/presentations/m-days_27.01.2011/m-days_27.01.2011