webseiten für mobile geräte - mobiletech conference 2010 mainz
DESCRIPTION
Internetnutzung auf Handys und mobilen Geräten ist in den letzten Jahren drastisch gestiegen. Und mit diesem Trend steigen auch die Erwartungen der Kunden – eine "mobile-optimised"-Version gehört bei vielen Webprojekten schon jetzt zum Standard – und der Endnutzer. Obwohl die Browser im mobilen Bereich schon recht gut mit "normalen" Webangeboten klar kommen, gibt es trotzdem neue Strategien und altbekannte Webdesign-/Web-Development-Methoden, um sicherzustellen, dass ihre Seiten auf allen Geräten – jenseits vom klassischen Desktoprechner – so gut wie möglich aussehen und funktionieren.TRANSCRIPT
webseiten für mobile geräte PATRICK H. LAUKE / OPERA SOFTWARE
Patrick H. Lauke / MobileTech Conference 2010 / Mainz / 8 September 2010
mobile web istimmer wichtiger
wir brauchen eine site für's iPhone
...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
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}
viewport meta
viewport meta● desktop: viewport = sichtbares browserfenster● mobile geräte: “virtual viewport”, physical pixels, zoom● viewport meta schlä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
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;
data URLshttp://software.hixie.ch/utilities/cgi/data/data
data URLs<img width="48" height="48" alt="Redux gravatar" src="data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01%01%01%00H%00H%00%00%FF% … ">h1 {
background: url("data:image/jpeg,%FF%D8%FF%E0%00%10JFIF%00%01 … ") no-repeat left top;}
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 detectionwindow.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
application cache<html manifest=”blah.manifest”>CACHE MANIFESTimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssdata.xmlNETWORK:resources/news.xmlFALLBACK:images/ offline/not-available.png
…und mehr (in arbeit)WebGL, <device>, Contacts API …
1. nichts tun2. separate mobile site3. einzige adaptive site
www.opera.com/[email protected]
people.opera.com/patrickl/presentations/mobiletechcon_08.09.2010/mobiletechcon_08.09.2010.pdf