Informatik · Klasse 8 · Web-Technologien: Eigene Inhalte gestalten · 2. Halbjahr

Responsive Design: Anpassung an Bildschirmgrößen

Die Schülerinnen und Schüler erhalten einen Einblick in die Notwendigkeit von responsivem Webdesign.

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

Über dieses Thema

Responsive Design stellt sicher, dass Webseiten auf allen Geräten, von großen Desktop-Monitoren bis zu kleinen Smartphone-Bildschirmen, optimal dargestellt werden. Schülerinnen und Schüler der Klasse 8 verstehen, warum feste Pixel-Maße zu überfüllten oder unlesbaren Layouts auf Mobilgeräten führen. Sie lernen Techniken wie CSS-Media-Queries, flexible Box-Modelle mit Flexbox oder Grid und relative Einheiten wie em, rem oder vw. Praktisch analysieren sie reale Webseiten und identifizieren Anpassungsbedarf.

Dieses Thema greift die KMK-Standards für die Sekundarstufe I auf: 'Strukturieren und Modellieren' durch die Erstellung anpassbarer Layout-Modelle und 'Wirkungen von Informatiksystemen' durch die Bewertung von Nutzererfahrungen. Schüler beurteilen, wie responsive Designs Barrierefreiheit fördern, Ladezeiten optimieren und die Inhaltszugänglichkeit für alle steigern. Es schult Problemlösung und systemisches Denken.

Aktives Lernen passt hervorragend, weil Schüler ihre eigenen Seiten auf Emulatoren oder Klassengeräten testen und iterativ anpassen. Solche Experimente machen abstrakte Regeln konkret, fördern Teamarbeit beim Debuggen und verankern das Wissen durch unmittelbares Feedback.

Leitfragen

1. Erklären Sie, warum Webseiten auf verschiedenen Geräten unterschiedlich aussehen müssen.
2. Analysieren Sie die Herausforderungen bei der Gestaltung von Webseiten für mobile Geräte.
3. Beurteilen Sie die Bedeutung von responsivem Design für die Benutzerfreundlichkeit.

Lernziele

• Analysieren Sie die Auswirkungen unterschiedlicher Bildschirmgrößen auf das Layout und die Lesbarkeit von Webseiten.
• Erklären Sie die Funktionsweise von CSS Media Queries zur Anpassung von Webseiten an verschiedene Geräte.
• Entwerfen Sie ein einfaches responsives Layout für eine Webseite unter Verwendung von Flexbox oder Grid.
• Bewerten Sie die Benutzerfreundlichkeit einer Webseite auf verschiedenen Geräten und identifizieren Sie Verbesserungspotenziale im responsiven Design.
• Vergleichen Sie die Darstellung einer Webseite auf einem Desktop-Browser und einem mobilen Emulator.

Bevor es losgeht

Grundlagen von HTML und CSS

Warum: Schüler müssen die grundlegende Strukturierung von Webseiten mit HTML und das Styling mit CSS beherrschen, um responsive Techniken anwenden zu können.

Grundlegende Layout-Elemente in CSS

Warum: Kenntnisse über Box-Modelle, Abstände (margin, padding) und einfache Positionierung sind notwendig, um die Funktionsweise von Flexbox oder Grid zu verstehen.

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.

Vorsicht vor diesen Fehlvorstellungen

Häufige Fehlvorstellung

Webseiten passen sich automatisch an alle Bildschirme an, ohne speziellen Code.

Was Sie stattdessen lehren sollten

Responsive Design erfordert explizite CSS-Regeln wie Media Queries. Aktive Tests mit DevTools zeigen Schülern den Unterschied sofort, Peer-Diskussionen klären, warum feste Breiten scheitern, und iterative Anpassungen festigen das Verständnis.

Häufige Fehlvorstellung

Nur Bilder müssen skaliert werden, Layout bleibt gleich.

Was Sie stattdessen lehren sollten

Gesamte Strukturen wie Menüs und Texte brauchen Flexibilität. Hands-on-Experimente mit realen Geräten machen sichtbar, wie starre Grids auf Mobile versagen, und fördern Modellierung neuer Layouts.

Häufige Fehlvorstellung

Responsive Design macht Seiten langsamer.

Was Sie stattdessen lehren sollten

Moderne Techniken wie relative Einheiten optimieren sogar Ladezeiten. Gruppenvergleiche von performanten vs. nicht-responsiven Seiten beweisen den Vorteil und motivieren zu Best Practices.

Ideen für aktives Lernen

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.

35 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.

45 Min.·Kleingruppen

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.

50 Min.·Partnerarbeit

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.

30 Min.·Ganze Klasse

Bezüge zur Lebenswelt

• Webentwickler bei großen Online-Händlern wie Zalando passen die Darstellung von Produktseiten und Warenkörben dynamisch an, damit Kunden sowohl am PC als auch auf dem Smartphone bequem einkaufen können.
• Nachrichtenportale wie Spiegel Online oder Süddeutsche Zeitung nutzen responsive Design, um sicherzustellen, dass ihre Artikel und Bilder auf Tablets, E-Readern und Smartphones gleichermaßen gut lesbar sind und die Nutzererfahrung nicht beeinträchtigt wird.
• Agenturen für digitale Medien gestalten Webseiten für Unternehmen jeder Größe so, dass diese auf allen Geräten professionell und benutzerfreundlich erscheinen, was für die Markenwahrnehmung und Kundenbindung entscheidend ist.

Ideen zur Lernstandserhebung

Lernstandskontrolle

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.

Kurze Überprüfung

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.'

Gegenseitige Bewertung

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?

Häufig gestellte Fragen

Warum ist responsive Design für Webseiten wichtig?

Responsive Design sorgt dafür, dass Inhalte auf jedem Gerät lesbar und bedienbar sind, was die Benutzerfreundlichkeit steigert. In Deutschland nutzen über 80 Prozent der Nutzer mobile Geräte, feste Layouts führen zu Frust und hohen Absprungraten. Schüler lernen, dass es Barrierefreiheit fördert und Suchmaschinen-Rankings verbessert, was reale Wirkungen von Informatik verdeutlicht.

Was sind CSS-Media-Queries?

Media-Queries sind CSS-Regeln, die Inhalte je nach Bildschirmgröße ändern, z. B. '@media (max-width: 600px) { ... }'. Sie ermöglichen Breakpoints für Mobile, Tablet und Desktop. Schüler üben, sie einzubauen, um Layouts umzustellen, was Modellierungstraining bietet und schnelle Anpassungen ermöglicht.

Wie testet man responsive Design?

Nutzen Sie Browser-DevTools zum Simulieren von Geräten oder testen Sie auf realen Smartphones/Tablets. Überprüfen Sie Zoom, Scrollen und Touch-Elemente. Schüler erstellen Checklisten für Lesbarkeit und Navigation, was systematische Analyse schult und Probleme früh erkennt.

Wie hilft aktives Lernen beim Verständnis von responsive Design?

Aktives Lernen macht Konzepte greifbar: Schüler bauen und testen eigene Seiten auf verschiedenen Geräten, debuggen in Gruppen und iterieren. Das schafft echtes Problembewusstsein, stärkt Teamfähigkeiten und verankert Wissen besser als reine Theorie. Solche Ansätze passen zum KMK-Fokus auf Modellieren und erhöhen die Motivation spürbar.