Responsive Design: Anpassung an BildschirmgrößenAktivitäten & Unterrichtsstrategien
Aktives Ausprobieren zeigt Schülern sofort, warum feste Pixel-Maße scheitern: Überfüllte Layouts auf kleinen Bildschirmen oder zu kleine Texte werden direkt sichtbar. Die Kombination aus DevTools, realen Geräten und praktischen Anpassungen macht technische Konzepte wie Media Queries und relative Einheiten greifbar und nachvollziehbar.
Lernziele
- 1Analysieren Sie die Auswirkungen unterschiedlicher Bildschirmgrößen auf das Layout und die Lesbarkeit von Webseiten.
- 2Erklären Sie die Funktionsweise von CSS Media Queries zur Anpassung von Webseiten an verschiedene Geräte.
- 3Entwerfen Sie ein einfaches responsives Layout für eine Webseite unter Verwendung von Flexbox oder Grid.
- 4Bewerten Sie die Benutzerfreundlichkeit einer Webseite auf verschiedenen Geräten und identifizieren Sie Verbesserungspotenziale im responsiven Design.
- 5Vergleichen Sie die Darstellung einer Webseite auf einem Desktop-Browser und einem mobilen Emulator.
Möchten Sie einen vollständigen Unterrichtsentwurf mit diesen Lernzielen? Mission erstellen →
DevTools-Stationen: Bildschirmtests
Richten Sie Stationen mit Laptops ein, auf denen Browser-DevTools geöffnet sind. Gruppen testen eine feste Webseite, verkleinern den Viewport und notieren Probleme wie verschobene Elemente. Sie passen dann Media Queries ein und vergleichen Vorher-Nachher.
Vorbereitung & Details
Erklären Sie, warum Webseiten auf verschiedenen Geräten unterschiedlich aussehen müssen.
Moderationstipp: Beobachten Sie während der DevTools-Stationen, wie Schüler die Geräte-Ansicht nutzen, um Überlappungen oder Scrollprobleme zu erkennen.
Setup: Wandflächen oder Tische entlang der Raumwände
Materials: Plakatpapier oder Posterwände, Marker, Haftnotizen für Feedback
Geräte-Karussell: Realgeräte-Test
Teilen Sie Tablets, Smartphones und Laptops aus. Jede Gruppe lädt eine Webseite hoch, rotiert Geräte und bewertet die Darstellung mit einer Checkliste (Lesbarkeit, Navigation). Diskutieren Sie Lösungsvorschläge.
Vorbereitung & Details
Analysieren Sie die Herausforderungen bei der Gestaltung von Webseiten für mobile Geräte.
Moderationstipp: Fordern Sie beim Geräte-Karussell gezielt auf, Unterschiede zwischen Tablet und Smartphone zu dokumentieren – so wird der Anpassungsbedarf konkret.
Setup: Wandflächen oder Tische entlang der Raumwände
Materials: Plakatpapier oder Posterwände, Marker, Haftnotizen für Feedback
Responsive Prototyp: Paar-Programmierung
In Paaren bauen Schüler eine einfache Seite mit HTML/CSS, integrieren Flexbox und eine Media Query für Mobile. Testen Sie live und präsentieren die Anpassung.
Vorbereitung & Details
Beurteilen Sie die Bedeutung von responsivem Design für die Benutzerfreundlichkeit.
Moderationstipp: Geben Sie beim Responsive Prototyp klare Zeitlimits für die Paar-Programmierung vor, um Diskussionen über Layout-Entscheidungen zu fokussieren.
Setup: Wandflächen oder Tische entlang der Raumwände
Materials: Plakatpapier oder Posterwände, Marker, Haftnotizen für Feedback
Klassen-Challenge: Breakpoint-Hunt
Zeigen Sie eine Webseite im Vollbild. Die Klasse identifiziert gemeinsam Breakpoints, wo das Layout bricht, und schlägt CSS-Fixes vor. Implementieren Sie als Whole-Class-Übung.
Vorbereitung & Details
Erklären Sie, warum Webseiten auf verschiedenen Geräten unterschiedlich aussehen müssen.
Moderationstipp: Nutzen Sie die Breakpoint-Hunt als Wettbewerb, bei dem Teams nicht nur Fehler finden, sondern auch Lösungsvorschläge präsentieren müssen.
Setup: Wandflächen oder Tische entlang der Raumwände
Materials: Plakatpapier oder Posterwände, Marker, Haftnotizen für Feedback
Dieses Thema unterrichten
Lehrkräfte sollten den Fokus auf iterative Verbesserungen legen: Zuerst scheitern lassen, dann gemeinsam Lösungen erarbeiten. Vermeiden Sie Frontalunterricht zu Media Queries – stattdessen die Schüler selbst experimentieren lassen. Nutzen Sie echte Webseiten als Beispiele, um die Relevanz des Themas zu zeigen. Gruppenarbeit fördert den Austausch über verschiedene Ansätze, während Einzelarbeit die Technikkompetenz stärkt.
Was Sie erwartet
Am Ende können Schülerinnen und Schüler Media Queries gezielt einsetzen, um Layouts auf verschiedenen Bildschirmgrößen zu testen und anzupassen. Sie erkennen, wann starre Strukturen scheitern, und entwickeln flexible Lösungen mit Flexbox oder Grid. Die Diskussion über Breakpoints und Einheiten zeigt ihr Verständnis für responsive Prinzipien.
Diese Aktivitäten sind ein Ausgangspunkt. Die vollständige Mission ist das Erlebnis.
- Vollständiges Moderationsskript mit Lehrkraft-Dialogen
- Druckfertige Schülermaterialien, bereit für den Unterricht
- Differenzierungsstrategien für jeden Lerntyp
Vorsicht vor diesen Fehlvorstellungen
Häufige FehlvorstellungWährend der DevTools-Stationen beobachten viele Schüler, dass Webseiten sich automatisch anpassen, ohne speziellen Code.
Was Sie stattdessen lehren sollten
Zeigen Sie während der Station direkt, dass ohne Media Queries Layouts auf kleinen Bildschirmen überlappen oder Texte unlesbar werden. Lassen Sie die Schüler selbst feststellen, dass responsive Anpassungen expliziter CSS-Regeln bedürfen, indem sie die DevTools nutzen, um feste Breiten zu entfernen und die Auswirkungen zu vergleichen.
Häufige FehlvorstellungWährend des Geräte-Karussells denken manche, nur Bilder müssten skaliert werden, während Layouts gleich bleiben können.
Was Sie stattdessen lehren sollten
Fordern Sie die Schüler auf, beim Test mit realen Geräten die Menüleisten und Texteinstellungen zu prüfen. Zeigen Sie ihnen, wie starre Grids auf kleinen Bildschirmen versagen, und lassen Sie sie neue Layouts mit Flexbox oder Grid direkt am Gerät ausprobieren.
Häufige FehlvorstellungWährend der Breakpoint-Hunt wird oft behauptet, responsive Design mache Seiten langsamer.
Was Sie stattdessen lehren sollten
Nutzen Sie die Challenge, um Seiten mit und ohne responsive Anpassungen zu laden. Lassen Sie die Schüler messen, wie relative Einheiten wie vw oder rem sogar Ladezeiten optimieren, und diskutieren Sie, warum das so ist.
Ideen zur Lernstandserhebung
Nach der DevTools-Stationen bitten Sie die Schüler, eine bekannte Webseite zu analysieren und auf einem Zettel zu notieren: 1. Welche drei Elemente würden Sie für ein Smartphone anders gestalten? 2. Nennen Sie eine konkrete CSS-Media-Query-Regel für eines dieser Elemente.
Nach dem Geräte-Karussell zeigen Sie eine Webseite einmal auf einem großen Monitor und einmal auf einem Smartphone-Emulator. Fragen Sie: 'Was fällt Ihnen beim Wechsel der Bildschirmgröße auf? Beschreiben Sie zwei konkrete Unterschiede und erklären Sie, warum diese Anpassungen wichtig sind für die Nutzerfreundlichkeit.'
Während des Responsive Prototyps lassen Sie Kleingruppen ihre Layouts auf einem geteilten Bildschirm präsentieren. Die anderen Gruppen geben Feedback zu zwei Punkten: Welche responsive Technik funktioniert besonders gut? Wo könnte das Layout noch verbessert werden, um auf allen Geräten nutzbar zu sein?
Erweiterungen & Unterstützung
- Fordern Sie schnelle Schüler auf, eine eigene Webseite mit drei Breakpoints zu erstellen und diese mit GitHub Pages zu veröffentlichen.
- Unterstützen Sie Schüler mit Schwierigkeiten durch vorbereitete Code-Snippets, die sie in ihre Projekte einfügen können, um den Einstieg zu erleichtern.
- Vertiefen Sie mit fortgeschrittenen Schülern das Thema Performance: Lassen Sie sie die Ladezeiten responsiver und nicht-responsiver Seiten vergleichen und optimieren.
Schlüsselvokabular
| Responsive Webdesign | Eine Designphilosophie, bei der Webseiten so erstellt werden, dass sie sich automatisch an die Bildschirmgröße und Auflösung des Geräts anpassen, auf dem sie angezeigt werden. |
| CSS Media Queries | Ein CSS-Modul, das es ermöglicht, Inhalte basierend auf den Eigenschaften des ausgebenden Geräts, wie Bildschirmbreite, Höhe oder Ausrichtung, unterschiedlich zu gestalten. |
| Viewport | Der sichtbare Bereich einer Webseite auf dem Bildschirm eines Geräts. Responsive Design zielt darauf ab, den Inhalt optimal innerhalb dieses Viewports darzustellen. |
| Mobile First Design | Ein Ansatz im Webdesign, bei dem zuerst die Version für kleine Bildschirme (Mobilgeräte) entworfen und dann schrittweise für größere Bildschirme erweitert wird. |
| Flexbox (Flexible Box Layout) | Ein CSS-Layout-Modul, das eine effizientere Methode zur Anordnung, Ausrichtung und Verteilung von Elementen in einem Container bietet, auch wenn ihre Größe unbekannt oder dynamisch ist. |
Vorgeschlagene Methoden
Planungsvorlagen für Digitale Welten Gestalten: Informatik
Mehr in Web-Technologien: Eigene Inhalte gestalten
Das Internet und das World Wide Web
Die Schülerinnen und Schüler unterscheiden zwischen dem Internet als Infrastruktur und dem World Wide Web als Dienst.
2 methodologies
HTML: Die Struktur des Webs
Die Schülerinnen und Schüler lernen die grundlegende Syntax von HTML und erstellen einfache Webseiten mit Text und Überschriften.
2 methodologies
Bilder und Links in HTML
Die Schülerinnen und Schüler integrieren Bilder und Hyperlinks in ihre HTML-Dokumente.
2 methodologies
Listen und Tabellen in HTML
Die Schülerinnen und Schüler strukturieren Informationen mit geordneten und ungeordneten Listen sowie einfachen Tabellen.
2 methodologies
Einführung in CSS: Styling für das Web
Die Schülerinnen und Schüler lernen die Grundlagen von CSS zur visuellen Gestaltung von HTML-Elementen kennen.
2 methodologies
Bereit, Responsive Design: Anpassung an Bildschirmgrößen zu unterrichten?
Erstellen Sie eine vollständige Mission mit allem, was Sie brauchen
Mission erstellen