Informatik · Klasse 8

Ideen für aktives Lernen

Responsive Design: Anpassung an Bildschirmgrößen

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.

• KMK Bildungsstandards
• KMK: Sekundarstufe I - Strukturieren und Modellieren
• KMK: Sekundarstufe I - Wirkungen von Informatiksystemen

• 30–50 Min.
• Partnerarbeit → Ganze Klasse
• 4 Aktivitäten

Aktivität 01

• Museumsgang
• 35 Min. · Kleingruppen

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.

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.

Worauf zu achten ist

Geben Sie den Schülerinnen und Schülern eine Webseite (z.B. eine einfache selbst erstellte Seite oder eine bekannte Seite) und bitten Sie sie, auf einem Zettel zu notieren: 1. Welche drei Elemente auf der Seite würden Sie für ein Smartphone anders gestalten? 2. Nennen Sie eine CSS-Media-Query-Regel, die Sie dafür verwenden würden.

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Beziehungsfähigkeit
• Sozialbewusstsein

Aktivität 02

• Museumsgang
• 45 Min. · Kleingruppen

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.

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.

Worauf zu achten ist

Stellen Sie den Schülerinnen und Schülern eine Webseite auf einem großen Monitor und dann auf einem Handy-Emulator im Browser vor. Fragen Sie: 'Was fällt Ihnen beim Wechsel der Bildschirmgröße auf? Beschreiben Sie zwei Unterschiede in der Darstellung und erklären Sie kurz, warum diese Unterschiede wichtig sind.'

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Beziehungsfähigkeit
• Sozialbewusstsein

Aktivität 03

• Museumsgang
• 50 Min. · Partnerarbeit

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.

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.

Worauf zu achten ist

Lassen Sie Schülerinnen und Schüler in Kleingruppen ein einfaches responsives Layout mit Flexbox entwerfen. Jede Gruppe präsentiert ihr Layout auf einem geteilten Bildschirm (z.B. über einen Online-Editor). Die anderen Gruppen geben Feedback zu zwei Punkten: Was funktioniert gut im responsiven Verhalten? Wo könnte das Layout noch verbessert werden?

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Beziehungsfähigkeit
• Sozialbewusstsein

Aktivität 04

• Museumsgang
• 30 Min. · Ganze Klasse

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.

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.

Worauf zu achten ist

Geben Sie den Schülerinnen und Schülern eine Webseite (z.B. eine einfache selbst erstellte Seite oder eine bekannte Seite) und bitten Sie sie, auf einem Zettel zu notieren: 1. Welche drei Elemente auf der Seite würden Sie für ein Smartphone anders gestalten? 2. Nennen Sie eine CSS-Media-Query-Regel, die Sie dafür verwenden würden.

• Verstehen
• Anwenden
• Analysieren
• Erschaffen
• Beziehungsfähigkeit
• Sozialbewusstsein

Einige Hinweise zum Unterrichten dieser Einheit

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.

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.

---

Vorsicht vor diesen Fehlvorstellungen

• Während der DevTools-Stationen beobachten viele Schüler, dass Webseiten sich automatisch anpassen, ohne speziellen Code.

  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.

• Während des Geräte-Karussells denken manche, nur Bilder müssten skaliert werden, während Layouts gleich bleiben können.

  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.

• Während der Breakpoint-Hunt wird oft behauptet, responsive Design mache Seiten langsamer.

  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.

---

In dieser Übersicht verwendete Methoden

• Museumsgang