Index aller Praxisbeispiele

Im Folgenden finden Sie sämtliche im Buch genannten Praxisbeispiele kapitelweise zugeordnet und direkt aufrufbar.

Kapitel 1: Denken in flexiblen Strukturen

  1. Fixes Raster — 960 Grid-System (bsp_01-01)
  2. Fixes Raster in flexibles Raster umbauen (bsp_01-01)

Kapitel 2: Schnelleinstieg responsive Umsetzung

  1. Fixes Desktop-Layout (bsp_02-01)
  2. Fixes Desktop-Layout in ein flexibles umrechnen (erste Schritte) (bsp_02-02)

Kapitel 3: Die Schlüsseltechnologie Media Queries

Keine Beispiele im diesem Kapitel

Kapitel 4: Ein responsiver Workflow

  1. Style-Dokumentation mit Syntax-Highlighting (Pattern Primer) (bsp_04-01) (Internetverbindung oder lokaler Server erforderlich)
  2. Design-Anmerkungen mit Loznotes (bsp_04-02)

Kapitel 5: Design und Typografie

  1. Immer seitenbreite Titel mit vw (bsp_05-01)
  2. Relative Basis-Font-Size (bsp_05-02)
  3. Mehrspaltensatz mit der CSS-Eigenschaft "Column Count" (bsp_05-03)

Kapitel 6: Semantik und Barrierefreiheit

  1. Responsives Design mittels Lichtsensor (bsp_06-01)
  2. Demovideo zum Lichtsensor-Beispiel (bsp_06-01) (Internetverbindung erforderlich)
  3. HTML5-Formulare: Input-Types (bsp_06-02)

Kapitel 7: Responsive Layout-Patterns

  1. Basisversion (Mobile-First Praxisbeispiel) (bsp_07-01)
  2. Tabletversion (Mobile-First Praxisbeispiel) (bsp_07-02)
  3. Kleine Desktopversion (Mobile-First Praxisbeispiel) (bsp_07-03)
  4. Große Desktopversion (Mobile-First Praxisbeispiel) (bsp_07-04)
  5. Flexbox-Layout (bsp_07-05)
  6. Flexbox-Layout Content Switch (bsp_07-06)
  7. CSS-Grid-Layout (bsp_07-07)

Kapitel 8: Frameworks für responsives Design

  1. 3-Spalter mit Foundation (bsp_08-01)
  2. 3-Spalter mit Bootstrap (bsp_08-02)
  3. 3-Spalter mit PureCSS (bsp_08-03)
  4. 3-Spalter mit SimpleGrid (bsp_08-04)

Kapitel 9: Navigationskonzepte

  1. Basis-Layout für weitere Beispiele (Mobile-First) (bsp_09-00)
  2. Mini-Navigation (bsp_09-01)
  3. Priority-Navigation (GreedyNav.js) (bsp_09-02)
  4. Select-Navigation (bsp_09-03)
  5. Footer-Navigation (bsp_09-04)
  6. Toggle-Navigation (CSS) (bsp_09-05)
  7. Toggle-Navigation (ResponsiveNav) (bsp_09-06)
  8. Off-Canvas-Navigation (Pushy) (bsp_09-07)
  9. Slideout-Navigation (slideout.js) (bsp_09-08)
  10. Multilevel-Navigation (ohne doubleTapToGo) (bsp_09-09)
  11. Multilevel-Navigation (doubleTapToGo) (bsp_09-10)
  12. Multilevel-Navigation (Flexnav) (bsp_09-11)

Kapitel 10: Flexible Bildelemente

  1. Basis-Layout für weitere Beispiele (Mobile-First) (bsp_10-00)
  2. Flexible Bilder (bsp_10-01)
  3. Bilder beschneiden (bsp_10-02)
  4. Flexible Teaserboxen (bsp_10-03)
  5. Gekachelte Hintergrundmuster (Grafik mit Transparenz und BG-Color) (bsp_10-04)
  6. CSS3-Hintergrundmuster (bsp_10-05)
  7. SVG-Hintergrundmuster (bsp_10-06)
  8. Vollflächige Hintergrundbilder (Fullpage-Parallax) (bsp_10-07)
  9. Vollflächige Teaserbilder (Promoboxen) (bsp_10-08)
  10. Skalierbare Background-Icons (einzeln und als CSS-Sprite) (bsp_10-09)
  11. Responsive Icons aus Icon-Font (bsp_10-10)
  12. Ligaturen-Icons + Demo (bsp_10-11)
  13. SVG-Sprite-Icons (interne Einbindung) (bsp_10-12)
  14. SVG-Sprite-Icons (interne Einbindung mit externen CSS) (bsp_10-13)
  15. SVG-Sprite-Icons (externe Einbindung) (bsp_10-14)
  16. SVG-Infografik vs. GIF-Infografik (bsp_10-15)
  17. Flowerish 1: SVG-Illustration direkt im HTML (bsp_10-16)
  18. Flowerish 2: SVG-Einbindungsarten (mit externem CSS) (bsp_10-17)
  19. Flowerish 3: SVG-Einbindungsarten (mit Inline-Styles im SVG) (bsp_10-18)
  20. SVG-Weichzeichnungs-Filter (bsp_10-19)
  21. srcset-Syntax für responsive Bilder (bsp_10-20)
  22. Intelligente Bildausschnitte mit Focalpoint (bsp_10-21)

Kapitel 11: Mehr flexible Inhalte

  1. Basis-Layout für weitere Beispiele (Mobile-First) (bsp_11-00)
  2. Slick-Slider: Bildergalerie (bsp_11-01)
  3. Slick-Slider: Bilder-Carousels (bsp_11-02)
  4. Slick-Slider: Text-Slider (bsp_11-03)
  5. Responsive Lightbox (bsp_11-04)
  6. Responsive Imagemaps (bsp_11-05)
  7. HTML5-Videos (bsp_11-06)
  8. Nicht ganz responsive Video-Einbindungen (bsp_11-07a)
  9. Intrinsic-Ratio-Trick für responsive Video-Einbindungen (bsp_11-07b)
  10. Video-Seitenverhältnisse mit FitVids.js (bsp_11-08)
  11. HTML5-Videoplayer mit video.js (bsp_11-09)
  12. Flexible Google-Maps im iframe (bsp_11-10)
  13. Flexible Google-Maps mit Google-API (bsp_11-11)
  14. Scrollbare Tabellen (bsp_11-12)
  15. Tabellen mit CSS umstrukturieren (per data-Attribut) (bsp_11-13)
  16. Tabellen mit Foo-Table-Plugin (bsp_11-14)
  17. Flexibles "Tab-Reiter-Akkordeon" (bsp_11-15)
  18. Formulare (bsp_11-16)
  19. Inhalte per CSS ein- und ausblenden (Conditional Content) (bsp_11-17)
  20. Append Around: Inhalte neu anordnen (bsp_11-18)

Kapitel 12: Testing und Qualitätssicherung

  1. Monkey-Testing mit Forcefeed (bsp_12-01)

Kapitel 13: Performanceoptimierung

  1. Lazy Loading Bilder (bsp_13-01)
  2. Lazy Loading Bilder als Tabcontent (bsp_13-02)
  3. Anchor Include Pattern (Nachladen: PHP-Version) (bsp_13-03) (Internetverbindung oder lokaler Server erforderlich)
  4. Anchor Include Pattern (Nachladen: HTML-Version) (bsp_13-03)