82
mobile Web Webstandards Auf dem Weg zu Standards im mobilen Web Peter Rozek, 12.10.2010

Webstandards auf dem Weg zu Standards im Mobilen Bereich

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Webstandards auf dem Weg zu Standards im Mobilen Bereich

mobileWeb

WebstandardsAuf dem Weg zu

Standards im mobilen Web

Peter Rozek, 12.10.2010

Page 2: Webstandards auf dem Weg zu Standards im Mobilen Bereich

mobileWeb

Peter Rozek...

Page 3: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... seit 2010 bei der ecomplexx GmbH als Frontend-Developer für die barrierefreie und gebrauchtsaugliche Entwicklung von Websites.

...Usability Professional im AK Barrierefreiheit

... mit think green - neue Medien im Einkaufsführer Barrierefreies Internet aufgenommen und Unterstützer im Aktionsbündnis für barrierefreie Informationstechnik.

mobileWeb

Page 4: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Das mobile Web ist ein

Wachstumsmarkt...

Page 5: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... 1.8 Billionen Internet-Anschlüsse

http://www.internetworldstats.com

Page 6: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... 6.8 Billionen Menschen aktuell auf dem Erdball

Page 7: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... 3.4 Billionen Menschen mit einem Mobiltelefon

Page 8: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Rückblick...

Page 9: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Mobile Steinzeit:

WAP...Wat ?

Page 10: Webstandards auf dem Weg zu Standards im Mobilen Bereich

WAP was ist DAT ?Wireles Access Protocol1997/98

Page 11: Webstandards auf dem Weg zu Standards im Mobilen Bereich

WAPEigenes Markup (WML)

Page 12: Webstandards auf dem Weg zu Standards im Mobilen Bereich

WAPReduziert und kein Design

Page 13: Webstandards auf dem Weg zu Standards im Mobilen Bereich

WAP = Langweilig

Page 14: Webstandards auf dem Weg zu Standards im Mobilen Bereich

WAP 2.0...ein wenig besser

Page 15: Webstandards auf dem Weg zu Standards im Mobilen Bereich

...kein eigenes Markup, stattdessen HTTP und XHTML

Page 16: Webstandards auf dem Weg zu Standards im Mobilen Bereich

...ein wenig mehr Design

Page 17: Webstandards auf dem Weg zu Standards im Mobilen Bereich

...aber nicht wirklich interessant...

Page 18: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Status QuoVielzahl an Browsern und Endgeräten ...

Page 19: Webstandards auf dem Weg zu Standards im Mobilen Bereich

2500 Modelle

Page 20: Webstandards auf dem Weg zu Standards im Mobilen Bereich

50 unterschiedliche Betriebssysteme

Page 21: Webstandards auf dem Weg zu Standards im Mobilen Bereich

‣ Symbian S60 (Nokia, Samsung‣ Windows Mobile (Samsung, HTC)‣ Blackberry (RIM)‣ Android (HTC, Samsung, usw.)‣ iPhone (Apple)‣ Symbian UIQ (Sony Ericsson)‣ BREW (Motorola, LG)‣ webOS (Palm)‣ usw. usw. usw.

Betriebssysteme:

Page 22: Webstandards auf dem Weg zu Standards im Mobilen Bereich

25 Browser

Page 23: Webstandards auf dem Weg zu Standards im Mobilen Bereich

‣ Android Webkit‣ Opera Mobile‣ NetFront‣ Safari‣ Opera Mini‣ Blackberry‣ S60 Webkit‣ IE Mobile

Mobile Browser:‣ Iris‣ Bolt‣ Skyfire‣ Obigo‣ OpenWeb‣ Nokia S40‣ Palm Blazer‣ Fennec‣ Teashark‣ Ozone

Page 24: Webstandards auf dem Weg zu Standards im Mobilen Bereich

14 unterschiedliche Screengrössen

Page 25: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... HTML/CSS support ist oft inkonsistent.

Page 26: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Die Zukunft ist

Heute

Page 27: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Die Zukunft liegt in Webstandards

Page 28: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Webstandards...

Page 29: Webstandards auf dem Weg zu Standards im Mobilen Bereich

CSS Basierte Layouts vs. Tabellen LayoutTabellen sind complexer zu rendern.

Page 30: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Trennung von Struktur und Inhalt(HTML), Design (CSS), und Interaktion (JavaScript)

Page 31: Webstandards auf dem Weg zu Standards im Mobilen Bereich

SemantikBedeutungsrelevantes HTML schreiben.

Page 32: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Valides HTML... fehlerfreies HTML schreiben

Page 33: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Performanceoptimieren !!

Page 34: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Optimierung:HTMLCSSJavaScriptGrafiken

Page 35: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Minifyminify JavaScripthttp://www.ventio.se/tools/minify-js/

minify CSShttp://www.ventio.se/tools/minify-css/

Page 36: Webstandards auf dem Weg zu Standards im Mobilen Bereich

JavaScript am Ende der Seite einbinden.

Page 37: Webstandards auf dem Weg zu Standards im Mobilen Bereich

CSS im <Head> einbinden

Page 38: Webstandards auf dem Weg zu Standards im Mobilen Bereich

YSLOW Firebug Pluginhttp://developer.yahoo.com/yslow/

Page 39: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Safari Web Inspector

Page 40: Webstandards auf dem Weg zu Standards im Mobilen Bereich

‣ Seiten können schneller geladen werden

‣ Server requests werden verringert

Vorteil:

Page 41: Webstandards auf dem Weg zu Standards im Mobilen Bereich

mobileOKhttp://www.w3.org/TR/mobile-bp

Page 42: Webstandards auf dem Weg zu Standards im Mobilen Bereich
Page 43: Webstandards auf dem Weg zu Standards im Mobilen Bereich
Page 44: Webstandards auf dem Weg zu Standards im Mobilen Bereich
Page 45: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Wie geht es weiter...

Page 46: Webstandards auf dem Weg zu Standards im Mobilen Bereich

CSS 3Präsentation

http://www.w3.org/TR/css3-roadmap/

Page 47: Webstandards auf dem Weg zu Standards im Mobilen Bereich

HTML5Inhalt

http://www.w3.org/TR/html5/

Page 48: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Moderne Browserverstehen Webstandards

Page 49: Webstandards auf dem Weg zu Standards im Mobilen Bereich

• open Source

• gute Webstandards Unterstützung(XHTML, HTML5, CSS3 ...)

• Bei vielen Marktführern(Apple, Nokia, Samsung, Google, Palm ...)

• wird in vielen Betriebssystemen eingesetzt(iOS, Android, webOS ...)

Webkit

Page 50: Webstandards auf dem Weg zu Standards im Mobilen Bereich

• Frei verfügbar

• gute Webstandards Unterstützung‚

• Für unterschiedliche Platformen erhältlich(iPhone, Andriod, Windows Mobile ...)

• für ältere Devices erhältlich

OperaMini

Page 51: Webstandards auf dem Weg zu Standards im Mobilen Bereich

CSS 3... coole Sache

Page 52: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Media Queries...moderne Browser verstehen CSS 3

http://www.w3.org/TR/css3-mediaqueries/

Page 53: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Media Queriesgezieltes ansprechen

Page 54: Webstandards auf dem Weg zu Standards im Mobilen Bereich

<link rel=“stylesheet“ ... media=“screen and (max-width: 480px)“ href=“...“>

@import url (“...“) screen and (max-width: 480px);

@media screen and (max-width: 480px) {

CSS regeln...

}

Page 55: Webstandards auf dem Weg zu Standards im Mobilen Bereich

HTML5

Page 56: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Audio, Video und Canvas Element ...

Page 57: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... kein Java, Flash, Silverlight

Page 58: Webstandards auf dem Weg zu Standards im Mobilen Bereich

...CSS 3 und HTML 5 rockt...

Page 59: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... ein Beispiel

Hicksdesignhttp://hicksdesign.co.uk

Page 60: Webstandards auf dem Weg zu Standards im Mobilen Bereich

schicke Website...

Page 61: Webstandards auf dem Weg zu Standards im Mobilen Bereich

flexibles Layout

Page 62: Webstandards auf dem Weg zu Standards im Mobilen Bereich

flexibles Layout

Page 63: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... und Mobile

Page 64: Webstandards auf dem Weg zu Standards im Mobilen Bereich

desktop Website...+ media queries

Page 65: Webstandards auf dem Weg zu Standards im Mobilen Bereich

desktop Website...+ media queries= mobile Website

Page 66: Webstandards auf dem Weg zu Standards im Mobilen Bereich

...Einzelfall, keineswegs!

dConstructhttp://2010.dconstruct.org/

Page 67: Webstandards auf dem Weg zu Standards im Mobilen Bereich

schicke Website...

Page 68: Webstandards auf dem Weg zu Standards im Mobilen Bereich

...Mobile

Page 69: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Simon Collisonhttp://2010.dconstruct.org/

Page 70: Webstandards auf dem Weg zu Standards im Mobilen Bereich

schicke Website...

Page 71: Webstandards auf dem Weg zu Standards im Mobilen Bereich

flexibles Layout

Page 72: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... und Mobile

Page 73: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Metaangaben zumViewport...

Page 74: Webstandards auf dem Weg zu Standards im Mobilen Bereich

viewport meta...sichtbares Browserfenster

Page 75: Webstandards auf dem Weg zu Standards im Mobilen Bereich

<meta name=“vieport“ content=“width=device-width“>

<meta name=“vieport“ content=“width=device-width, initial-scale=1“>

Page 76: Webstandards auf dem Weg zu Standards im Mobilen Bereich

Problem Internet Explorer ...

Page 77: Webstandards auf dem Weg zu Standards im Mobilen Bereich

HTML5 und CSS3 Unterstützung erst mit dem Internet Explorer 9

Page 78: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... was tun ?

Page 79: Webstandards auf dem Weg zu Standards im Mobilen Bereich

... seperate mobile Site?

Page 80: Webstandards auf dem Weg zu Standards im Mobilen Bereich

mobileWeb

Vielen Dank für Ihre

Aufmerksamkeit

Peter Rozek, 12.10.2010

Page 81: Webstandards auf dem Weg zu Standards im Mobilen Bereich

?Fragen

Peter Rozek, 12.10.2010