Responsive Webdesign

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 ... Flexible Raster -- Gridsysteme ... 31

1.4 ... Layoutumbrüche -- Breakpoints ... 36

1.5 ... Zusammenfassung ... 38



2. Schnelleinstieg: Responsive Umsetzung eines fixen Layouts ... 39


2.1 ... Die Ausgangslage: Ein grafischer Entwurf mit festen Abmessungen ... 39

2.2 ... Der erste Schritt: Feste Raster in flexible umrechnen ... 43

2.3 ... Der zweite Schritt zu mehr Flexibilität: Anpassungsfähige Inhalte ... 46

2.4 ... Der dritte Schritt: Layouts mit Media Queries umschalten ... 49

2.5 ... Zusammenfassung ... 51



3. Die Schlüsseltechnologie Media Queries ... 53


3.1 ... Cascading Stylesheets (ein kurzer Rückblick) ... 54

3.2 ... Medientyp (Media Type) ... 55

3.3 ... Medieneigenschaften (Media Features) ... 57

3.4 ... Media Queries schreiben ... 60

3.5 ... Viewports und Pixel ... 63

3.6 ... Media Queries in der Praxis ... 72

3.7 ... Media-Query-Unterstützung mit JavaScript ... 80

3.8 ... Serverseitige Geräte- und Feature-Erkennung ... 83

3.9 ... Zusammenfassung ... 86



4. Ein responsiver Workflow ... 87


4.1 ... Der alte Prozess ... 87

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

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

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

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

4.6 ... Das responsive Team ... 105

4.7 ... Dokumentation responsiver Designs ... 106

4.8 ... Zusammenfassung ... 109



5. Design und Typografie ... 111


5.1 ... Design follows Content ... 111

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

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

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

5.5 ... Zusammenfassung ... 151



6. Semantik und Barrierefreiheit ... 153


6.1 ... Prinzipien der Zugänglichkeit ... 153

6.2 ... Semantik durch HTML5 ... 161

6.3 ... Semantik durch WAI-ARIA-Rollen ... 167

6.4 ... Zusammenfassung ... 170



7. Responsive Layout-Patterns ... 171


7.1 ... Mobile First ... 172

7.2 ... Praxisbeispiel: Mobile First ... 174

7.3 ... Auswahl der Breakpoints ... 185

7.4 ... Praxisbeispiel: Ersten Breakpoint setzen (Tablets) ... 189

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

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

7.7 ... Flexbox-Layout ... 206

7.8 ... Grid-Layouts (CSS3) ... 211

7.9 ... Zusammenfassung ... 218



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


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

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

8.3 ... Eine kurze Vorstellung responsiver Frameworks ... 223

8.4 ... JavaScript-Bibliotheken ... 237

8.5 ... Elegante Stylesheets mit Präprozessoren: SASS & Co. ... 240

8.6 ... Zusammenfassung ... 247



9. Navigationskonzepte ... 249


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

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

9.3 ... Wenige Menüpunkte am oberen Rand ... 252

9.4 ... Lange Menüs kompakt anordnen ... 256

9.5 ... Select-Menü ... 260

9.6 ... Navigation per Anker am Ende des Seiteninhalts ... 265

9.7 ... Toggle-Menü ... 269

9.8 ... Off-Canvas-Menü ... 272

9.9 ... Multilevel-Menüs ... 280

9.10 ... Zusammenfassung ... 285



10. Flexible Bildelemente ... 287


10.1 ... Anpassungsfähige Bilder ... 287

10.2 ... Responsive Hintergrundbilder ... 296

10.3 ... Responsive Icons ... 312

10.4 ... Auflösungsunabhängige Grafiken (SVG) ... 341

10.5 ... Die Syntax für responsive Bilder ... 355

10.6 ... Unterschiedliche Versionen für responsive Bilder erzeugen ... 367

10.7 ... Zusammenfassung ... 377



11. Mehr flexible Inhalte ... 379


11.1 ... Responsive Slider nicht nur für Bilder ... 380

11.2 ... Responsive Lightboxen ... 389

11.3 ... Responsive Image Maps ... 392

11.4 ... Anpassungsfähige Videos ... 394

11.5 ... Flexible Karteneinbindungen (Maps) ... 403

11.6 ... Flexible Tabellen ... 406

11.7 ... Akkordeons und Inhaltsboxen mit Reitern ... 414

11.8 ... Flexible Formulare ... 418

11.9 ... Inhalte selektiv anzeigen und laden ... 423

11.10 ... Flexible Werbung ... 430

11.11 ... Responsive HTML-E-Mails ... 438

11.12 ... Zusammenfassung ... 442



12. Testing und Qualitätssicherung ... 443


12.1 ... Validatoren für HTML und CSS ... 443

12.2 ... Breakpoints im Browser testen ... 444

12.3 ... Auf mobilen Geräten testen ... 450

12.4 ... Qualitätssicherung und Wartung ... 461

12.5 ... Zusammenfassung ... 469



13. Performanceoptimierung ... 471


13.1 ... Das Performancebudget ... 472

13.2 ... Was beeinträchtigt die Performance? ... 473

13.3 ... Skripte, Stylesheets und HTML ... 476

13.4 ... Caching ... 489

13.5 ... Performanceoptimierung für Grafiken und Bilder ... 490

13.6 ... Web-Schriften optimieren ... 492

13.7 ... Gefühlte Performance und Nachladen von Inhalten ... 495

13.8 ... Zusammenfassung ... 507



14. Fazit ... 509


Anhang ... 511


Index ... 513