Mobile Webseiten (eBook)

Strategien, Techniken, Dos und Don'ts für Webentwickler

Florence Maurice (Autor)

eBook Download: PDF

2012 | 1. Auflage
418 Seiten
Carl Hanser Fachbuchverlag
978-3-446-43279-6 (ISBN)

Infos

Das Mobiltelefon nimmt eine immer wichtigere Rolle als Informations- und Transaktionsmedium ein - die mobile Nutzung des Internets gewinnt mehr und mehr an Bedeutung. Webseiten sollten deshalb so gestaltet sein, dass sie beim mobilen Zugriff, egal von welcher Plattform aus, optimal funktionieren: Sie müssen schnell laden, gut organisiert sein und wichtige Usability-Prinzipien berücksichtigen.

Das Ergebnis kann sein:
- eine optimierte Webseite, die gleichermaßen auf Desktop und mobilen Geräten funktioniert
- eine eigene Website-Version für den mobilen Zugriff
- eine WebApp, also eine Website, die sich optisch und funktional an den Apps orientiert

Wie all das geht, zeigt Ihnen dieses Buch. Es ist ein praktischer Leitfaden, der Sie professionell durch das komplexe Thema führt - übersichtlich, mit zahlreichen Beispielen und Tipps sowie Hinweisen auf Besonderheiten und Stolperfallen. Sie lernen die Vor- und Nachteile der jeweiligen Varianten mobiler Webseiten kennen sowie die Kriterien, nach denen eine bestehende Website nur leicht anzupassen oder eine eigene Version bzw. eine WebApp zu programmieren ist.

Teil I des Buches beschreibt Ihnen generelle Strategien und Usability-Basics für die Planung und Entwicklung von Websites für mobile Geräte.
Teil II vermittelt die Techniken: Dos und Don'ts bei HTML & CSS// Performance-Optimierung// Responsive Design: CSS3 Media Queries, Bilder-Handling// JavaScript bei mobilen Webseiten// Neue APIs: Geolocation-API, HTML5 Local Storage, Offline-Application// Frameworks: jQuery Mobile, Sencha Touch, HTML5-Frameworks// Serverseitige Weichen: BrowserSniffing, Content-Adaption// Testmöglichkeiten

Auf der Website zum Buch finden Sie die Listings aus dem Buch, JavaScript-Bibliotheken und bei Bedarf Aktualisierungen.

Über den Autor:
Dr. Florence Maurice arbeitet freiberuflich 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.

Autor

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.

Inhalt

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.
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
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
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

Produkt-Details

• Erscheint lt. Verlag: 4.10.2012
• Verlagsort: München
• Sprache: deutsch
• Themenwelt: Mathematik / Informatik ► Informatik ► Web / Internet
• Schlagworte: CSS3 • HTML5 • JavaScript • jQuery Mobile • Mobile Anwendungen • Mobiles Web • mobile Webseiten • Optimierung • Programmierung • Responsive Webdesign • Sencha Touch • Webapps • Webdesign • Webseiten für mobile Geräte • WURFL
• ISBN-10: 3-446-43279-5 / 3446432795
• ISBN-13: 978-3-446-43279-6 / 9783446432796