Responsives Webdesign mit HTML5

Seminarziel

Inhalt

• Allgemeine Grundlagen responsiver Layouts
  • Ausgaben auf mobilen Geräten und Desktopbrowsern
  • Viewport
  • Geräteabhängige Designaspekte: Multicolumn, Off-Canvas, Drop-Down?
  • Responsive, Fluid, Adaptive?
• HTML für das Dokument
  • Semantisches HTML
  • Architektur von Template, UI-Komponenten und Inhalten
  • `div`-Elemente richtig einsetzen
• Layouts mit CSS umsetzen
  • Anforderungen und Entwurf eines flexiblen Layouts
  • Ein typografisches Raster entwickeln, z.B. 12 Spalten 
  • CSS Grids und Flexboxen
• Einsatz von Mediaqueries
  • Medientypen und Attribute abfragen (große und kleine Bildschirme, Drucker)
  • Breakpoints zur Unterscheidung verschiedener Geräteklassen?
• Responsive Bilder und Grafik
  • Bilder mit srcset, <picture>
  • SVG (Vektorgrafiken) in HTML und CSS
  • Icons aus Zeichensätzen
  • Farben und Farbverläufe
  • Filter und Backdropfilter
• Dynamisches Verhalten
  • CSS Transitions
  • CSS Animations
  • CSS Transformations
• Responsive Typografie
  • Leserlichkeit: Satz und Layout für alle Geräte
  • Die Bedeutung von Schrift und Schriftgröße
  • Fluide Schriftgrößen mit `clamp()`
• Responsivität für barrierefreie Web-Oberflächen
  • Benutzereinstellungen berücksichtigen
  • Mediaqueries für zeitliches Verhalten, erhöhten Kontrast u.a.
  • Barrierefreier Einsatz von Farben
  • Typografie und Leserlichkeit: Schrift für Menschen mit Beeinträchtigungen beim Lesen und Schreiben
  • Fokusrahmen, Fehlerhinweise und Informationstext-Gestaltung
• UX für mobile Geräte
  • Content first, Mobile first
  • Mauszeiger vs. Touchscreen
  • Schaltflächen, Navigationslisten, Eingabeelemente
• Einblick in Design Frameworks
  • Boostrap, Material, Daisy UI u.a.
  • Tailwind
• Anwendungsfälle
  • Layout für Smartphone, Tablet und Desktop
  • Beispiele für Bild und Text
  • Beispiele für Formulare
  • Beispiel einer Hamburger-Navigation
  • Icons