Webstandards auf dem Weg zu Standards im Mobilen Bereich

mobile Webstandards
Auf dem Weg zu
Standards im

Web mobilen Web

Peter Rozek, 12.10.2010

mobile
Peter Rozek
...

Web

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

...Usability Professional im AK Barrierefreiheit

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

Das mobile Web ist
ein
Wachstumsmarkt
...

... 1.8 Billionen
Internet-Anschlüsse

http://www.internetworldstats.com

... 6.8 Billionen
Menschen aktuell auf
dem Erdball

... 3.4 Billionen
Menschen mit einem
Mobiltelefon

Mobile Steinzeit:

WAP
...Wat ?

WAP was ist DAT ?
Wireles Access Protocol
1997/98

...kein eigenes Markup,
stattdessen HTTP und
XHTML

...aber nicht wirklich
interessant...

Status Quo
Vielzahl an Browsern und
Endgeräten ...

50 unterschiedliche
Betriebssysteme

Betriebssysteme:
‣ 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.

Mobile Browser:
‣ Android Webkit ‣ Iris
‣ Opera Mobile ‣ Bolt
‣ NetFront ‣ Skyfire
‣ Safari ‣ Obigo
‣ Opera Mini ‣ OpenWeb
‣ Blackberry ‣ Nokia S40
‣ S60 Webkit ‣ Palm Blazer
‣ IE Mobile ‣ Fennec
‣ Teashark
‣ Ozone

14 unterschiedliche
Screengrössen

... HTML/CSS support ist
oft inkonsistent.

Die Zukunft liegt in
Webstandards

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

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

Semantik
Bedeutungsrelevantes
HTML schreiben.

Valides HTML
... fehlerfreies HTML
schreiben

Optimierung:
HTML
CSS
JavaScript
Grafiken

Minify
minify JavaScript
http://www.ventio.se/tools/minify-js/

minify CSS
http://www.ventio.se/tools/minify-css/

JavaScript am Ende
der Seite einbinden.

YSLOW Firebug
Plugin
http://developer.yahoo.com/yslow/

Vorteil:
‣ Seiten können schneller
geladen werden
‣ Server requests werden
verringert

mobileOK
http://www.w3.org/TR/mobile-bp

CSS 3
Präsentation

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

HTML5
Inhalt

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

Moderne Browser
verstehen Webstandards

Webkit
• 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 ...)

OperaMini
• Frei verfügbar
• gute Webstandards Unterstützung‚
• Für unterschiedliche Platformen
erhältlich
(iPhone, Andriod, Windows Mobile ...)
• für ältere Devices erhältlich

Media Queries
...moderne Browser
verstehen CSS 3
http://www.w3.org/TR/css3-mediaqueries/

Media Queries
gezieltes ansprechen

Audio, Video und Canvas
Element ...

... kein Java, Flash,
Silverlight

... ein Beispiel

Hicksdesign
http://hicksdesign.co.uk

+ media queries
desktop Website...

= mobile Website
+ media queries
desktop Website...

...Einzelfall, keineswegs!

dConstruct
http://2010.dconstruct.org/

Simon Collison
http://2010.dconstruct.org/

viewport meta
...sichtbares
Browserfenster

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

mobile Vielen Dank für
Ihre

Web Aufmerksamkeit


Fragen


E-Mail: peter.rozek@complexx.com
E-Mail: rozek.p@think-green.de
Twitter: Webinterface


Webstandards auf dem Weg zu Standards im Mobilen Bereich

Recomendados

Recomendados

Más contenido relacionado

Destacado

Destacado (20)

Similar a Webstandards auf dem Weg zu Standards im Mobilen Bereich

Similar a Webstandards auf dem Weg zu Standards im Mobilen Bereich (20)

Más de Peter Rozek

Más de Peter Rozek (20)

Webstandards auf dem Weg zu Standards im Mobilen Bereich