Mobile Web mit WebstandardsMediale Hamburg, 16. September 2011
Axel Dürkop, trainXL

Was ist neu?

Neue Elemente für mehr Semantik im Markup:

<section>, <header>, <footer>, <aside>, <article> u.a.

Neue Typen für <input>-Felder:

datetime, datetime-local, date, month, week u.a.

Visualisierungen und nativer Multimedia-Support:
```
<canvas>, <audio>, <video>
```

Transitions Übergänge zwischen Zuständen
Verläufe, die dynamisch auf die Ausmaße des Elements berechnet werden.
@font-face Möglichkeit, Schriften einzubinden, die nicht auf dem Client installiert sind.
Media Queries Möglichkeit, individuelles CSS in Abhängigkeit vom Viewport des Endgeräts zu nutzen.
```
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />
```

WebKit
Die freie Engine (Chrome und Safari) führt maßgeblich in Sachen Modernität.
WebKit rendert Browsercontent unter iOS (iPhone, iPad) und Android.

Web applications are for performing tasks, websites are for consuming information.
Earle Castledine, Sitepoint

Progressive Enhancement
Ausgangspunkt ist eine Version, die mit allen gängigen Browsern kompatibel ist.
Mobile First
Zunächst eine Minimalversion für mobile Endgeräte erstellen, dann eine angereicherte Variante für den Desktop bauen.
Graceful Degradation
Orientierung an den Features der aktuell leistungsfähigen Browsern, abgespeckte Version für ältere Modelle.

UA Sniffing
Unzuverlässige Methode, den User Agent (UA) auf dem Server zu ermitteln, um dann entsprechend angepassten Content auszuliefern.
Feature Detection
Bestimmte Funktionalitäten mit JavaScript ermitteln und daraufhin Entscheidungen treffen.
- Modernizr
  Hilfsbibilothek zur Ermittlung von Browserfeatures.
- Yepnope
  Eigenes Projekt für Feature Detection, das in Modernizr integriert ist. Es erlaubt das Nachladen von JavaScript-Funktionen, die fehlende Features kompensieren (Polyfills).