Mobile Webseiten

Inhalt

Vorwort

Teil I: Basics

1 Mobile Nutzer

1.1 Wachstum und Bedeutung

1.2 Besonderheiten von mobilen Geräten

1.2.1 Größe des Bildschirms

1.2.2 Datenübertragung

1.2.3 Stromversorgung

1.2.4 Zusätzliche Features

1.3 Mobiler Kontext

1.4 Einschränkungen oder neue Möglichkeiten?

1.5 Browser und Geräte

1.6 Kurz zusammengefasst

2 Strategien für mobile Webseiten

2.1 Optimierungen der Desktop-Seite

2.2 Progressive Enhancement und Feature Detection

2.3 Responsive Webdesign

2.4 Separate mobile Webseiten

2.5 Mobile WebApps

2.6 Native Anwendungen

2.7 Die Mischung machts

2.8 Kurz zusammengefasst

3 Anordnung der Inhalte

3.1 Darstellung von Webseiten auf gängigen Geräten

3.2 Kopfbereich und Navigation

3.3 Organisation der Inhalte

3.4 Input vom Benutzer

3.5 Mobile Design Patterns

3.5.1 Karussell

3.5.2 Tabs

3.5.3 Listen

3.6 Kurz zusammengefasst

Teil II: Techniken

4 Das richtige Markup für mobile Webseiten

4.1 Semantisches Markup

4.2 HTML für mobile Geräte

4.3 XHTML Mobile Profile und XHTML Basic

4.3.1 XHTML Mobile Profile

4.3.2 XHTML Basic

4.4 HTML5

4.4.1 HTML5 – das Markup

4.4.2 HTML5 als HTML – Schreibweisen

4.4.3 Neue Elemente in HTML5

4.5 Bessere Formulare

4.5.1 Formulare, aber richtig

4.5.2 Richtige Tastatur dank neuer Input-Typen

4.5.3 Weitere neue Eingabefelder

4.5.4 Fazit und Empfehlung für HTML5-Formularelemente

4.6 Links auf Telefonnummern

4.7 Meta-Angaben für Smartphones und Co.

4.7.1 Viewport steuern

4.7.2 App-like: Icons und mehr

4.8 Conditional Comments

4.9 Solide HTML5-Basis dank Mobile Boilerplate

4.10 Kurz zusammengefasst

5 CSS für mobile Geräte

5.1 CSS und Progressive Enhancement

5.2 CSS für schwächere mobile Geräte

5.2.1 WCSS

5.2.2 CSS Mobile Profile 2.0

5.3 CSS-Pseudoklassen

5.4 position: fixed & Co.

5.5 Transparenzen

5.6 Webfonts

5.7 Abgerundete Ecken, Schatten und mehr

5.8 Farbverläufe

5.9 Transformationen

5.9.1 2D-Transformationen

5.9.2 3D-Transformationen

5.10 Transitions und Animations

5.10.1 Transitions

5.10.2 Animations

5.11 Media-Angabe und Media-Queries

5.12 Kurz zusammengefasst

6 Performance-Optimierung

6.1 Tools

6.2 Allgemeine Codeoptimierungen

6.2.1 Semantisches HTML

6.2.2 CSS-Code optimieren

6.2.3 Links kontrollieren

6.2.4 Inhalte asynchron laden

6.3 Reduzierung

6.4 HTTP-Komprimierung

6.5 HTTP-Requests reduzieren & optimieren

6.5.1 CSS-Dateien zusammenfassen und richtig einbinden

6.5.2 JavaScript-Dateien zusammenfassen

6.5.3 JavaScript und CSS richtig kombinieren

6.5.4 CDN nutzen

6.5.5 Cookies richtig nutzen

6.6 Cachen

6.7 Besonderheiten bei mobilen Geräten

6.8 Kurz zusammengefasst

7 Bilder und mehr

7.1 Allgemeine Bildoptimierung

7.2 Bilder im HTML-Code

7.3 Hintergrundbilder

7.4 Scharfe Bilder auf scharfen Displays

7.5 Skalierbare Bilder

7.5.1 Texte und Schrifticons

7.5.2 Bilder im SVG-Format

7.6 CSS-Sprites

7.6.1 Mehrfachverwertung von Bildern

7.7 CSS zur Bildreduktion

7.7.1 Malen über CSS

7.7.2 CSS3-Eigenschaften

7.8 Bilder einsparen über Symbole

7.9 Data-URLs

7.10 Kurz zusammengefasst

8 JavaScript für mobile Geräte

8.1 JavaScript, aber richtig!

8.1.1 Strenger ist besser

8.1.2 Code prüfen mit JSLint

8.1.3 Besser trennen

8.1.4 Feature-Tests

8.1.5 Performantes JavaScript

8.1.6 Spezialfall: Opera Mini und JavaScript

8.2 JavaScript-Bibliotheken

8.2.1 Size matters

8.2.2 Spezielle Bibliotheken für den mobilen Einsatz

8.3 Events für Touchscreens

8.3.1 Aus Berührungen werden Gesten

8.4 Kurz zusammengefasst

9 Neue APIs und wichtige Spezifikationen

9.1 Offline Web Applications – AppCache

9.1.1 Das Grundprinzip von AppCache

9.1.2 Offline-Dateien überprüfen

9.1.3 Änderungen an den Dateien durchführen

9.1.4 JavaScript-API für Offline-Cache

9.1.5 Browserunterstützung für AppCache

9.2 W3C-Widgets – gut verpackt ist halb gewonnen

9.3 WebStorage

9.3.1 WebStorage

9.3.2 localStorage – Strings, sonst nichts

9.3.3 localStorage und sessionStorage im Browser überprüfen

9.3.4 Unterstützung von localStorage testen

9.3.5 Browserunterstützung für WebStorage

9.3.6 localStorage – Kritik und Alternativen

9.4 Geolocation API

9.4.1 Erst fragen, dann .....

9.4.2 Geolocation API

9.4.3 Browserunterstützung für die W3C Geolocation API

9.5 Device Orientation API

9.6 Weitere APIs

9.6.1 Media Capture

9.6.2 Page Visibility API

9.6.3 WebWorkers

9.6.4 System Notification

9.6.5 Vibration API

9.6.6 Battery Status API

9.6.7 Network Information API

9.7 Kurz zusammengefasst

Teil III: Umsetzung

10 Responsive Webdesign

10.1 Das Grundprinzip des Responsive Webdesigns

10.1.1 Flüssige Layouts

10.1.2 Flüssige Bilder

10.1.3 Media Queries

10.2 Strategien für Media Queries

10.2.1 Die wichtigsten Eigenschaften für Media Queries

10.2.2 Scharfe Grafiken auf scharfen Displays

10.2.3 Breakpoints definieren

10.2.4 Mobile First oder Desktop First?

10.2.5 Anzahl der Breakpoints

10.3 Navigationen im Responsive Webdesign

10.3.1 Grundlegende Überlegungen zur Navigation

10.3.2 Anker-Navigation

10.3.3 Auswahlliste

10.3.4 Dynamisches Ein-/Ausblenden

10.3.5 Buttons oder Icons für die Navigation

10.4 Bilder im Responsive Webdesign – Klappe, die zweite

10.4.1 src.sencha.io

10.4.2 Adaptive Images

10.4.3 Responsive Images von der Filament Group

10.5 Tabellen im Responsive Webdesign

10.6 Weitere Herausforderungen beim Responsive Design

10.7 Fazit

10.8 Kurz zusammengefasst

11 jQuery Mobile

11.1 jQuery Mobile – die Features

11.2 Einstieg in jQuery Mobile

11.2.1 Einseiten-Template

11.2.2 Mehrseiten-Template

11.2.3 Dialoge

11.3 Ajax-Navigation

11.3.1 Effekte zum Wechseln zwischen den Seiten

11.4 Inhalte gestalten

11.4.1 Listen verbessern

11.4.2 Buttons definieren und positionieren

11.4.3 Navigationsleisten

11.4.4 Anordnung von Inhalten

11.4.5 Versteckspiele – Accordion und mehr

11.4.6 Formulare

11.5 Theming Framework

11.6 Events und jQuery Mobile – spezifische Methoden

11.6.1 pageinit und skriptgesteuerte Seitenänderung

11.6.2 mobileinit – Konfigurationen ändern

11.6.3 Weitere Events

11.6.4 Einstellungen

11.7 Touchereignisse

11.8 jQuery Mobile mit Google Maps kombinieren

11.9 Going Native

11.10 Kurz zusammengefasst

12 Sencha Touch

12.1 Vorbereitungen

12.2 Erste WebApp erstellen

12.3 WebApp für den produktiven Einsatz erstellen

12.4 Going Native

12.5 Kurz zusammengefasst

13 Separate mobile Webseiten

13.1 HTTP-User-Agent: Sag mir, wer du bist

13.2 Quick & ..... detectmobilebrowsers.com

13.3 Mehr als nur der User-Agent-String

13.4 php-mobile-detect

13.4.1 Grundprinzip von php-mobile-detect

13.4.2 Umleitung, Wechsellinks und Speicherung der Wahl

13.5 Mehr Infos dank WURFL

13.6 Nützliches für die Umsetzung

13.6.1 Geräteklassen

13.6.2 Unterschiede zwischen den Versionen

13.6.3 Vary-Header und Canonical

13.6.4 Link zum Wechseln

13.6.5 Beschriftung der Wechsellinks

13.7 Serverseitige und clientseitige Detection

13.8 Kurz zusammengefasst

14 Mobile Webseiten testen

14.1 Webserver installieren

14.1.1 XAMPP installieren

14.1.2 Dateien über den Server aufrufen

14.2 Desktop-Browser nutzen

14.2.1 Firefox: User Agent Switcher

14.2.2 User-Agent im Safari ändern

14.3 Mobile Browser

14.3.1 Opera Mobile

14.3.2 Opera Mini

14.3.3 Firefox Mobile

14.4 Emulatoren

14.4.1 Android SDK installieren

14.4.2 Windows Phone Emulator

14.4.3 Xcode für die iOS-Entwicklung

14.5 Echte Geräte

14.6 Lokale Webseiten auf Emulatoren und mobilen Geräten testen

14.7 Remote-Debugging mit Opera

14.8 Remote-Debugging mit dem Weinre-Server

14.9 Remote-Debugging mit Adobe Shadow

14.10 Kurz zusammengefasst

Index