Responsive Webdesign - Kompaktkurs

Grundlagen und Planung responsiver Webseiten

• Vorüberlegungen für mobile Webseiten und unterschiedliche Nutzungssituationen
• Analyse typischer Endgeräte, Displaygrößen und Eingabemethoden
• Unterschiede zwischen Responsive Design, Fluid Design und Adaptive Design
• Mobile-First-Ansatz und progressive Erweiterung von Layouts
• Viewport-Angaben korrekt einfügen und testen

Layouts, Grids und Breakpoints

• Flexible Layout-Strukturen mit CSS entwickeln
• Breakpoints für sinnvolle Layoutwechsel bestimmen
• Media Queries für unterschiedliche Geräteklassen einsetzen
• Grids konzipieren und für responsive Seiten nutzen
• Übersicht geeigneter Grid-Systeme und Frameworks für mobile Webseiten
• Praktische Einordnung von Bootstrap 5 und modernen CSS-Frameworks

Responsive Inhalte und Seitenelemente

• Responsive Bilder für verschiedene Auflösungen und Darstellungsgrößen einbinden
• Videos flexibel skalieren und in Layouts integrieren
• Formulare für Touch-Bedienung und kleine Displays optimieren
• Tabellen und komplexe Inhalte auf mobilen Endgeräten nutzbar darstellen
• Wechselnde Schriftgrößen im responsiven Design planen
• Lesbarkeit, Abstände und visuelle Hierarchien für unterschiedliche Viewports verbessern

Navigation, Ladeverhalten und Performance

• Mobile Navigationskonzepte wie Off-Canvas und alternative Menü-Techniken einsetzen
• Conditional Loading von Inhalten planen und umsetzen
• Performance mobiler Seiten analysieren und optimieren
• Ressourcen gezielt laden und unnötige Datenmengen vermeiden
• Typische Fehler in responsiven Layouts erkennen und beheben

Praxis, Qualitätssicherung und Ergänzungsthemen

• Responsive Webseiten systematisch im Browser testen
• Layout-Probleme mit Entwicklerwerkzeugen untersuchen
• Tipps und Tricks für robuste mobile Webseiten
• Einordnung weiterführender Themen wie barrierefreies Webdesign
• Abgrenzung zu Spezialthemen rund um Webseiten für mobile Endgeräte

• Gute Kenntnisse in HTML und CSS
• Grundverständnis für Aufbau und Gestaltung von Webseiten
• Erfahrung mit Browsern und Entwicklerwerkzeugen von Vorteil
• Für fehlende CSS-Grundlagen empfiehlt sich vorab der CSS Grundkurs

• Webentwicklerinnen und Webentwickler, die bestehende Webseiten für mobile Endgeräte optimieren oder neue responsive Layouts erstellen
• Webdesignerinnen und Webdesigner, die Gestaltung, Typografie, Navigation und Layout für verschiedene Viewports sicher planen möchten
• Frontend-Verantwortliche in Agenturen, Unternehmen und öffentlichen Einrichtungen mit Anforderungen an mobile Usability
• Projektbeteiligte mit HTML- und CSS-Praxis, die Responsive-Webdesign-Techniken fachlich fundiert einsetzen möchten