Für jedes Endgerät

IT 11.7 – Webdesign · Einheit 7 · Café-Projekt Schritt 7

Lernziele

Du kannst erklären, warum Webseiten für verschiedene Endgeräte optimiert werden, und die Rolle des viewport beschreiben.
Du kannst Seiten mit flexiblen Breiten und flexiblen Bildern gestalten.
Du kannst Media Queries lesen und schreiben und das Vorgehen Mobile First erläutern.
Du kannst eine Seite für verschiedene Geräte testen und Probleme beheben.

Rückblick

1. Wie breit ist eine Box mit width 200px, padding 10px und border 2px, wenn box-sizing border-box gilt?

200 Pixel. Mit border-box gilt width bis einschließlich Rahmen.

2. Welches Kontrastverhältnis braucht normaler Text mindestens?

4,5 : 1 (großer Text 3 : 1).

3. Was bewirkt flex-wrap: wrap?

Passen die Kinder eines Flex-Behälters nicht in eine Reihe, brechen sie in die nächste Zeile um.

Das Café auf dem Handy

Die meisten Schülerinnen und Schüler werden die Café-Seite auf dem Handy öffnen, in der Pause, mit einer Hand. Ein erster Test zeigt: Die drei Kärtchen werden schmal, die Speisekarte ragt über den Rand, man muss seitlich wischen. Auf einem großen Bildschirm im Lehrerzimmer dagegen sieht alles gut aus.

Muss man für jedes Gerät eine eigene Seite bauen?

Erkunden: Eine Seite auf drei Geräten

Bevor du weiterliest: Bearbeite die Erkundungen. Die Erklärungen weiter unten helfen dir erst danach.

Erkundung 1: Starre Breiten mittel

Stelle die Vorschau mit den Knöpfen über der Vorschau nacheinander auf „Handy“, „Tablet“ und „Breit“.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Beschreibe, was auf dem Handy passiert. Woran liegt es?

b) Ändere bei .seite die Zeile width: 700px; in max-width: 700px;. Beschreibe, was sich ändert und was nicht.

c) Finde eine Angabe für .bild, mit der das Bild höchstens so breit wird wie der verfügbare Platz.

Tipp 1

Zu c): Was du bei .seite gemacht hast, geht auch hier.

Lösung

Erkundung 2: Eine Regel nur für schmale Bildschirme mittel

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

a) Schalte zwischen „Handy“, „Tablet“ und „Breit“ um. Beschreibe, wie sich die Anordnung ändert.

b) Erkläre in eigenen Worten, was die Zeilen ab @media bewirken.

c) Ändere 500px in 900px. Beschreibe, was jetzt beim Tablet passiert.

Lösung

Warum für verschiedene Endgeräte optimieren?

Vergleicht eure Ergebnisse. Webseiten werden auf sehr verschiedenen Geräten angesehen: Handys mit etwa 360 bis 430 Pixeln Breite, Tablets, Laptops, große Bildschirme, manchmal sogar Fernseher. Dazu kommen Unterschiede in der Bedienung (Finger statt Maus) und in der Umgebung (unterwegs, in der Sonne, mit langsamer Verbindung).

Statt für jedes Gerät eine eigene Seite zu bauen, passt sich eine Seite an. Das nennt man responsives Webdesign (responsive: reagierend). Der Inhalt bleibt gleich, nur die Gestaltung ändert sich mit der Breite. Das funktioniert, weil Inhalt (HTML) und Design (CSS) getrennt sind.

Der viewport

Handys tun ohne Angabe so, als wären sie etwa 980 Pixel breit, und verkleinern die Seite dann. Alles wird winzig. Die Zeile aus Einheit 1 im head verhindert das:

<meta name="viewport" content="width=device-width, initial-scale=1">

Sie sagt: Die Breite des Anzeigefensters (viewport) ist die echte Breite des Geräts, ohne Verkleinerung.

Flexibel statt starr

statt	besser	Grund
`width: 960px`	`max-width: 60rem`	darf schmaler werden
feste Bildgröße	`img { max-width: 100%; height: auto; }`	Bilder schrumpfen mit, ohne Verzerrung
Spalten mit festen Pixeln	Flexbox mit `flex: 1`, `flex-wrap`	Spalten teilen sich den Platz und brechen um
Schriften in `px`	Schriften in `rem`	wachsen mit der Einstellung des Browsers

Breite Tabellen lassen sich nicht beliebig zusammendrücken. Man setzt sie in einen Behälter, der seitlich verschiebbar ist:

<div class="tabelle-rahmen">
  <table> … </table>
</div>

.tabelle-rahmen {
  overflow-x: auto;
}

Media Queries

Mit einer Media Query gelten Regeln nur unter bestimmten Bedingungen, meist abhängig von der Breite:

@media (min-width: 40rem) {
  .karten {
    flex-direction: row;
  }
}

Bedingung	gilt, wenn das Fenster …
`(max-width: 40rem)`	höchstens 40 rem breit ist (schmale Geräte)
`(min-width: 40rem)`	mindestens 40 rem breit ist (breite Geräte)

Die Grenzwerte heißen Breakpoints. Man legt sie dort fest, wo der Inhalt es braucht, also wo das Layout zu eng oder zu leer wird, nicht nach bestimmten Gerätemodellen.

Weitere Bedingungen: @media print für den Druck, @media (prefers-color-scheme: dark) für ein dunkles Design, @media (prefers-reduced-motion: reduce) für weniger Bewegung.

Mit dem Finger bedienen

Auf dem Handy gibt es keine Maus und kein :hover. Wichtig ist deshalb:

Ziele wie Links und Knöpfe müssen groß genug sein und genug Abstand haben. Die WCAG 2.2 verlangen mindestens 24 × 24 Pixel (Stufe AA), viele empfehlen etwa 44 × 44 Pixel.
Nichts darf nur beim Darüberfahren mit der Maus erscheinen.
Passende Eingabetypen (email, tel, number) zeigen die passende Tastatur (Einheit 3).

Testen

In den Entwicklerwerkzeugen (F12) gibt es eine Geräteansicht: in Chromium-Browsern das Handy-Symbol oder Strg + Umschalt + M, in Firefox Strg + Umschalt + M für die „Bildschirmgrößen“. Dort wählst du Gerätebreiten oder ziehst das Fenster schmaler. Ein Test auf einem echten Handy ersetzt das aber nicht.

Café-Projekt: Schritt 7

Café-Projekt, Schritt 7: Die Handy-Ansicht mittel

Teste deine Café-Seite in der Geräteansicht (360 Pixel breit) und sorge dafür, dass sie auf Handy, Tablet und großem Bildschirm gut aussieht.

Prüfe, dass alle drei Seiten den viewport im head haben.
Bilder: max-width: 100% und height: auto.
Speisekarte: Setze die Tabelle in einen seitlich verschiebbaren Rahmen.
Navigation: Sie darf umbrechen. Auf schmalen Bildschirmen sollen die Links genug Abstand zum Antippen haben.
Kopfbereich: Auf schmalen Bildschirmen ist die h1 kleiner (zum Beispiel 1.5rem), ab 40rem Breite größer (2.25rem). Gehe Mobile First vor.
Kärtchen: Auf dem Handy untereinander, ab 40rem nebeneinander.
Prüfe am Ende auf einem echten Handy, falls möglich.

Tipp 1

Mobile First: Schreibe zuerst die Regel für das Handy, dann @media (min-width: 40rem) { … } für breitere Bildschirme.

Tipp 2

Zu 6.: Wenn die Kärtchen in Schritt 5 schon mit flex-wrap und min-width umbrechen, klappt das vielleicht schon. Prüfe es in der Geräteansicht.

Stand nach Schritt 7

Aufgaben

Aufgabe 1: Code lesen – welche Regel gilt? leicht

nav {
  background-color: #e8d3b9;
}

@media (min-width: 600px) {
  nav {
    background-color: #874026;
  }
}

@media (min-width: 1000px) {
  nav {
    background-color: #2b2522;
  }
}

Gib die Hintergrundfarbe von nav bei einer Fensterbreite von 360, 768 und 1280 Pixeln an. Begründe.

Lösung

Aufgabe 2: Zwei Spalten, eine Spalte mittel

Ergänze das CSS so, dass Text und Kasten auf breiten Bildschirmen nebeneinander und auf schmalen (höchstens 500 Pixel) untereinander stehen. Teste mit den Knöpfen und lass dann prüfen.

Übungsbereich im Browser: Dein Code läuft abgeschottet in der Vorschau. Es wird nichts gespeichert. Sichere deine Arbeit mit „Herunterladen“.

Tab rückt ein. Mit Esc und dann Tab verlässt du das Feld.

Vorschau

Öffnen

Selbstkontrolle – keine Bewertung.

Lösung

Aufgabe 3: Warum wischt man seitlich? mittel

Eine Vereinsseite lässt sich auf dem Handy seitlich verschieben. Im Code findest du:

<head>
  <meta charset="utf-8">
  <title>TSV Beispielstadt</title>
</head>
…
<img src="mannschaft.jpg" width="1200" height="800" alt="…">
<div class="inhalt"> … </div>

.inhalt {
  width: 1000px;
  margin: 0 auto;
}

Erläutere drei Ursachen für die Probleme auf dem Handy und gib jeweils die Verbesserung an.

Lösung

Aufgabe 4: Mobile First mittel

Dieses CSS ist „Desktop First“ geschrieben. Schreibe es nach dem Prinzip Mobile First um, sodass es genau dasselbe bewirkt. Erläutere den Vorteil.

.galerie {
  display: flex;
  gap: 1rem;
}

.galerie img {
  width: 33%;
}

@media (max-width: 40rem) {
  .galerie {
    flex-direction: column;
  }
  .galerie img {
    width: 100%;
  }
}

Tipp 1

Die Regeln aus der Media Query werden zu den Grundregeln, die bisherigen Grundregeln wandern in eine Media Query mit min-width.

Lösung

Aufgabe 5: Eine eigene Handy-Seite? schwer

Ein Fahrradladen überlegt, neben seiner Seite www.rad-laden.example eine zweite, eigene Seite m.rad-laden.example nur für Handys zu bauen, statt die vorhandene Seite responsiv zu gestalten.

Beurteile diesen Vorschlag. Gehe dabei auf Aufwand, Inhalte, Geräte und Barrierefreiheit ein.

Tipp 1

Was passiert, wenn sich die Öffnungszeiten ändern? Und welche Seite bekommt ein Tablet?

Lösung (Beispiel)

Zusatzaufgabe: Drucken und dunkles Design schwer Zusatz

a) Sorge dafür, dass beim Drucken der Speisekarte Kopfbereich und Navigation weggelassen werden und der Text schwarz auf weiß erscheint. Teste mit der Druckvorschau des Browsers.

b) Recherchiere prefers-color-scheme und gib der Café-Seite ein dunkles Design, wenn das Gerät auf dunkel gestellt ist. Prüfe die Kontraste.

Lösung (Beispiel)

Zusammenfassung

Seiten werden auf vielen Geräten genutzt. Responsives Webdesign passt eine Seite mit CSS an jede Breite an.
Der viewport im head verhindert, dass Handys die Seite verkleinert darstellen.
Flexibel statt starr: max-width statt width, img { max-width: 100%; height: auto; }, Flexbox mit Umbruch, Schriften in rem, breite Tabellen in einem verschiebbaren Rahmen.
Media Queries (@media (min-width: …) bzw. max-width) gelten nur ab bzw. bis zu einer Breite. Die Grenzen heißen Breakpoints.
Mobile First: zuerst für das Handy, dann mit min-width für breitere Bildschirme ergänzen.
Für Finger: große Ziele, nichts nur bei :hover. Testen in der Geräteansicht und auf echten Geräten.

Selbstcheck

Geh die Fragen ehrlich durch. Wenn du bei einer unsicher bist, lies den verlinkten Abschnitt noch einmal oder bearbeite die passende Aufgabe.

Kannst du erklären, warum man für verschiedene Endgeräte optimiert, und den viewport beschreiben? → Warum optimieren?, Der viewport, Aufgabe 5
Kannst du mit flexiblen Breiten und Bildern gestalten? → Erkundung 1, Flexibel statt starr, Aufgabe 3
Kannst du Media Queries lesen und schreiben und Mobile First erläutern? → Erkundung 2, Media Queries, Aufgabe 1, Aufgabe 2, Aufgabe 4
Kannst du eine Seite testen und Probleme beheben? → Testen, Café-Projekt

Wortspeicher

Begriff	Bedeutung in einfachen Worten
Endgerät	Gerät, auf dem man die Seite ansieht: Handy, Tablet, Laptop …
responsives Webdesign	eine Seite passt ihre Gestaltung an jede Breite an
viewport	Anzeigefenster des Browsers; die viewport-Angabe stellt die echte Gerätebreite ein
Media Query	Bedingung, unter der bestimmte CSS-Regeln gelten, zum Beispiel ab einer Breite
Breakpoint	Breite, ab der sich das Layout ändert
Mobile First	zuerst für das Handy gestalten, dann für breitere Bildschirme ergänzen
max-width: 100%	ein Element wird höchstens so breit wie sein Behälter
Geräteansicht	Werkzeug im Browser, das verschiedene Bildschirmbreiten nachahmt

Quellen

Hessisches Kultusministerium: Kerncurriculum Fachoberschule, Fachrichtung Technik, Schwerpunkt Informationstechnik, Themenfeld 11.7 Webdesign, „Webseitenoptimierung für verschiedene Endgeräte“ (Stand November 2022).
CSS nach den Spezifikationen des W3C (Media Queries Level 4). Mindestgröße von Zielen nach WCAG 2.2, Erfolgskriterium 2.5.8 (Stufe AA).
Texte, Beispiele, Aufgaben und Code-Beispiele sind selbst erstellt.