Ein Kurs, in dem alle Aspekte des responsiven Webdesigns behandelt werden. Finde heraus, wie du Websites erstellst, die gut aussehen und für alle gut funktionieren.
Dieser Kurs nimmt Sie mit auf eine Reise durch die vielen Facetten des modernen responsiven Webdesigns. In den ersten Modulen lernen Sie, woher responsives Design gekommen ist, und lernen die Grundlagen responsiver Layouts kennen. Dort erfahren Sie mehr über responsive Bilder, Typografie, Barrierefreiheit und mehr.
Außerdem erfahren Sie, wie Sie Websites an Nutzereinstellungen und Gerätefunktionen anpassen können. Am Ende werden Sie auch ein Verständnis dafür haben, was die Zukunft für responsives Design bringt.
Jedes Modul umfasst Demos und Selbsttests, mit denen Sie Ihr Wissen testen können.
Dieser Kurs richtet sich an Designschaffende und Entwickelnde mit fortgeschrittenen Kenntnissen. Grundlegende HTML- und CSS-Kenntnisse sollten ausreichen. Sie müssen kein JavaScript kennen. Wenn Sie zum ersten Mal Websites erstellen, finden Sie hier eine Einführung in HTML und einen weiteren Kurs zum Erlernen von CSS.
Die Themen:
Einführung
Finden Sie heraus, woher das responsive Design stammt.
Medienabfragen
Passen Sie Ihre Designs mithilfe von CSS-Medienabfragen an verschiedene Bildschirmgrößen an.
Internationalisierung
Bereiten Sie Ihre Designs für verschiedene Sprachen und Schreibmodi vor.
Makro-Layouts
Entwerfen Sie Seitenlayouts mithilfe verschiedener CSS-Techniken.
Mikrolayouts
Erstellen Sie flexible Komponenten, die überall platziert werden können.
Typografie
Ihr Text sollte lesbar und ansprechend sein, egal wo er erscheint.
Responsive Bilder
Zeigen Sie Ihren Besuchern die Bilder, die am besten zu ihren Geräten und Bildschirmen passen.
Das Bildelement
Lassen Sie Ihrer Kreativität freien Lauf.
Symbole
Verwenden Sie SVG für skalierbare responsive Symbole.
Design
Passen Sie Ihre Designs an die Anforderungen der Nutzenden an, z. B. den dunklen Modus.
Bedienungshilfen
Sorgen Sie dafür, dass Ihre Website für alle Nutzer verfügbar ist.
Interaktion
Bereiten Sie Ihre Seiten für verschiedene Eingabemechanismen vor: Maus, Tastatur und Touchscreen.
Muster auf der Benutzeroberfläche
Sehen Sie sich einige gängige UI-Elemente an, die sich an verschiedene Bildschirmgrößen anpassen.
Medienfunktionen
Eine Zusammenfassung aller Möglichkeiten, wie du mit Medienfunktionen auf Geräte und Vorlieben reagieren kannst.
Bildschirmkonfigurationen
Bereiten Sie Ihre Inhalte für Geräte mit mehreren Bildschirmen vor.
Fazit und nächste Schritte
Weitere Ressourcen, die Ihnen bei den nächsten Schritten helfen.
Sind Sie bereit für responsives Design?