Responsives Webdesign mit HTML5 - Seminar / Kurs von GFU Cyrus AG
Inhalte
- Allgemeine Grundlagen responsiver Layouts
- Ausgaben auf mobilen Geräten und Desktopbrowsern
- Viewport
- Geräteabhängige Designaspekte
- 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
- CSS Flexboxen
- Einsatz von Medienqueries
- Medientypen und Attribute abfragen (große und kleine Bildschirme, Drucker)
- Breakpoints zur Unterscheidung verschiedener Geräteklassen?
- Responsive Bilder und Grafik
- Bilder mit srcset,
- SVG (Vektorgrafiken) in HTML und CSS
- Icons aus Zeichensätzen
- Farben und Farbverläufe
- Filter und Backdropfilter
- Barrierefreier Einsatz von Farben
- Dynamisches Verhalten
- CSS Transitions
- CSS Animations
- CSS Transformations
- Responsive Typografie
- Leserlichkeit: Satz und Layout für alle Geräte
- Fluide Schriftgrößen mit `clamp()`
- Barrierefreie Typografie
- UX für mobile Geräte
- Content first, Mobile first
- Mauszeiger vs. Touchscreen
- Schaltflächen, Navigationslisten, Eingabeelemente
- Ausblick auf Frameworks
- Boostrap, Material
- 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
- Allgemeine Grundlagen responsiver Layouts
- Ausgaben auf mobilen Geräten und Desktopbrowsern
- Viewport
- Geräteabhängige Designaspekte
- Responsive, Fluid, Adaptive?
- HTML für das Dokument
- Semantisches H ...
Lernziele
Sie lernen, mit HTML, CSS und Javascript reaktionsfähige Webseiten- und
Webapplikationslayouts zu entwerfen und umzusetzen.
Zielgruppen
Webdesigner, Entwickler für Webfrontends