Mobile Webseiten
Strategien, Techniken, Dos und Don'ts für Webentwickler. Von Responsive Webdesign über jQuery Mobile bis zu separaten mobilen Seiten
1st Edition
Published on 4. October 2012
416 pages
978-3-446-43279-6 (ISBN)
Description
- Für Webentwickler und Programmierer mit guten Kenntnissen zu Webtechniken wie HTML, CSS, JavaScript, PHP- Leitfaden für die Konzeption Ihrer mobilen Webseite- Mit zahlreichen Beispielen, Tipps und Lösungen sowie Hinweisen auf Besonderheiten und Stolperfallen- Alle Listings aus dem Buch sowie Aktualisierungen unter: http://downloads.hanser.deFür die Konzeption einer mobilen Site gibt es eine ganze Reihe von Techniken und grundlegenden Strategien; sie reichen von kleinen allgemeinen Optimierungen über Responsive Webdesign und eine WebApp bis zur separaten Webseite. All das zeigt Ihnen dieser praktische Leitfaden. Er gliedert sich in drei Themenbereiche:Teil I Basics beschreibt die Besonderheiten mobiler Geräte, gibt Ihnen einen Überblick über die entsprechenden Browser, erklärt die verschiedenen Strategien für die Erstellung mobiler Sites inkl. ihrer Vor- und Nachteile und beschäftigt sich mit den grundlegenden Möglichkeiten, die Inhalte mobiler Sites passend anzuordnen.Teil II Techniken konzentriert sich auf das richtige Markup, auf CSS, Performance-Optimierung, JavaScript und JavaScript-APIs. Ein eigenes Kapitel behandelt Strategien für Bilder - von der Möglichkeit, Bilder einzusparen, bis hin zu Lösungen für hochauflösende Displays.Teil III Umsetzung zeigt Ihnen schließlich im Detail und ganz konkret: wie Sie per Responsive Webdesign Ihre Website für den mobilen Zugriff optimieren; wie Sie mit den JavaScript-Frameworks jQuery Mobile und Sencha Touch WebApps realisieren; und wie Sie separate mobile Webseiten erstellen. Abschließend geht es um Techniken und Tools für das Testen Ihrer mobilen Site.AUS DEM INHALT: HTML, CSS und JavaScript für mobile Webseiten // Wichtige HTML5-Features // Performance-Optimierungen // Progressive Enhancement und Feature Detection // Richtiger Einsatz von CSS3 für mobile Seiten // JavaScript-APIs: OfflineCache, WebStorage, Geolocation-API // Mobile First- & Desktop First-Ansatz // Profitricks: Navigationen, Bilder & Tabellen im Responsive Webdesign // jQuery Mobile: vom grundlegenden Seitenaufbau bis hin zur Konfiguration // Sencha Touch: WebApps im Handumdrehen // Separate Sites: User-Agent-Strings auslesen, WURFL nutzen // Testing: Browsererweiterungen, mobile Browser & Tools
More details
Other editions
Additional editions
Florence Maurice
Mobile Webseiten
Strategien, Techniken, Dos und Don'ts für Webentwickler. Von Responsive Webdesign über jQuery Mobile bis zu separaten mobilen Seiten
Book
10/2012
1st Edition
Hanser
€34.90
Article exhausted; check different version
Person
Dr. Florence Maurice arbeitet als Trainerin, Autorin und Projektleiterin. Ihr Schwerpunkt ist die Web-Programmierung, von den Basics wie HTML bis zu fortgeschrittenen CSS-Techniken und serverseitiger Programmierung per PHP. Besuchen Sie die Autorin auf www.maurice-web.de.
Content
1 - Inhalt [Seite 6]
2 - Vorwort [Seite 14]
3 - Teil I: Basics [Seite 18]
4 - 1 Mobile Nutzer [Seite 20]
4.1 - 1.1 Wachstum und Bedeutung [Seite 20]
4.2 - 1.2 Besonderheiten von mobilen Geräten [Seite 21]
4.2.1 - 1.2.1 Größe des Bildschirms [Seite 22]
4.2.2 - 1.2.2 Datenübertragung [Seite 22]
4.2.3 - 1.2.3 Stromversorgung [Seite 23]
4.2.4 - 1.2.4 Zusätzliche Features [Seite 23]
4.3 - 1.3 Mobiler Kontext [Seite 24]
4.4 - 1.4 Einschränkungen oder neue Möglichkeiten? [Seite 26]
4.5 - 1.5 Browser und Geräte [Seite 27]
4.6 - 1.6 Kurz zusammengefasst [Seite 32]
5 - 2 Strategien für mobile Webseiten [Seite 34]
5.1 - 2.1 Optimierungen der Desktop-Seite [Seite 34]
5.2 - 2.2 Progressive Enhancement und Feature Detection [Seite 35]
5.3 - 2.3 Responsive Webdesign [Seite 36]
5.4 - 2.4 Separate mobile Webseiten [Seite 38]
5.5 - 2.5 Mobile WebApps [Seite 42]
5.6 - 2.6 Native Anwendungen [Seite 44]
5.7 - 2.7 Die Mischung machts [Seite 45]
5.8 - 2.8 Kurz zusammengefasst [Seite 46]
6 - 3 Anordnung der Inhalte [Seite 48]
6.1 - 3.1 Darstellung von Webseiten auf gängigen Geräten [Seite 48]
6.2 - 3.2 Kopfbereich und Navigation [Seite 51]
6.3 - 3.3 Organisation der Inhalte [Seite 54]
6.4 - 3.4 Input vom Benutzer [Seite 55]
6.5 - 3.5 Mobile Design Patterns [Seite 56]
6.5.1 - 3.5.1 Karussell [Seite 56]
6.5.2 - 3.5.2 Tabs [Seite 57]
6.5.3 - 3.5.3 Listen [Seite 57]
6.6 - 3.6 Kurz zusammengefasst [Seite 58]
7 - Teil II: Techniken [Seite 60]
8 - 4 Das richtige Markup für mobile Webseiten [Seite 62]
8.1 - 4.1 Semantisches Markup [Seite 62]
8.2 - 4.2 HTML für mobile Geräte [Seite 63]
8.3 - 4.3 XHTML Mobile Profile und XHTML Basic [Seite 64]
8.3.1 - 4.3.1 XHTML Mobile Profile [Seite 64]
8.3.2 - 4.3.2 XHTML Basic [Seite 67]
8.4 - 4.4 HTML5 [Seite 68]
8.4.1 - 4.4.1 HTML5 - das Markup [Seite 68]
8.4.2 - 4.4.2 HTML5 als HTML - Schreibweisen [Seite 70]
8.4.3 - 4.4.3 Neue Elemente in HTML5 [Seite 72]
8.5 - 4.5 Bessere Formulare [Seite 76]
8.5.1 - 4.5.1 Formulare, aber richtig [Seite 76]
8.5.2 - 4.5.2 Richtige Tastatur dank neuer Input-Typen [Seite 78]
8.5.3 - 4.5.3 Weitere neue Eingabefelder [Seite 81]
8.5.4 - 4.5.4 Fazit und Empfehlung für HTML5-Formularelemente [Seite 83]
8.6 - 4.6 Links auf Telefonnummern [Seite 84]
8.7 - 4.7 Meta-Angaben für Smartphones und Co. [Seite 85]
8.7.1 - 4.7.1 Viewport steuern [Seite 85]
8.7.2 - 4.7.2 App-like: Icons und mehr [Seite 92]
8.8 - 4.8 Conditional Comments [Seite 94]
8.9 - 4.9 Solide HTML5-Basis dank Mobile Boilerplate [Seite 95]
8.10 - 4.10 Kurz zusammengefasst [Seite 95]
9 - 5 CSS für mobile Geräte [Seite 96]
9.1 - 5.1 CSS und Progressive Enhancement [Seite 96]
9.2 - 5.2 CSS für schwächere mobile Geräte [Seite 101]
9.2.1 - 5.2.1 WCSS [Seite 101]
9.2.2 - 5.2.2 CSS Mobile Profile 2.0 [Seite 102]
9.3 - 5.3 CSS-Pseudoklassen [Seite 102]
9.4 - 5.4 position: fixed & Co. [Seite 103]
9.5 - 5.5 Transparenzen [Seite 104]
9.6 - 5.6 Webfonts [Seite 107]
9.7 - 5.7 Abgerundete Ecken, Schatten und mehr [Seite 109]
9.8 - 5.8 Farbverläufe [Seite 111]
9.9 - 5.9 Transformationen [Seite 116]
9.9.1 - 5.9.1 2D-Transformationen [Seite 116]
9.9.2 - 5.9.2 3D-Transformationen [Seite 121]
9.10 - 5.10 Transitions und Animations [Seite 125]
9.10.1 - 5.10.1 Transitions [Seite 125]
9.10.2 - 5.10.2 Animations [Seite 130]
9.11 - 5.11 Media-Angabe und Media-Queries [Seite 132]
9.12 - 5.12 Kurz zusammengefasst [Seite 132]
10 - 6 Performance-Optimierung [Seite 134]
10.1 - 6.1 Tools [Seite 135]
10.2 - 6.2 Allgemeine Codeoptimierungen [Seite 136]
10.2.1 - 6.2.1 Semantisches HTML [Seite 136]
10.2.2 - 6.2.2 CSS-Code optimieren [Seite 137]
10.2.3 - 6.2.3 Links kontrollieren [Seite 138]
10.2.4 - 6.2.4 Inhalte asynchron laden [Seite 138]
10.3 - 6.3 Reduzierung [Seite 138]
10.4 - 6.4 HTTP-Komprimierung [Seite 139]
10.5 - 6.5 HTTP-Requests reduzieren & optimieren [Seite 140]
10.5.1 - 6.5.1 CSS-Dateien zusammenfassen und richtig einbinden [Seite 141]
10.5.2 - 6.5.2 JavaScript-Dateien zusammenfassen [Seite 141]
10.5.3 - 6.5.3 JavaScript und CSS richtig kombinieren [Seite 141]
10.5.4 - 6.5.4 CDN nutzen [Seite 142]
10.5.5 - 6.5.5 Cookies richtig nutzen [Seite 142]
10.6 - 6.6 Cachen [Seite 143]
10.7 - 6.7 Besonderheiten bei mobilen Geräten [Seite 146]
10.8 - 6.8 Kurz zusammengefasst [Seite 148]
11 - 7 Bilder und mehr [Seite 150]
11.1 - 7.1 Allgemeine Bildoptimierung [Seite 150]
11.2 - 7.2 Bilder im HTML-Code [Seite 151]
11.3 - 7.3 Hintergrundbilder [Seite 153]
11.4 - 7.4 Scharfe Bilder auf scharfen Displays [Seite 154]
11.5 - 7.5 Skalierbare Bilder [Seite 156]
11.5.1 - 7.5.1 Texte und Schrifticons [Seite 156]
11.5.2 - 7.5.2 Bilder im SVG-Format [Seite 157]
11.6 - 7.6 CSS-Sprites [Seite 159]
11.6.1 - 7.6.1 Mehrfachverwertung von Bildern [Seite 163]
11.7 - 7.7 CSS zur Bildreduktion [Seite 164]
11.7.1 - 7.7.1 Malen über CSS [Seite 164]
11.7.2 - 7.7.2 CSS3-Eigenschaften [Seite 165]
11.8 - 7.8 Bilder einsparen über Symbole [Seite 166]
11.9 - 7.9 Data-URLs [Seite 167]
11.10 - 7.10 Kurz zusammengefasst [Seite 168]
12 - 8 JavaScript für mobile Geräte [Seite 170]
12.1 - 8.1 JavaScript, aber richtig! [Seite 170]
12.1.1 - 8.1.1 Strenger ist besser [Seite 170]
12.1.2 - 8.1.2 Code prüfen mit JSLint [Seite 171]
12.1.3 - 8.1.3 Besser trennen [Seite 172]
12.1.4 - 8.1.4 Feature-Tests [Seite 175]
12.1.5 - 8.1.5 Performantes JavaScript [Seite 177]
12.1.6 - 8.1.6 Spezialfall: Opera Mini und JavaScript [Seite 179]
12.2 - 8.2 JavaScript-Bibliotheken [Seite 180]
12.2.1 - 8.2.1 Size matters [Seite 180]
12.2.2 - 8.2.2 Spezielle Bibliotheken für den mobilen Einsatz [Seite 180]
12.3 - 8.3 Events für Touchscreens [Seite 182]
12.3.1 - 8.3.1 Aus Berührungen werden Gesten [Seite 187]
12.4 - 8.4 Kurz zusammengefasst [Seite 189]
13 - 9 Neue APIs und wichtige Spezifikationen [Seite 190]
13.1 - 9.1 Offline Web Applications - AppCache [Seite 190]
13.1.1 - 9.1.1 Das Grundprinzip von AppCache [Seite 191]
13.1.2 - 9.1.2 Offline-Dateien überprüfen [Seite 195]
13.1.3 - 9.1.3 Änderungen an den Dateien durchführen [Seite 198]
13.1.4 - 9.1.4 JavaScript-API für Offline-Cache [Seite 199]
13.1.5 - 9.1.5 Browserunterstützung für AppCache [Seite 201]
13.2 - 9.2 W3C-Widgets - gut verpackt ist halb gewonnen [Seite 202]
13.3 - 9.3 WebStorage [Seite 205]
13.3.1 - 9.3.1 WebStorage [Seite 208]
13.3.2 - 9.3.2 localStorage - Strings, sonst nichts [Seite 209]
13.3.3 - 9.3.3 localStorage und sessionStorage im Browser überprüfen [Seite 210]
13.3.4 - 9.3.4 Unterstützung von localStorage testen [Seite 212]
13.3.5 - 9.3.5 Browserunterstützung für WebStorage [Seite 213]
13.3.6 - 9.3.6 localStorage - Kritik und Alternativen [Seite 213]
13.4 - 9.4 Geolocation API [Seite 214]
13.4.1 - 9.4.1 Erst fragen, dann ..... [Seite 215]
13.4.2 - 9.4.2 Geolocation API [Seite 216]
13.4.3 - 9.4.3 Browserunterstützung für die W3C Geolocation API [Seite 220]
13.5 - 9.5 Device Orientation API [Seite 221]
13.6 - 9.6 Weitere APIs [Seite 226]
13.6.1 - 9.6.1 Media Capture [Seite 226]
13.6.2 - 9.6.2 Page Visibility API [Seite 226]
13.6.3 - 9.6.3 WebWorkers [Seite 226]
13.6.4 - 9.6.4 System Notification [Seite 227]
13.6.5 - 9.6.5 Vibration API [Seite 227]
13.6.6 - 9.6.6 Battery Status API [Seite 227]
13.6.7 - 9.6.7 Network Information API [Seite 227]
13.7 - 9.7 Kurz zusammengefasst [Seite 228]
14 - Teil III: Umsetzung [Seite 230]
15 - 10 Responsive Webdesign [Seite 232]
15.1 - 10.1 Das Grundprinzip des Responsive Webdesigns [Seite 232]
15.1.1 - 10.1.1 Flüssige Layouts [Seite 233]
15.1.2 - 10.1.2 Flüssige Bilder [Seite 239]
15.1.3 - 10.1.3 Media Queries [Seite 243]
15.2 - 10.2 Strategien für Media Queries [Seite 249]
15.2.1 - 10.2.1 Die wichtigsten Eigenschaften für Media Queries [Seite 249]
15.2.2 - 10.2.2 Scharfe Grafiken auf scharfen Displays [Seite 250]
15.2.3 - 10.2.3 Breakpoints definieren [Seite 251]
15.2.4 - 10.2.4 Mobile First oder Desktop First? [Seite 255]
15.2.5 - 10.2.5 Anzahl der Breakpoints [Seite 260]
15.3 - 10.3 Navigationen im Responsive Webdesign [Seite 261]
15.3.1 - 10.3.1 Grundlegende Überlegungen zur Navigation [Seite 261]
15.3.2 - 10.3.2 Anker-Navigation [Seite 265]
15.3.3 - 10.3.3 Auswahlliste [Seite 268]
15.3.4 - 10.3.4 Dynamisches Ein-/Ausblenden [Seite 271]
15.3.5 - 10.3.5 Buttons oder Icons für die Navigation [Seite 278]
15.4 - 10.4 Bilder im Responsive Webdesign - Klappe, die zweite [Seite 279]
15.4.1 - 10.4.1 src.sencha.io [Seite 279]
15.4.2 - 10.4.2 Adaptive Images [Seite 282]
15.4.3 - 10.4.3 Responsive Images von der Filament Group [Seite 284]
15.5 - 10.5 Tabellen im Responsive Webdesign [Seite 285]
15.6 - 10.6 Weitere Herausforderungen beim Responsive Design [Seite 290]
15.7 - 10.7 Fazit [Seite 291]
15.8 - 10.8 Kurz zusammengefasst [Seite 292]
16 - 11 jQuery Mobile [Seite 294]
16.1 - 11.1 jQuery Mobile - die Features [Seite 294]
16.2 - 11.2 Einstieg in jQuery Mobile [Seite 295]
16.2.1 - 11.2.1 Einseiten-Template [Seite 295]
16.2.2 - 11.2.2 Mehrseiten-Template [Seite 298]
16.2.3 - 11.2.3 Dialoge [Seite 301]
16.3 - 11.3 Ajax-Navigation [Seite 302]
16.3.1 - 11.3.1 Effekte zum Wechseln zwischen den Seiten [Seite 304]
16.4 - 11.4 Inhalte gestalten [Seite 305]
16.4.1 - 11.4.1 Listen verbessern [Seite 305]
16.4.2 - 11.4.2 Buttons definieren und positionieren [Seite 307]
16.4.3 - 11.4.3 Navigationsleisten [Seite 311]
16.4.4 - 11.4.4 Anordnung von Inhalten [Seite 313]
16.4.5 - 11.4.5 Versteckspiele - Accordion und mehr [Seite 314]
16.4.6 - 11.4.6 Formulare [Seite 316]
16.5 - 11.5 Theming Framework [Seite 320]
16.6 - 11.6 Events und jQuery Mobile - spezifische Methoden [Seite 323]
16.6.1 - 11.6.1 pageinit und skriptgesteuerte Seitenänderung [Seite 323]
16.6.2 - 11.6.2 mobileinit - Konfigurationen ändern [Seite 324]
16.6.3 - 11.6.3 Weitere Events [Seite 325]
16.6.4 - 11.6.4 Einstellungen [Seite 326]
16.7 - 11.7 Touchereignisse [Seite 328]
16.8 - 11.8 jQuery Mobile mit Google Maps kombinieren [Seite 330]
16.9 - 11.9 Going Native [Seite 332]
16.10 - 11.10 Kurz zusammengefasst [Seite 333]
17 - 12 Sencha Touch [Seite 334]
17.1 - 12.1 Vorbereitungen [Seite 334]
17.2 - 12.2 Erste WebApp erstellen [Seite 336]
17.3 - 12.3 WebApp für den produktiven Einsatz erstellen [Seite 343]
17.4 - 12.4 Going Native [Seite 345]
17.5 - 12.5 Kurz zusammengefasst [Seite 346]
18 - 13 Separate mobile Webseiten [Seite 348]
18.1 - 13.1 HTTP-User-Agent: Sag mir, wer du bist [Seite 348]
18.2 - 13.2 Quick & ..... detectmobilebrowsers.com [Seite 351]
18.3 - 13.3 Mehr als nur der User-Agent-String [Seite 354]
18.4 - 13.4 php-mobile-detect [Seite 356]
18.4.1 - 13.4.1 Grundprinzip von php-mobile-detect [Seite 357]
18.4.2 - 13.4.2 Umleitung, Wechsellinks und Speicherung der Wahl [Seite 359]
18.5 - 13.5 Mehr Infos dank WURFL [Seite 362]
18.6 - 13.6 Nützliches für die Umsetzung [Seite 372]
18.6.1 - 13.6.1 Geräteklassen [Seite 372]
18.6.2 - 13.6.2 Unterschiede zwischen den Versionen [Seite 373]
18.6.3 - 13.6.3 Vary-Header und Canonical [Seite 374]
18.6.4 - 13.6.4 Link zum Wechseln [Seite 374]
18.6.5 - 13.6.5 Beschriftung der Wechsellinks [Seite 375]
18.7 - 13.7 Serverseitige und clientseitige Detection [Seite 377]
18.8 - 13.8 Kurz zusammengefasst [Seite 378]
19 - 14 Mobile Webseiten testen [Seite 380]
19.1 - 14.1 Webserver installieren [Seite 380]
19.1.1 - 14.1.1 XAMPP installieren [Seite 381]
19.1.2 - 14.1.2 Dateien über den Server aufrufen [Seite 383]
19.2 - 14.2 Desktop-Browser nutzen [Seite 384]
19.2.1 - 14.2.1 Firefox: User Agent Switcher [Seite 384]
19.2.2 - 14.2.2 User-Agent im Safari ändern [Seite 385]
19.3 - 14.3 Mobile Browser [Seite 386]
19.3.1 - 14.3.1 Opera Mobile [Seite 386]
19.3.2 - 14.3.2 Opera Mini [Seite 388]
19.3.3 - 14.3.3 Firefox Mobile [Seite 391]
19.4 - 14.4 Emulatoren [Seite 392]
19.4.1 - 14.4.1 Android SDK installieren [Seite 392]
19.4.2 - 14.4.2 Windows Phone Emulator [Seite 396]
19.4.3 - 14.4.3 Xcode für die iOS-Entwicklung [Seite 396]
19.5 - 14.5 Echte Geräte [Seite 397]
19.6 - 14.6 Lokale Webseiten auf Emulatoren und mobilen Geräten testen [Seite 399]
19.7 - 14.7 Remote-Debugging mit Opera [Seite 400]
19.8 - 14.8 Remote-Debugging mit dem Weinre-Server [Seite 404]
19.9 - 14.9 Remote-Debugging mit Adobe Shadow [Seite 405]
19.10 - 14.10 Kurz zusammengefasst [Seite 409]
20 - Index [Seite 410]
2 - Vorwort [Seite 14]
3 - Teil I: Basics [Seite 18]
4 - 1 Mobile Nutzer [Seite 20]
4.1 - 1.1 Wachstum und Bedeutung [Seite 20]
4.2 - 1.2 Besonderheiten von mobilen Geräten [Seite 21]
4.2.1 - 1.2.1 Größe des Bildschirms [Seite 22]
4.2.2 - 1.2.2 Datenübertragung [Seite 22]
4.2.3 - 1.2.3 Stromversorgung [Seite 23]
4.2.4 - 1.2.4 Zusätzliche Features [Seite 23]
4.3 - 1.3 Mobiler Kontext [Seite 24]
4.4 - 1.4 Einschränkungen oder neue Möglichkeiten? [Seite 26]
4.5 - 1.5 Browser und Geräte [Seite 27]
4.6 - 1.6 Kurz zusammengefasst [Seite 32]
5 - 2 Strategien für mobile Webseiten [Seite 34]
5.1 - 2.1 Optimierungen der Desktop-Seite [Seite 34]
5.2 - 2.2 Progressive Enhancement und Feature Detection [Seite 35]
5.3 - 2.3 Responsive Webdesign [Seite 36]
5.4 - 2.4 Separate mobile Webseiten [Seite 38]
5.5 - 2.5 Mobile WebApps [Seite 42]
5.6 - 2.6 Native Anwendungen [Seite 44]
5.7 - 2.7 Die Mischung machts [Seite 45]
5.8 - 2.8 Kurz zusammengefasst [Seite 46]
6 - 3 Anordnung der Inhalte [Seite 48]
6.1 - 3.1 Darstellung von Webseiten auf gängigen Geräten [Seite 48]
6.2 - 3.2 Kopfbereich und Navigation [Seite 51]
6.3 - 3.3 Organisation der Inhalte [Seite 54]
6.4 - 3.4 Input vom Benutzer [Seite 55]
6.5 - 3.5 Mobile Design Patterns [Seite 56]
6.5.1 - 3.5.1 Karussell [Seite 56]
6.5.2 - 3.5.2 Tabs [Seite 57]
6.5.3 - 3.5.3 Listen [Seite 57]
6.6 - 3.6 Kurz zusammengefasst [Seite 58]
7 - Teil II: Techniken [Seite 60]
8 - 4 Das richtige Markup für mobile Webseiten [Seite 62]
8.1 - 4.1 Semantisches Markup [Seite 62]
8.2 - 4.2 HTML für mobile Geräte [Seite 63]
8.3 - 4.3 XHTML Mobile Profile und XHTML Basic [Seite 64]
8.3.1 - 4.3.1 XHTML Mobile Profile [Seite 64]
8.3.2 - 4.3.2 XHTML Basic [Seite 67]
8.4 - 4.4 HTML5 [Seite 68]
8.4.1 - 4.4.1 HTML5 - das Markup [Seite 68]
8.4.2 - 4.4.2 HTML5 als HTML - Schreibweisen [Seite 70]
8.4.3 - 4.4.3 Neue Elemente in HTML5 [Seite 72]
8.5 - 4.5 Bessere Formulare [Seite 76]
8.5.1 - 4.5.1 Formulare, aber richtig [Seite 76]
8.5.2 - 4.5.2 Richtige Tastatur dank neuer Input-Typen [Seite 78]
8.5.3 - 4.5.3 Weitere neue Eingabefelder [Seite 81]
8.5.4 - 4.5.4 Fazit und Empfehlung für HTML5-Formularelemente [Seite 83]
8.6 - 4.6 Links auf Telefonnummern [Seite 84]
8.7 - 4.7 Meta-Angaben für Smartphones und Co. [Seite 85]
8.7.1 - 4.7.1 Viewport steuern [Seite 85]
8.7.2 - 4.7.2 App-like: Icons und mehr [Seite 92]
8.8 - 4.8 Conditional Comments [Seite 94]
8.9 - 4.9 Solide HTML5-Basis dank Mobile Boilerplate [Seite 95]
8.10 - 4.10 Kurz zusammengefasst [Seite 95]
9 - 5 CSS für mobile Geräte [Seite 96]
9.1 - 5.1 CSS und Progressive Enhancement [Seite 96]
9.2 - 5.2 CSS für schwächere mobile Geräte [Seite 101]
9.2.1 - 5.2.1 WCSS [Seite 101]
9.2.2 - 5.2.2 CSS Mobile Profile 2.0 [Seite 102]
9.3 - 5.3 CSS-Pseudoklassen [Seite 102]
9.4 - 5.4 position: fixed & Co. [Seite 103]
9.5 - 5.5 Transparenzen [Seite 104]
9.6 - 5.6 Webfonts [Seite 107]
9.7 - 5.7 Abgerundete Ecken, Schatten und mehr [Seite 109]
9.8 - 5.8 Farbverläufe [Seite 111]
9.9 - 5.9 Transformationen [Seite 116]
9.9.1 - 5.9.1 2D-Transformationen [Seite 116]
9.9.2 - 5.9.2 3D-Transformationen [Seite 121]
9.10 - 5.10 Transitions und Animations [Seite 125]
9.10.1 - 5.10.1 Transitions [Seite 125]
9.10.2 - 5.10.2 Animations [Seite 130]
9.11 - 5.11 Media-Angabe und Media-Queries [Seite 132]
9.12 - 5.12 Kurz zusammengefasst [Seite 132]
10 - 6 Performance-Optimierung [Seite 134]
10.1 - 6.1 Tools [Seite 135]
10.2 - 6.2 Allgemeine Codeoptimierungen [Seite 136]
10.2.1 - 6.2.1 Semantisches HTML [Seite 136]
10.2.2 - 6.2.2 CSS-Code optimieren [Seite 137]
10.2.3 - 6.2.3 Links kontrollieren [Seite 138]
10.2.4 - 6.2.4 Inhalte asynchron laden [Seite 138]
10.3 - 6.3 Reduzierung [Seite 138]
10.4 - 6.4 HTTP-Komprimierung [Seite 139]
10.5 - 6.5 HTTP-Requests reduzieren & optimieren [Seite 140]
10.5.1 - 6.5.1 CSS-Dateien zusammenfassen und richtig einbinden [Seite 141]
10.5.2 - 6.5.2 JavaScript-Dateien zusammenfassen [Seite 141]
10.5.3 - 6.5.3 JavaScript und CSS richtig kombinieren [Seite 141]
10.5.4 - 6.5.4 CDN nutzen [Seite 142]
10.5.5 - 6.5.5 Cookies richtig nutzen [Seite 142]
10.6 - 6.6 Cachen [Seite 143]
10.7 - 6.7 Besonderheiten bei mobilen Geräten [Seite 146]
10.8 - 6.8 Kurz zusammengefasst [Seite 148]
11 - 7 Bilder und mehr [Seite 150]
11.1 - 7.1 Allgemeine Bildoptimierung [Seite 150]
11.2 - 7.2 Bilder im HTML-Code [Seite 151]
11.3 - 7.3 Hintergrundbilder [Seite 153]
11.4 - 7.4 Scharfe Bilder auf scharfen Displays [Seite 154]
11.5 - 7.5 Skalierbare Bilder [Seite 156]
11.5.1 - 7.5.1 Texte und Schrifticons [Seite 156]
11.5.2 - 7.5.2 Bilder im SVG-Format [Seite 157]
11.6 - 7.6 CSS-Sprites [Seite 159]
11.6.1 - 7.6.1 Mehrfachverwertung von Bildern [Seite 163]
11.7 - 7.7 CSS zur Bildreduktion [Seite 164]
11.7.1 - 7.7.1 Malen über CSS [Seite 164]
11.7.2 - 7.7.2 CSS3-Eigenschaften [Seite 165]
11.8 - 7.8 Bilder einsparen über Symbole [Seite 166]
11.9 - 7.9 Data-URLs [Seite 167]
11.10 - 7.10 Kurz zusammengefasst [Seite 168]
12 - 8 JavaScript für mobile Geräte [Seite 170]
12.1 - 8.1 JavaScript, aber richtig! [Seite 170]
12.1.1 - 8.1.1 Strenger ist besser [Seite 170]
12.1.2 - 8.1.2 Code prüfen mit JSLint [Seite 171]
12.1.3 - 8.1.3 Besser trennen [Seite 172]
12.1.4 - 8.1.4 Feature-Tests [Seite 175]
12.1.5 - 8.1.5 Performantes JavaScript [Seite 177]
12.1.6 - 8.1.6 Spezialfall: Opera Mini und JavaScript [Seite 179]
12.2 - 8.2 JavaScript-Bibliotheken [Seite 180]
12.2.1 - 8.2.1 Size matters [Seite 180]
12.2.2 - 8.2.2 Spezielle Bibliotheken für den mobilen Einsatz [Seite 180]
12.3 - 8.3 Events für Touchscreens [Seite 182]
12.3.1 - 8.3.1 Aus Berührungen werden Gesten [Seite 187]
12.4 - 8.4 Kurz zusammengefasst [Seite 189]
13 - 9 Neue APIs und wichtige Spezifikationen [Seite 190]
13.1 - 9.1 Offline Web Applications - AppCache [Seite 190]
13.1.1 - 9.1.1 Das Grundprinzip von AppCache [Seite 191]
13.1.2 - 9.1.2 Offline-Dateien überprüfen [Seite 195]
13.1.3 - 9.1.3 Änderungen an den Dateien durchführen [Seite 198]
13.1.4 - 9.1.4 JavaScript-API für Offline-Cache [Seite 199]
13.1.5 - 9.1.5 Browserunterstützung für AppCache [Seite 201]
13.2 - 9.2 W3C-Widgets - gut verpackt ist halb gewonnen [Seite 202]
13.3 - 9.3 WebStorage [Seite 205]
13.3.1 - 9.3.1 WebStorage [Seite 208]
13.3.2 - 9.3.2 localStorage - Strings, sonst nichts [Seite 209]
13.3.3 - 9.3.3 localStorage und sessionStorage im Browser überprüfen [Seite 210]
13.3.4 - 9.3.4 Unterstützung von localStorage testen [Seite 212]
13.3.5 - 9.3.5 Browserunterstützung für WebStorage [Seite 213]
13.3.6 - 9.3.6 localStorage - Kritik und Alternativen [Seite 213]
13.4 - 9.4 Geolocation API [Seite 214]
13.4.1 - 9.4.1 Erst fragen, dann ..... [Seite 215]
13.4.2 - 9.4.2 Geolocation API [Seite 216]
13.4.3 - 9.4.3 Browserunterstützung für die W3C Geolocation API [Seite 220]
13.5 - 9.5 Device Orientation API [Seite 221]
13.6 - 9.6 Weitere APIs [Seite 226]
13.6.1 - 9.6.1 Media Capture [Seite 226]
13.6.2 - 9.6.2 Page Visibility API [Seite 226]
13.6.3 - 9.6.3 WebWorkers [Seite 226]
13.6.4 - 9.6.4 System Notification [Seite 227]
13.6.5 - 9.6.5 Vibration API [Seite 227]
13.6.6 - 9.6.6 Battery Status API [Seite 227]
13.6.7 - 9.6.7 Network Information API [Seite 227]
13.7 - 9.7 Kurz zusammengefasst [Seite 228]
14 - Teil III: Umsetzung [Seite 230]
15 - 10 Responsive Webdesign [Seite 232]
15.1 - 10.1 Das Grundprinzip des Responsive Webdesigns [Seite 232]
15.1.1 - 10.1.1 Flüssige Layouts [Seite 233]
15.1.2 - 10.1.2 Flüssige Bilder [Seite 239]
15.1.3 - 10.1.3 Media Queries [Seite 243]
15.2 - 10.2 Strategien für Media Queries [Seite 249]
15.2.1 - 10.2.1 Die wichtigsten Eigenschaften für Media Queries [Seite 249]
15.2.2 - 10.2.2 Scharfe Grafiken auf scharfen Displays [Seite 250]
15.2.3 - 10.2.3 Breakpoints definieren [Seite 251]
15.2.4 - 10.2.4 Mobile First oder Desktop First? [Seite 255]
15.2.5 - 10.2.5 Anzahl der Breakpoints [Seite 260]
15.3 - 10.3 Navigationen im Responsive Webdesign [Seite 261]
15.3.1 - 10.3.1 Grundlegende Überlegungen zur Navigation [Seite 261]
15.3.2 - 10.3.2 Anker-Navigation [Seite 265]
15.3.3 - 10.3.3 Auswahlliste [Seite 268]
15.3.4 - 10.3.4 Dynamisches Ein-/Ausblenden [Seite 271]
15.3.5 - 10.3.5 Buttons oder Icons für die Navigation [Seite 278]
15.4 - 10.4 Bilder im Responsive Webdesign - Klappe, die zweite [Seite 279]
15.4.1 - 10.4.1 src.sencha.io [Seite 279]
15.4.2 - 10.4.2 Adaptive Images [Seite 282]
15.4.3 - 10.4.3 Responsive Images von der Filament Group [Seite 284]
15.5 - 10.5 Tabellen im Responsive Webdesign [Seite 285]
15.6 - 10.6 Weitere Herausforderungen beim Responsive Design [Seite 290]
15.7 - 10.7 Fazit [Seite 291]
15.8 - 10.8 Kurz zusammengefasst [Seite 292]
16 - 11 jQuery Mobile [Seite 294]
16.1 - 11.1 jQuery Mobile - die Features [Seite 294]
16.2 - 11.2 Einstieg in jQuery Mobile [Seite 295]
16.2.1 - 11.2.1 Einseiten-Template [Seite 295]
16.2.2 - 11.2.2 Mehrseiten-Template [Seite 298]
16.2.3 - 11.2.3 Dialoge [Seite 301]
16.3 - 11.3 Ajax-Navigation [Seite 302]
16.3.1 - 11.3.1 Effekte zum Wechseln zwischen den Seiten [Seite 304]
16.4 - 11.4 Inhalte gestalten [Seite 305]
16.4.1 - 11.4.1 Listen verbessern [Seite 305]
16.4.2 - 11.4.2 Buttons definieren und positionieren [Seite 307]
16.4.3 - 11.4.3 Navigationsleisten [Seite 311]
16.4.4 - 11.4.4 Anordnung von Inhalten [Seite 313]
16.4.5 - 11.4.5 Versteckspiele - Accordion und mehr [Seite 314]
16.4.6 - 11.4.6 Formulare [Seite 316]
16.5 - 11.5 Theming Framework [Seite 320]
16.6 - 11.6 Events und jQuery Mobile - spezifische Methoden [Seite 323]
16.6.1 - 11.6.1 pageinit und skriptgesteuerte Seitenänderung [Seite 323]
16.6.2 - 11.6.2 mobileinit - Konfigurationen ändern [Seite 324]
16.6.3 - 11.6.3 Weitere Events [Seite 325]
16.6.4 - 11.6.4 Einstellungen [Seite 326]
16.7 - 11.7 Touchereignisse [Seite 328]
16.8 - 11.8 jQuery Mobile mit Google Maps kombinieren [Seite 330]
16.9 - 11.9 Going Native [Seite 332]
16.10 - 11.10 Kurz zusammengefasst [Seite 333]
17 - 12 Sencha Touch [Seite 334]
17.1 - 12.1 Vorbereitungen [Seite 334]
17.2 - 12.2 Erste WebApp erstellen [Seite 336]
17.3 - 12.3 WebApp für den produktiven Einsatz erstellen [Seite 343]
17.4 - 12.4 Going Native [Seite 345]
17.5 - 12.5 Kurz zusammengefasst [Seite 346]
18 - 13 Separate mobile Webseiten [Seite 348]
18.1 - 13.1 HTTP-User-Agent: Sag mir, wer du bist [Seite 348]
18.2 - 13.2 Quick & ..... detectmobilebrowsers.com [Seite 351]
18.3 - 13.3 Mehr als nur der User-Agent-String [Seite 354]
18.4 - 13.4 php-mobile-detect [Seite 356]
18.4.1 - 13.4.1 Grundprinzip von php-mobile-detect [Seite 357]
18.4.2 - 13.4.2 Umleitung, Wechsellinks und Speicherung der Wahl [Seite 359]
18.5 - 13.5 Mehr Infos dank WURFL [Seite 362]
18.6 - 13.6 Nützliches für die Umsetzung [Seite 372]
18.6.1 - 13.6.1 Geräteklassen [Seite 372]
18.6.2 - 13.6.2 Unterschiede zwischen den Versionen [Seite 373]
18.6.3 - 13.6.3 Vary-Header und Canonical [Seite 374]
18.6.4 - 13.6.4 Link zum Wechseln [Seite 374]
18.6.5 - 13.6.5 Beschriftung der Wechsellinks [Seite 375]
18.7 - 13.7 Serverseitige und clientseitige Detection [Seite 377]
18.8 - 13.8 Kurz zusammengefasst [Seite 378]
19 - 14 Mobile Webseiten testen [Seite 380]
19.1 - 14.1 Webserver installieren [Seite 380]
19.1.1 - 14.1.1 XAMPP installieren [Seite 381]
19.1.2 - 14.1.2 Dateien über den Server aufrufen [Seite 383]
19.2 - 14.2 Desktop-Browser nutzen [Seite 384]
19.2.1 - 14.2.1 Firefox: User Agent Switcher [Seite 384]
19.2.2 - 14.2.2 User-Agent im Safari ändern [Seite 385]
19.3 - 14.3 Mobile Browser [Seite 386]
19.3.1 - 14.3.1 Opera Mobile [Seite 386]
19.3.2 - 14.3.2 Opera Mini [Seite 388]
19.3.3 - 14.3.3 Firefox Mobile [Seite 391]
19.4 - 14.4 Emulatoren [Seite 392]
19.4.1 - 14.4.1 Android SDK installieren [Seite 392]
19.4.2 - 14.4.2 Windows Phone Emulator [Seite 396]
19.4.3 - 14.4.3 Xcode für die iOS-Entwicklung [Seite 396]
19.5 - 14.5 Echte Geräte [Seite 397]
19.6 - 14.6 Lokale Webseiten auf Emulatoren und mobilen Geräten testen [Seite 399]
19.7 - 14.7 Remote-Debugging mit Opera [Seite 400]
19.8 - 14.8 Remote-Debugging mit dem Weinre-Server [Seite 404]
19.9 - 14.9 Remote-Debugging mit Adobe Shadow [Seite 405]
19.10 - 14.10 Kurz zusammengefasst [Seite 409]
20 - Index [Seite 410]
