»Responsive« ist heute eine Kernanforderung an jede Website. Doch mit passenden Breakpoints allein ist es nicht getan. Auch Typografie und Navigation müssen auf allen Endgeräten funktionieren. Für Profis heißt das: ständig weiterlernen, optimieren und neue Lösungen finden. Lernen Sie in diesem Praxisbuch, wie Sie anpassungsfähige Websites programmieren und gestalten von Anfang an und auf dem aktuellsten Stand der Technik. Das Standardwerk in der dritten Auflage. Aus dem Inhalt: Media Queries und Viewports Design und Typografie Semantik und Barrierefreiheit Responsive Layout-Patterns Das passende Framework wählen Knackpunkt Navigation Flexible Inhaltselemente Device Testing / CSS-Regression Performance-Optimierung Die Fachpresse zur Vorauflage: dotnetpro: »Anschaulich und verständlich. Zeigt alle wichtigen Aspekte. Sehr gut!«
Inkl. Barrierefreiheit und Performance-Optimierung
Inhalt
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
Inkl. Barrierefreiheit und Performance-Optimierung
Inhalt
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
Titel
Responsive Webdesign
Untertitel
Konzepte, Techniken, Praxisbeispiele
Autor
EAN
9783836245807
Format
E-Book (epub)
Hersteller
Veröffentlichung
28.05.2017
Digitaler Kopierschutz
Wasserzeichen
Anzahl Seiten
524
Lesemotiv
Unerwartete Verzögerung
Ups, ein Fehler ist aufgetreten. Bitte versuchen Sie es später noch einmal.