Responsive Webdesign

Geleitwort des Fachgutachters ... 15


Vorwort ... 17


1. Denken in flexiblen Strukturen ... 21


1.1 ... Responsive Webdesign: Was bedeutet das eigentlich? ... 21

1.2 ... Layouttypen: fest, fluide und flexible ... 30

1.3 ... Vom fixen zum flexiblen Raster (»Grid«) ... 32

1.4 ... Adaptives Layout: festes Layout mit Umbrüchen ... 37

1.5 ... Responsive Layout: fluides Layout mit Umbrüchen ... 38

1.6 ... Zusammenfassung ... 40



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



4. Ein responsiver Workflow ... 87


4.1 ... Der alte Prozess ... 87

4.2 ... Phase 1: Moodboards und Inhaltsplan ... 90

4.3 ... Phase 2: Style Tiles und Wireframes ... 94

4.4 ... Phase 3: Design im Browser ... 102

4.5 ... Phase 4: Rinse and Repeat ... 104

4.6 ... Das responsive Team ... 106

4.7 ... Dokumentation responsiver Designs ... 107

4.8 ... Zusammenfassung ... 110



5. Design und Typografie ... 111


5.1 ... Design follows Content ... 111

5.2 ... Design von innen nach außen -- der Atomic-Design-Ansatz ... 113

5.3 ... Designanforderungen für responsive Sites ... 118

5.4 ... Typografie (anpassungsfähiger Text) ... 129

5.5 ... Zusammenfassung ... 145



6. Semantik und Barrierefreiheit ... 147


6.1 ... Prinzipien der Zugänglichkeit ... 147

6.2 ... Semantik durch HTML5 ... 155

6.3 ... HTML5-Formularattribute für mehr Semantik ... 158

6.4 ... Semantik durch WAI-ARIA-Rollen ... 161

6.5 ... Zusammenfassung ... 163



7. Desktop First Responsive Layout-Patterns ... 165


7.1 ... Mobile First ... 165

7.2 ... Praxisbeispiel: Mobile First ... 170

7.3 ... Auswahl der Breakpoints ... 181

7.4 ... Praxisbeispiel: ersten Breakpoint setzen (Tablets) ... 185

7.5 ... Layout-Patterns (Darstellungsmuster) für unterschiedliche Ausgabegeräte ... 190

7.6 ... Praxisbeispiel: Weitere Breakpoints setzen (große Screens) ... 198

7.7 ... Breakpoint-Tools ... 203

7.8 ... CSS3-Layouttechniken für responsive Layouts ... 205

7.9 ... Zusammenfassung ... 210



8. Frameworks für responsives Design ... 211


8.1 ... Eigene Vorlage oder fertige Frameworks verwenden? ... 212

8.2 ... Wie wählen Sie das richtige Framework aus? ... 214

8.3 ... Ein kurze Vorstellung responsiver Frameworks ... 215

8.4 ... JavaScript-Bibliotheken und andere Helfer ... 228

8.5 ... Zusammenfassung ... 237



9. Navigationskonzepte ... 239


9.1 ... Was macht eine Navigation benutzerfreundlich? ... 239

9.2 ... Benutzerfreundliche Navigation für mobile Geräte ... 240

9.3 ... Navigationstypen für mobile Geräte mit Touchscreen ... 242

9.4 ... Multilevel-Menüs ... 268

9.5 ... Zusammenfassung ... 272



10. Flexible Bildelemente ... 273


10.1 ... Anpassungsfähige Bilder ... 273

10.2 ... Responsive Hintergrundbilder ... 283

10.3 ... Auflösungsunabhängige Grafiken ... 301

10.4 ... Bilder für unterschiedliche Auflösungen ... 312

10.5 ... Zusammenfassung ... 324



11. Mehr flexible Inhalte ... 325


11.1 ... Responsive Bildergalerien ... 326

11.2 ... Responsive Image Maps ... 335

11.3 ... Anpassungsfähige Videos ... 337

11.4 ... Adobe Flash ... 344

11.5 ... Flexible Karteneinbindungen (Google Maps) ... 345

11.6 ... Flexible Tabellen (MediaTable) ... 347

11.7 ... Akkordeons und Inhaltsboxen mit Reitern ... 356

11.8 ... Flexible Formulare ... 361

11.9 ... Inhalte selektiv anzeigen und laden ... 367

11.10 ... Flexible Werbung ... 374

11.11 ... Zusammenfassung ... 384



12. Qualitätssicherung und Optimierung ... 385


12.1 ... Testing ... 385

12.2 ... Performance testen und Optimierung ... 396

12.3 ... Zusammenfassung ... 420



13. Fazit ... 421


Anhang ... 423


DVD zum Buch ... 423

Website zum Buch ... 423

Quellennachweise der verwendeten Bilder ... 423



Index ... 427