Inhalt | 6 |
Vorwort | 14 |
Teil I: Basics | 18 |
1 Mobile Nutzer | 20 |
1.1 Wachstum und Bedeutung | 20 |
1.2 Besonderheiten von mobilen Geräten | 21 |
1.2.1 Größe des Bildschirms | 22 |
1.2.2 Datenübertragung | 22 |
1.2.3 Stromversorgung | 23 |
1.2.4 Zusätzliche Features | 23 |
1.3 Mobiler Kontext | 24 |
1.4 Einschränkungen oder neue Möglichkeiten? | 26 |
1.5 Browser und Geräte | 27 |
1.6 Kurz zusammengefasst | 32 |
2 Strategien für mobile Webseiten | 34 |
2.1 Optimierungen der Desktop-Seite | 34 |
2.2 Progressive Enhancement und Feature Detection | 35 |
2.3 Responsive Webdesign | 36 |
2.4 Separate mobile Webseiten | 38 |
2.5 Mobile WebApps | 42 |
2.6 Native Anwendungen | 44 |
2.7 Die Mischung machts | 45 |
2.8 Kurz zusammengefasst | 46 |
3 Anordnung der Inhalte | 48 |
3.1 Darstellung von Webseiten auf gängigen Geräten | 48 |
3.2 Kopfbereich und Navigation | 51 |
3.3 Organisation der Inhalte | 54 |
3.4 Input vom Benutzer | 55 |
3.5 Mobile Design Patterns | 56 |
3.5.1 Karussell | 56 |
3.5.2 Tabs | 57 |
3.5.3 Listen | 57 |
3.6 Kurz zusammengefasst | 58 |
Teil II: Techniken | 60 |
4 Das richtige Markup für mobile Webseiten | 62 |
4.1 Semantisches Markup | 62 |
4.2 HTML für mobile Geräte | 63 |
4.3 XHTML Mobile Profile und XHTML Basic | 64 |
4.3.1 XHTML Mobile Profile | 64 |
4.3.2 XHTML Basic | 67 |
4.4 HTML5 | 68 |
4.4.1 HTML5 – das Markup | 68 |
4.4.2 HTML5 als HTML – Schreibweisen | 70 |
4.4.3 Neue Elemente in HTML5 | 72 |
4.5 Bessere Formulare | 76 |
4.5.1 Formulare, aber richtig | 76 |
4.5.2 Richtige Tastatur dank neuer Input-Typen | 78 |
4.5.3 Weitere neue Eingabefelder | 81 |
4.5.4 Fazit und Empfehlung für HTML5-Formularelemente | 83 |
4.6 Links auf Telefonnummern | 84 |
4.7 Meta-Angaben für Smartphones und Co. | 85 |
4.7.1 Viewport steuern | 85 |
4.7.2 App-like: Icons und mehr | 92 |
4.8 Conditional Comments | 94 |
4.9 Solide HTML5-Basis dank Mobile Boilerplate | 95 |
4.10 Kurz zusammengefasst | 95 |
5 CSS für mobile Geräte | 96 |
5.1 CSS und Progressive Enhancement | 96 |
5.2 CSS für schwächere mobile Geräte | 101 |
5.2.1 WCSS | 101 |
5.2.2 CSS Mobile Profile 2.0 | 102 |
5.3 CSS-Pseudoklassen | 102 |
5.4 position: fixed & Co. | 103 |
5.5 Transparenzen | 104 |
5.6 Webfonts | 107 |
5.7 Abgerundete Ecken, Schatten und mehr | 109 |
5.8 Farbverläufe | 111 |
5.9 Transformationen | 116 |
5.9.1 2D-Transformationen | 116 |
5.9.2 3D-Transformationen | 121 |
5.10 Transitions und Animations | 125 |
5.10.1 Transitions | 125 |
5.10.2 Animations | 130 |
5.11 Media-Angabe und Media-Queries | 132 |
5.12 Kurz zusammengefasst | 132 |
6 Performance-Optimierung | 134 |
6.1 Tools | 135 |
6.2 Allgemeine Codeoptimierungen | 136 |
6.2.1 Semantisches HTML | 136 |
6.2.2 CSS-Code optimieren | 137 |
6.2.3 Links kontrollieren | 138 |
6.2.4 Inhalte asynchron laden | 138 |
6.3 Reduzierung | 138 |
6.4 HTTP-Komprimierung | 139 |
6.5 HTTP-Requests reduzieren & optimieren | 140 |
6.5.1 CSS-Dateien zusammenfassen und richtig einbinden | 141 |
6.5.2 JavaScript-Dateien zusammenfassen | 141 |
6.5.3 JavaScript und CSS richtig kombinieren | 141 |
6.5.4 CDN nutzen | 142 |
6.5.5 Cookies richtig nutzen | 142 |
6.6 Cachen | 143 |
6.7 Besonderheiten bei mobilen Geräten | 146 |
6.8 Kurz zusammengefasst | 148 |
7 Bilder und mehr | 150 |
7.1 Allgemeine Bildoptimierung | 150 |
7.2 Bilder im HTML-Code | 151 |
7.3 Hintergrundbilder | 153 |
7.4 Scharfe Bilder auf scharfen Displays | 154 |
7.5 Skalierbare Bilder | 156 |
7.5.1 Texte und Schrifticons | 156 |
7.5.2 Bilder im SVG-Format | 157 |
7.6 CSS-Sprites | 159 |
7.6.1 Mehrfachverwertung von Bildern | 163 |
7.7 CSS zur Bildreduktion | 164 |
7.7.1 Malen über CSS | 164 |
7.7.2 CSS3-Eigenschaften | 165 |
7.8 Bilder einsparen über Symbole | 166 |
7.9 Data-URLs | 167 |
7.10 Kurz zusammengefasst | 168 |
8 JavaScript für mobile Geräte | 170 |
8.1 JavaScript, aber richtig! | 170 |
8.1.1 Strenger ist besser | 170 |
8.1.2 Code prüfen mit JSLint | 171 |
8.1.3 Besser trennen | 172 |
8.1.4 Feature-Tests | 175 |
8.1.5 Performantes JavaScript | 177 |
8.1.6 Spezialfall: Opera Mini und JavaScript | 179 |
8.2 JavaScript-Bibliotheken | 180 |
8.2.1 Size matters | 180 |
8.2.2 Spezielle Bibliotheken für den mobilen Einsatz | 180 |
8.3 Events für Touchscreens | 182 |
8.3.1 Aus Berührungen werden Gesten | 187 |
8.4 Kurz zusammengefasst | 189 |
9 Neue APIs und wichtige Spezifikationen | 190 |
9.1 Offline Web Applications – AppCache | 190 |
9.1.1 Das Grundprinzip von AppCache | 191 |
9.1.2 Offline-Dateien überprüfen | 195 |
9.1.3 Änderungen an den Dateien durchführen | 198 |
9.1.4 JavaScript-API für Offline-Cache | 199 |
9.1.5 Browserunterstützung für AppCache | 201 |
9.2 W3C-Widgets – gut verpackt ist halb gewonnen | 202 |
9.3 WebStorage | 205 |
9.3.1 WebStorage | 208 |
9.3.2 localStorage – Strings, sonst nichts | 209 |
9.3.3 localStorage und sessionStorage im Browser überprüfen | 210 |
9.3.4 Unterstützung von localStorage testen | 212 |
9.3.5 Browserunterstützung für WebStorage | 213 |
9.3.6 localStorage – Kritik und Alternativen | 213 |
9.4 Geolocation API | 214 |
9.4.1 Erst fragen, dann ..... | 215 |
9.4.2 Geolocation API | 216 |
9.4.3 Browserunterstützung für die W3C Geolocation API | 220 |
9.5 Device Orientation API | 221 |
9.6 Weitere APIs | 226 |
9.6.1 Media Capture | 226 |
9.6.2 Page Visibility API | 226 |
9.6.3 WebWorkers | 226 |
9.6.4 System Notification | 227 |
9.6.5 Vibration API | 227 |
9.6.6 Battery Status API | 227 |
9.6.7 Network Information API | 227 |
9.7 Kurz zusammengefasst | 228 |
Teil III: Umsetzung | 230 |
10 Responsive Webdesign | 232 |
10.1 Das Grundprinzip des Responsive Webdesigns | 232 |
10.1.1 Flüssige Layouts | 233 |
10.1.2 Flüssige Bilder | 239 |
10.1.3 Media Queries | 243 |
10.2 Strategien für Media Queries | 249 |
10.2.1 Die wichtigsten Eigenschaften für Media Queries | 249 |
10.2.2 Scharfe Grafiken auf scharfen Displays | 250 |
10.2.3 Breakpoints definieren | 251 |
10.2.4 Mobile First oder Desktop First? | 255 |
10.2.5 Anzahl der Breakpoints | 260 |
10.3 Navigationen im Responsive Webdesign | 261 |
10.3.1 Grundlegende Überlegungen zur Navigation | 261 |
10.3.2 Anker-Navigation | 265 |
10.3.3 Auswahlliste | 268 |
10.3.4 Dynamisches Ein-/Ausblenden | 271 |
10.3.5 Buttons oder Icons für die Navigation | 278 |
10.4 Bilder im Responsive Webdesign – Klappe, die zweite | 279 |
10.4.1 src.sencha.io | 279 |
10.4.2 Adaptive Images | 282 |
10.4.3 Responsive Images von der Filament Group | 284 |
10.5 Tabellen im Responsive Webdesign | 285 |
10.6 Weitere Herausforderungen beim Responsive Design | 290 |
10.7 Fazit | 291 |
10.8 Kurz zusammengefasst | 292 |
11 jQuery Mobile | 294 |
11.1 jQuery Mobile – die Features | 294 |
11.2 Einstieg in jQuery Mobile | 295 |
11.2.1 Einseiten-Template | 295 |
11.2.2 Mehrseiten-Template | 298 |
11.2.3 Dialoge | 301 |
11.3 Ajax-Navigation | 302 |
11.3.1 Effekte zum Wechseln zwischen den Seiten | 304 |
11.4 Inhalte gestalten | 305 |
11.4.1 Listen verbessern | 305 |
11.4.2 Buttons definieren und positionieren | 307 |
11.4.3 Navigationsleisten | 311 |
11.4.4 Anordnung von Inhalten | 313 |
11.4.5 Versteckspiele – Accordion und mehr | 314 |
11.4.6 Formulare | 316 |
11.5 Theming Framework | 320 |
11.6 Events und jQuery Mobile – spezifische Methoden | 323 |
11.6.1 pageinit und skriptgesteuerte Seitenänderung | 323 |
11.6.2 mobileinit – Konfigurationen ändern | 324 |
11.6.3 Weitere Events | 325 |
11.6.4 Einstellungen | 326 |
11.7 Touchereignisse | 328 |
11.8 jQuery Mobile mit Google Maps kombinieren | 330 |
11.9 Going Native | 332 |
11.10 Kurz zusammengefasst | 333 |
12 Sencha Touch | 334 |
12.1 Vorbereitungen | 334 |
12.2 Erste WebApp erstellen | 336 |
12.3 WebApp für den produktiven Einsatz erstellen | 343 |
12.4 Going Native | 345 |
12.5 Kurz zusammengefasst | 346 |
13 Separate mobile Webseiten | 348 |
13.1 HTTP-User-Agent: Sag mir, wer du bist | 348 |
13.2 Quick & ..... detectmobilebrowsers.com | 351 |
13.3 Mehr als nur der User-Agent-String | 354 |
13.4 php-mobile-detect | 356 |
13.4.1 Grundprinzip von php-mobile-detect | 357 |
13.4.2 Umleitung, Wechsellinks und Speicherung der Wahl | 359 |
13.5 Mehr Infos dank WURFL | 362 |
13.6 Nützliches für die Umsetzung | 372 |
13.6.1 Geräteklassen | 372 |
13.6.2 Unterschiede zwischen den Versionen | 373 |
13.6.3 Vary-Header und Canonical | 374 |
13.6.4 Link zum Wechseln | 374 |
13.6.5 Beschriftung der Wechsellinks | 375 |
13.7 Serverseitige und clientseitige Detection | 377 |
13.8 Kurz zusammengefasst | 378 |
14 Mobile Webseiten testen | 380 |
14.1 Webserver installieren | 380 |
14.1.1 XAMPP installieren | 381 |
14.1.2 Dateien über den Server aufrufen | 383 |
14.2 Desktop-Browser nutzen | 384 |
14.2.1 Firefox: User Agent Switcher | 384 |
14.2.2 User-Agent im Safari ändern | 385 |
14.3 Mobile Browser | 386 |
14.3.1 Opera Mobile | 386 |
14.3.2 Opera Mini | 388 |
14.3.3 Firefox Mobile | 391 |
14.4 Emulatoren | 392 |
14.4.1 Android SDK installieren | 392 |
14.4.2 Windows Phone Emulator | 396 |
14.4.3 Xcode für die iOS-Entwicklung | 396 |
14.5 Echte Geräte | 397 |
14.6 Lokale Webseiten auf Emulatoren und mobilen Geräten testen | 399 |
14.7 Remote-Debugging mit Opera | 400 |
14.8 Remote-Debugging mit dem Weinre-Server | 404 |
14.9 Remote-Debugging mit Adobe Shadow | 405 |
14.10 Kurz zusammengefasst | 409 |
Index | 410 |