Zielsetzung des Kurses
Der Kurs Responsive Webdesign behandelt die Planung und Umsetzung von Websites, die sich an unterschiedliche Bildschirmgrößen und Endgeräte anpassen. Im Mittelpunkt stehen Prinzipien der responsiven Gestaltung, flexible Layouts sowie die technische Realisierung mit HTML, CSS und JavaScript. Der Kurs ordnet sich in das Fachgebiet Webentwicklung ein und fokussiert auf methodische Vorgehensweisen für Layout, Typografie, Medien und Performance. Ziel ist die vermittelnde Darstellung von Konzepten zur Erstellung robuster, zugänglicher und wartbarer Frontends.
Inhalte
Grundlagen der responsiven Gestaltung mit Breakpoints, fluiden Rastern, flexiblen Einheiten, responsiver Typografie und modularen Komponenten; Herleitung von Gestaltungsrastern und Musterbibliotheken im Kontext variabler Viewports
Technische Umsetzung mit HTML-Semantik, CSS-Layoutverfahren (Flexbox, Grid), Media Queries, Container Queries sowie Umgang mit Bildern, Icons und Fonts für unterschiedliche Pixeldichten
Interaktion und Verhalten mit JavaScript für Navigation, Menüs, Akkordeons und Formulare unter Berücksichtigung progressiver Erweiterung und Rückfalllösungen
Zugänglichkeit und Qualitätssicherung durch semantische Strukturen, Tastaturbedienbarkeit, ARIA-Anreicherung, Kontrast- und Lesbarkeitsprüfung, Testing und Validierung
Leistungsoptimierung und Auslieferung mittels responsiver Bilder, Lazy Loading, Caching, Minimierung, Build-Workflows sowie grundlegender Messung von Ladezeiten und Rendering
Workflow und Dokumentation mit Versionierung, Komponentenbibliotheken, Styleguides, Übergabe an Entwicklung/Design sowie grundlegender Einsatz von Design- und Prototyping-Tools
Lernziele
- Analysieren von Layoutanforderungen für verschiedene Viewport-Größen und Gerätekontexte
- Erstellen von responsiven Layouts mit CSS Grid und Flexbox einschließlich definierter Breakpoints
- Anwenden von Media Queries, Container Queries und fluiden Einheiten zur Skalierung von Typografie und Komponenten
- Implementieren responsiver Bilder mit srcset, sizes und geeigneten Formaten inklusive Lazy Loading
- Integrieren grundlegender Zugänglichkeitsanforderungen mit semantischem HTML, ARIA-Attributen und Tastaturnavigation
- Bewerten der Performance mittels Basiskennzahlen und Durchführen einfacher Optimierungsmaßnahmen im Frontend-Build
Berufsperspektiven
Die Kursinhalte finden Anwendung in Berufsfeldern wie Frontend-Entwicklung mit Schwerpunkt auf responsiven Benutzeroberflächen. Typische Tätigkeitsfelder umfassen Webdesign und UI-Umsetzung in Agenturen oder Inhouse-Teams mit Fokus auf Layout, Typografie und Komponentenentwicklung. Der Kurs adressiert Inhalte für Tätigkeiten wie Technical Webdesign, bei denen HTML/CSS-Implementierung, Zugänglichkeit und Performance eine Rolle spielen.
Zusammenfassung
Der Kurs Responsive Webdesign behandelt die Konzeption und Umsetzung anpassungsfähiger Websites auf Basis von HTML, CSS und JavaScript. Im Rahmen dieser Weiterbildung werden Layout, Typografie, Interaktion, Zugänglichkeit und Leistungsaspekte in strukturierter Form vermittelt. Die Inhalte stehen in Verbindung mit Tätigkeiten in Frontend-Entwicklung, Webdesign und UI-Umsetzung.