Responsive Webdesign von Anfang an! Eine moderne Website muss auf allen Geräten "funktionieren". Nicht mehr nur auf dem klassischen Desktop-PC, sondern auf einer kaum mehr überschaubaren Menge an Smartphones und Tablets mit iOS, Android und Windows Phone.Andrea Ertel und Kai Laborenz zeigen in Ihrem neuen Buch praxisnahe Lösungen, wie Sie Ihre Website anpassungsfähig machen können. Lernen Sie, wie Sie von Beginn an in flexiblen Strukturen denken können, die Schlüsseltechnologie Media Queries professionell einsetzen und Usability-Anforderungen umsetzen können. Dabei helfen Ihnen auch Layout-, Navigations- und Content-Strategien, um Ihre Website optimal umzusetzen. Sie erfahren auch, wie Sie mit Inhaltselementen wie Formularen, Tabellen, Video, Slideshows, Werbung oder externen Applikationen flexibel umgehen können. Frameworks wie YAML oder Foundation bieten an vielen Stellen eine gute Hilfe. Profitieren Sie von den vielen Tipps und Tricks, auch zur Performanceoptimierung, aus der Praxis und erfahren Sie zudem, wie Sie Ihre Website testen können. Lassen Sie sich von den spannenden Beispielprojekten inspirieren.
Aus dem Inhalt:
Verschiedene Layouttypen
Adaptive und Responsive
Media Queries und flexible Inhalte
Responsive Workflow
Semantik und Barrierefreiheit
Design und Typografie
Desktop First Responsive
Layout-Patterns
Frameworks wie Bootstrap, YAML
Navigationskonzepte
Flexible Bildelemente, Bildergalerien, Image Maps, Videos
Tabellen, Formulare, Werbung
Rezensionen / Stimmen
»Das komplett in Farbe gedruckte Buch zeigt anschaulich und verständlich alle wichtigen Aspekte der Entwicklung von anpassungsfähigen Websites. Sehr gut!«
Reihe
Sprache
Verlagsort
Verlagsgruppe
Editions-Typ
Maße
Höhe: 24 cm
Breite: 16.8 cm
ISBN-13
978-3-8362-3200-5 (9783836232005)
Schweitzer Klassifikation
Autor*in
Kai Laborenz ist im Web seit 1994 zu Hause. Er hat als Freelancer und mit der Agentur Sunbeam, die er mit zwei Freunden aufgebaut hat, Dutzende Online-Projekte umgesetzt. Für den Online-Schulungsanbieter akademie.de hat er sein Wissen in zahlreichen Workshops und Vorträgen vermittelt und bei Galileo Press die erfolgreichen Fachbücher "CSS - Das umfassende Handbuch" und "TYPO3 4.0" verfasst. Er war in der Fachjury zur "BIENE" der Aktion Mensch und hat selbst einen der Preise für barrierefreie Websites gewonnen. Mehr von ihm findet sich bei Google+ unter https://plus.google.com/116069089729179825738/posts und (hin und wieder) in seinem Blog: http://laborenz.de/lab-o-log
Andrea Ertel ist seit dem Jahr 2000 als Webdesignerin tätig und seit über 10 Jahren Frontend Developer bei der Kommunikationsagentur Sunbeam. Dort kümmert sie sich um die barrierefreie Umsetzung anpassungsfähiger Websites und die Integration der Projekte in das Content-Management-System TYPO3.
Geleitwort des Fachgutachters zur ersten Auflage ... 15
Vorwort ... 17
1. Denken in flexiblen Strukturen ... 21
1.1 ... Responsive Webdesign: Was bedeutet das eigentlich? ... 21
1.2 ... Layouttypen: feste, fluide und flexible ... 29
1.3 ... Vom fixen zum flexiblen Raster (»Grid«) ... 32
1.4 ... Adaptives Layout: festes Layout mit Umbrüchen ... 36
1.5 ... Responsives Layout: fluides Layout mit Umbrüchen ... 38
1.6 ... Zusammenfassung ... 39
2. Umsetzung eines fixen Designs in ein flexibles Layout ... 41
2.1 ... Die Ausgangslage: ein grafischer Entwurf mit festen Abmessungen ... 41
2.2 ... Der erste Schritt: feste Raster in flexible umrechnen ... 47
2.3 ... Der zweite Schritt zu mehr Flexibilität: anpassungsfähige Inhalte ... 49
2.4 ... Der dritte Schritt: Layouts mit Media Queries umschalten ... 52
2.5 ... Zusammenfassung ... 55
3. Die Schlüsseltechnologie Media Queries ... 57
3.1 ... Cascading Stylesheets (ein kurzer Rückblick) ... 58
3.2 ... Medientyp (media type) ... 59
3.3 ... Medieneigenschaften (media features) ... 61
3.4 ... Media Queries schreiben ... 64
3.5 ... Viewports und Pixel ... 66
3.6 ... Media Queries im Responsive Webdesign ... 75
3.7 ... Media Queries im HTML-Header oder im Stylesheet ... 84
3.8 ... Das wichtigste Media Query ist kein Media Query! ... 84
3.9 ... Media Queries und die alten Internet Explorer ... 84
3.10 ... User-Agent-Sniffing und serverseitige Erkennung ... 86
3.11 ... Zusammenfassung ... 87
4. Ein responsiver Workflow ... 89
4.1 ... Der alte Prozess ... 89
4.2 ... Phase 1: Moodboards und Inhaltsplan ... 92
4.3 ... Phase 2: Style Tiles und Wireframes ... 96
4.4 ... Phase 3: Design im Browser ... 104
4.5 ... Phase 4: Rinse and Repeat ... 107
4.6 ... Das responsive Team ... 109
4.7 ... Dokumentation responsiver Designs ... 110
4.8 ... Zusammenfassung ... 113
5. Design und Typografie ... 115
5.1 ... Design follows Content ... 115
5.2 ... Design von innen nach außen -- der Atomic-Design-Ansatz ... 118
5.3 ... Designanforderungen für responsive Sites ... 122
5.4 ... Typografie (anpassungsfähiger Text) ... 133
5.5 ... Zusammenfassung ... 150
6. Semantik und Barrierefreiheit ... 151
6.1 ... Prinzipien der Zugänglichkeit ... 151
6.2 ... Semantik durch HTML5 ... 159
6.3 ... HTML5-Formularattribute für mehr Semantik ... 163
6.4 ... Semantik durch WAI-ARIA-Rollen ... 165
6.5 ... Zusammenfassung ... 168
7. Responsive Layout-Patterns ... 169
7.1 ... Mobile First ... 170
7.2 ... Praxisbeispiel: Mobile First ... 175
7.3 ... Auswahl der Breakpoints ... 186
7.4 ... Praxisbeispiel: ersten Breakpoint setzen (Tablets) ... 190
7.5 ... Layout-Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte ... 195
7.6 ... Praxisbeispiel: weitere Breakpoints setzen (große Screens) ... 204
7.7 ... Breakpoint-Tools ... 208
7.8 ... CSS3-Layouttechniken für responsive Layouts ... 211
7.9 ... Zusammenfassung ... 216
8. Frameworks für responsives Design ... 217
8.1 ... Eigene Vorlage oder fertige Frameworks verwenden? ... 218
8.2 ... Wie wählen Sie das richtige Framework aus? ... 220
8.3 ... Eine kurze Vorstellung responsiver Frameworks ... 221
8.4 ... JavaScript-Bibliotheken und andere Helfer ... 235
8.5 ... Zusammenfassung ... 245
9. Navigationskonzepte ... 247
9.1 ... Was macht eine Navigation benutzerfreundlich? ... 247
9.2 ... Benutzerfreundliche Navigation für mobile Geräte ... 248
9.3 ... Navigationstypen für mobile Geräte mit Touchscreen ... 250
9.4 ... Multilevel-Menüs ... 275
9.5 ... Zusammenfassung ... 282
10. Flexible Bildelemente ... 283
10.1 ... Anpassungsfähige Bilder ... 283
10.2 ... Responsive Hintergrundbilder ... 293
10.3 ... Auflösungsunabhängige Grafiken (SVG) ... 311
10.4 ... Icon-Fonts ... 330
10.5 ... Bilder für unterschiedliche Auflösungen ... 338
10.6 ... Zusammenfassung ... 352
11. Mehr flexible Inhalte ... 355
11.1 ... Responsive Bildergalerien ... 356
11.2 ... Responsive Lightboxen ... 365
11.3 ... Responsive Image Maps ... 368
11.4 ... Anpassungsfähige Videos ... 370
11.5 ... Adobe Flash ... 380
11.6 ... Flexible Karteneinbindungen (Google Maps) ... 381
11.7 ... Flexible Tabellen ... 383
11.8 ... Akkordeons und Inhaltsboxen mit Reitern ... 394
11.9 ... Flexible Formulare ... 398
11.10 ... Inhalte selektiv anzeigen und laden ... 404
11.11 ... Flexible Werbung ... 412
11.12 ... Responsive HTML-E-Mails ... 426
11.13 ... Zusammenfassung ... 430
12. Qualitätssicherung und Optimierung ... 431
12.1 ... Testing ... 431
12.2 ... Performance testen und Optimierung ... 443
12.3 ... Zusammenfassung ... 470
13. Fazit ... 471
A. Anhang ... 473
A.1 ... Website zum Buch ... 473
A.2 ... Quellennachweise der verwendeten Bilder ... 473
Index ... 477
