css mit Adi Prinz

Ziele des responsiven Webdesigns

Responsives Webdesign soll unabhängig von der Bildschirmgröße ein möglichst gutes Benutzererlebnis ermöglichen.

• Texte sollen ohne Vergrößerung gut lesbar sein.
• Inhalte sollen nicht seitlich aus dem sichtbaren Bereich herausragen.
• Navigationen und Bedienelemente sollen leicht erreichbar und bedienbar bleiben.
• Bilder, Videos und andere Medien sollen sich an den verfügbaren Platz anpassen.
• Layoutbereiche sollen je nach Platz nebeneinander oder untereinander dargestellt werden.
• Die wichtigsten Inhalte und Funktionen sollen auf allen Geräten verfügbar bleiben.

Grundlagen eines responsiven Designs

Responsive Gestaltungsebenen

Bei einem responsiven Design müssen mehrere Ebenen gemeinsam berücksichtigt werden.

Breakpoints nach dem Inhalt festlegen

Ein Breakpoint ist eine Stelle, an der das Layout verändert wird. Breakpoints sollten nicht ausschließlich nach bekannten Gerätebreiten ausgewählt werden. Entscheidend ist, wann das vorhandene Layout nicht mehr ausreichend Platz besitzt.

Ein Breakpoint kann beispielsweise notwendig werden, wenn:

• eine Navigation nicht mehr in eine Zeile passt,
• Textspalten zu schmal oder zu breit werden,
• Karten nicht mehr sinnvoll nebeneinander dargestellt werden können,
• Bedienelemente zu eng beieinanderliegen,
• oder wichtige Inhalte unübersichtlich werden.

Responsive Design und Barrierefreiheit

Responsives Webdesign betrifft nicht nur die optische Darstellung. Die Seite muss auch bei vergrößerter Schrift, unterschiedlichen Eingabemethoden und individuellen Benutzereinstellungen bedienbar bleiben.

• Inhalte dürfen bei Textvergrößerung nicht abgeschnitten werden.
• Bedienelemente müssen ausreichend groß sein und genügend Abstand besitzen.
• Die Reihenfolge der Inhalte muss auch bei verändertem Layout verständlich bleiben.
• Funktionen dürfen nicht ausschließlich von Hover-Effekten abhängig sein.
• Navigationen und Formulare müssen mit der Tastatur bedienbar bleiben.
• Benutzerwünsche wie reduzierte Bewegung sollten berücksichtigt werden.

Typischer Arbeitsablauf

1. Inhalte und semantische HTML-Struktur festlegen.
2. Ein übersichtliches Basislayout für kleine verfügbare Breiten erstellen.
3. Flexible Größen für Layout, Typografie und Medien verwenden.
4. Das Layout langsam vergrößern und problematische Stellen beobachten.
5. Nur dort Breakpoints ergänzen, wo der Inhalt eine Anpassung benötigt.
6. Die Seite mit unterschiedlichen Bildschirmgrößen, Zoomstufen und Eingabemethoden testen.

Das Viewport-Meta-Element

Das Viewport-Meta-Element wird im <head> des HTML-Dokuments eingefügt:

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

In einer vollständigen HTML-Datei befindet es sich beispielsweise an dieser Stelle:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8">

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

  <title>Responsive Webseite</title>
</head>
<body>
  <h1>Responsive Webseite</h1>
</body>
</html>
    

Bedeutung der Angaben

Layout-Viewport und visueller Viewport

Bei mobilen Geräten kann zwischen zwei Viewport-Bereichen unterschieden werden.

Für die meisten responsiven Layouts ist vor allem der Layout-Viewport entscheidend. Der visuelle Viewport wird insbesondere bei komplexen Benutzeroberflächen und eingeblendeten Bildschirmtastaturen wichtig.

Zoomen nicht einschränken

Benutzer müssen eine Webseite vergrößern können. Deshalb sollten Angaben, die das Zoomen verhindern oder stark einschränken, vermieden werden.

Ungünstige Einstellung

<meta
  name="viewport"
  content="
    width=device-width,
    initial-scale=1,
    maximum-scale=1,
    user-scalable=no
  "
>
    

Besonders die folgenden Angaben können die Vergrößerung einschränken:

• user-scalable=no
• maximum-scale=1

Viewport-Einheiten

CSS stellt Einheiten bereit, die sich auf die Größe des Viewports beziehen.

.hero {
  min-height: 100vh;
}

h1 {
  font-size: clamp(2rem, 5vw, 4rem);
}
    

Im Beispiel orientiert sich die Mindesthöhe des Hero-Bereichs an der Höhe des Viewports. Die Überschrift wächst abhängig von der Viewport-Breite, bleibt aber innerhalb der mit clamp() festgelegten Grenzen.

Dynamische Viewport-Einheiten

Auf mobilen Geräten können Browserleisten ein- und ausgeblendet werden. Dadurch kann sich die tatsächlich verfügbare Höhe während der Nutzung verändern. Für diesen Anwendungsfall stehen zusätzliche Viewport-Einheiten zur Verfügung.

.fullscreen-section {
  min-height: 100vh;
  min-height: 100dvh;
}
    

Die erste Deklaration dient als Rückfalllösung. Browser, die dvh unterstützen, verwenden anschließend die dynamische Viewport-Höhe.

Breite Inhalte begrenzen

Ein responsives Layout soll den verfügbaren Platz nutzen. Auf sehr großen Bildschirmen sollten Textbereiche jedoch nicht unbegrenzt breit werden.

.page-wrapper {
  width: min(100% - 2rem, 75rem);
  margin-inline: auto;
}
    

• 100% - 2rem lässt insgesamt zwei Rem Abstand zu den Seitenrändern.
• 75rem begrenzt die maximale Breite des Inhalts.
• margin-inline: auto zentriert den Bereich horizontal.

Zusammenfassung

• Der Viewport ist der Bereich, für den der Browser das Layout berechnet und darstellt.
• Das Viewport-Meta-Element gehört in den <head> jeder responsiven Webseite.
• width=device-width verwendet die Gerätebreite als Grundlage des Layout-Viewports.
• initial-scale=1 legt die anfängliche Skalierung fest.
• Die Zoomfunktion darf nicht durch ungeeignete Viewport-Angaben eingeschränkt werden.
• Dynamische Einheiten wie dvh berücksichtigen veränderliche Browseroberflächen auf mobilen Geräten.