Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011

webseiten für mobile gerätePATRICK H. LAUKE / OPERA SOFTWAREPatrick 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ürs iPhone

oh, und fürs 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) allenmobilen devices laufen

was ist überhaupt ein “mobile device”?

3 ansätze

1. nichts tun

nicht mehr nur WAP oder text

moderne mobile browser kommen mit “normalen” sites zurecht

“aber der mobile kontext...”

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

vorsicht: browser sniffing photo: 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

http://mediaqueri.es

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

generelle tips“best practices” auf mobile umso wichtiger

performance optimieren

daten und server requestsminimieren / vermeiden (minify JavaScript, kombinierte CSS files, …)

CSS sprites Dave Shea, A List Apart www.alistapart.com/articles/sprites

width: 50px; height: 50px;background: url(icons.gif) no-repeat -51px 0;

:hover / onmouseover

HTML5<!DOCTYPE html>

video, audio und canvas ohne “steck-eins”(kein Java / Flash / Silverlight auf mobilen geräten)

geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) { /* wheres Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ...}

offline applications application cache,localStorage/sessionStorage, IndexDB

…und mehr (in arbeit)WebGL, <device>, DAP …

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

www.opera.com/developer patrick.lauke@opera.compeople.opera.com/patrickl/presentations/m-days_27.01.2011/m-days_27.01.2011

http://my.opera.com	23
http://blog.dmr-solutions.com	19
http://sma-nm3	8
http://soup.sindre.at	2

Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011

by Patrick Lauke on Jan 27, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 52

Statistics

Webseiten für mobile Geräte - M-Days - Frankfurt 27.01.2011 — Presentation Transcript