Exkurs: Responsive Design

Zielsetzung

Experimente

Hier siehst du eine Beispielseite des Projekts mit dem Design in der CSS-Datei (links) und dem Inhalt in der HTML-Datei (Links).

Aufgabe 1:

(a) Wähle rechts oben unter dem Reiter Responsive Design verschiedene Breiten aus und schaue dir die Webseite auch speziell für Smartphones an.

(b) 💬 Spreche mit deinem Nachbar / deiner Nachbarin über mögliche alternative Darstellungsformen am Smartphone und über Nachteile der aktuellen Darstellungsform.

(c) Wähle rechts neben der Überschrift "Quelltext CSS" die CSS Datei styles-angepasst.css aus und wechsle erneut die Breite des Fensters. Beobachte die Änderungen.

Entwicklertools

Moderne Browser enthalten sogenannte Entwickler-Tools, mit denen man die „Vorderseite“ und „Rückseite“ gleichzeitig betrachten kann. Die Tastenkombination „Strg.“ + „Umschalt“ + „I“ oder Rechtsklick + „Untersuchen“ öffnet in der Regel die Entwickler-Tools.

Aufgabe 2

Lade das Beispiel herunter, rufe die HTML-Datei im Browser auf und öffne die Entwickler-Tools.

In der Regel gibt es dort einen Reiter zum Testen der Bildschirmgrößen einer Anzeige (hier das Smartphone und das Tablet ganz rechts), wähle diesen Reiter aus:

(a) Teste die Ansicht bei verschiedenen Bildschirmgrößen.

(b) Verändere in der HTML-Datei in Zeile 6 die Referenz zur CSS-Datei zu styles-angepasst.css und teste erneut verschiedene Bildschirmgrößen.

(c) ✏️️ In der CSS-Datei styles-angepasst.css findest du verschiedene Medienabfragen @media ....
Analysiere durch Ausprobieren der einzelnen Anzeigen im Browser die Medienabfragen und notiere ihre Bedeutung.

Medienabfragen / Media Queries

Mit Medienabfragen kann man in CSS unterschiedliche Bedingungen für verschiedene Medien und Anzeigeformate festlegen.

Beispiel:

			@media (width: 60em) {/*Breite der Anzeige entspricht genau 60em*/}
		@media (min-width: 300px) {/*Breite der Anzeige entspricht mindestens 300 Pixeln*/}
		@media (orientation: portrait) {/*Breite der Anzeige ist im Hochformat*/}
		@media (orientation: portrait) and (width < 40em) {/*Hochformat und Breite kleiner als 40em*/}
	
	

Beachte: Relative Angaben, wie das Maß der verwendeten Schriftgröße em bieten sich eher an, da man z.B. bei Pixel bei hochauflösenden Bildschirmen aus mehreren Gerätepixeln bestehen können.

Weitere Informationen zu Medienabfragen findest du auch bei Self-HTML.

Aufgabe 3

Mache die Seiten deines Projektes responsive, indem du sie an verschiedene Anzeigen anpasst.