Responsives Webdesign – Grundlagen

Websites erstellen, die auf die Anforderungen und Funktionen des jeweiligen Geräts abgestimmt sind

Die Nutzung von Mobilgeräten zum Surfen im Internet nimmt in rasantem Tempo zu, und diese Geräte sind oft durch die Bildschirmgröße beschränkt und erfordern eine andere Herangehensweise bei der Anordnung von Inhalten auf dem Bildschirm.

Responsives Webdesign wurde ursprünglich von Ethan Marcotte in A List Apart definiert und entspricht den Anforderungen der Nutzer und der von ihnen verwendeten Geräte. Das Layout ändert sich je nach Größe und Funktionen des Geräts. Auf einem Smartphone wird der Inhalt beispielsweise in einer einspaltigen Ansicht angezeigt, auf einem Tablet dagegen möglicherweise in zwei Spalten.

In diesem Video wechselt das Design von einem schmalen zu einem breiten Darstellungsbereich, je nachdem, wie viel Platz auf dem Bildschirm verfügbar ist.

Smartphones, Phablets, Tablets, Desktop-Computer, Spielekonsolen, Fernseher und sogar Wearables bieten eine Vielzahl unterschiedlicher Bildschirmgrößen. Bildschirmgrößen ändern sich ständig. Daher ist es wichtig, dass sich Ihre Website an jede Bildschirmgröße anpassen kann, sowohl heute als auch in Zukunft. Darüber hinaus verfügen Geräte über unterschiedliche Funktionen, mit denen wir interagieren. Beispielsweise nutzen einige Ihrer Besucher einen Touchscreen. Beim modernen responsiven Design werden all diese Aspekte berücksichtigt, um die User Experience für alle zu optimieren.

Darstellungsbereich festlegen

Seiten, die für verschiedene Geräte optimiert sind, müssen ein Meta-Darstellungsbereich-Tag im Header des Dokuments enthalten. Ein Meta-Darstellungsbereich-Tag gibt dem Browser Anweisungen zum Steuern der Abmessungen und Skalierung der Seite.

Um eine optimale Leistung zu erzielen, rendern mobile Browser die Seite in einer Desktop-Bildschirmbreite (normalerweise etwa 980px, was sich jedoch je nach Gerät unterscheidet). Dann versuchen wir, die Darstellung der Inhalte zu verbessern, indem du die Schriftgröße erhöhst und den Inhalt an den Bildschirm anpasst. Das bedeutet, dass Schriftgrößen für Nutzer uneinheitlich wirken können, da sie möglicherweise doppeltippen oder die Finger zusammenziehen müssen, um den Inhalt zu sehen und mit ihm zu interagieren.

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <meta name="viewport" content="width=device-width, initial-scale=1">
    …
  </head>
  …

Bei Verwendung des Meta-Darstellungsbereichs width=device-width wird die Seite angewiesen, die Breite des Bildschirms in geräteunabhängigen Pixeln anzupassen. Ein geräte- oder dichteunabhängiges Pixel ist eine Darstellung eines einzelnen Pixels, das auf einem Bildschirm mit hoher Dichte aus vielen physischen Pixeln bestehen kann. Dadurch kann die Seite Inhalte an verschiedene Bildschirmgrößen anpassen, unabhängig davon, ob sie auf einem kleinen Mobiltelefon oder einem großen Desktopmonitor gerendert werden.

Screenshot einer Seite mit stark herausgezoomtem Text, der schwer zu lesen ist.
Ein Beispiel dafür, wie die Seite auf einem Gerät ohne das Meta-Tag für den Darstellungsbereich geladen wird. Sieh dir dieses Beispiel auf Glitch an.
Screenshot derselben Seite mit dem Text in einer lesbaren Größe.
Ein Beispiel dafür, wie die Seite auf einem Gerät mit dem Darstellungsbereich-Meta-Tag geladen wird. Sieh dir dieses Beispiel auf Glitch an.

In einigen Browsern wird die Seitenbreite beim Drehen ins Querformat konstant gehalten. Sie zoomen und nicht an die Größe des Bildschirms anpassen. Durch Hinzufügen des Werts initial-scale=1 wird Browser angewiesen, eine 1:1-Beziehung zwischen CSS-Pixeln und geräteunabhängigen Pixeln unabhängig von der Geräteausrichtung herzustellen. So kann die Seite die gesamte Breite des Querformats nutzen.

Die Lighthouse-Prüfung Hat kein <meta name="viewport">-Tag mit width oder initial-scale kann Ihnen helfen, die Überprüfung zu automatisieren, mit der Sie sicherstellen, dass Ihre HTML-Dokumente das Meta-Tag für den Darstellungsbereich korrekt verwenden.

Barrierefreien Darstellungsbereich sicherstellen

Neben dem Festlegen von initial-scale können Sie auch die folgenden Attribute für den Darstellungsbereich festlegen:

  • minimum-scale
  • maximum-scale
  • user-scalable

Wenn sie konfiguriert sind, kann der Nutzer den Darstellungsbereich möglicherweise nicht vergrößern, was zu Problemen mit der Barrierefreiheit führen kann. Daher raten wir davon ab, diese Attribute zu verwenden.

Inhalte an den Darstellungsbereich anpassen

Sowohl auf Computern als auch auf Mobilgeräten sind Nutzer daran gewöhnt, vertikal, aber nicht horizontal auf Websites zu scrollen. Wenn sie also horizontal scrollen oder herauszoomen müssen, um die gesamte Seite zu sehen, beeinträchtigt dies die Nutzerfreundlichkeit.

Wenn Sie eine mobile Website mit einem Meta-Darstellungsbereich-Tag entwickeln, kann es leicht passieren, dass versehentlich Seiteninhalte erstellt werden, die nicht ganz in den angegebenen Darstellungsbereich passen. So kann es z. B. passieren, dass ein Bild, das mit einer breiteren Breite als der Darstellungsbereich angezeigt wird, horizontal scrollt. Sie sollten diese Inhalte an die Breite des Darstellungsbereichs anpassen, sodass der Nutzer nicht horizontal scrollen muss.

Die Größe des Inhalts hat nicht die richtige Größe für den Darstellungsbereich In der Lighthouse-Prüfung können Sie das Erkennen von überlaufenden Inhalten automatisieren.

Bilder

Ein Bild hat feste Abmessungen. Wenn es größer als der Darstellungsbereich ist, erscheint eine Bildlaufleiste. Eine gängige Methode zur Lösung dieses Problems besteht darin, allen Bildern einen max-width von 100% zuzuweisen. Dadurch wird das Bild verkleinert, damit es in den verfügbaren Platz passt, sollte der Darstellungsbereich kleiner als das Bild sein. Da max-width und nicht width den Wert 100% haben, wird das Bild nicht über seine natürliche Größe gestreckt. Im Allgemeinen ist es bedenkenlos, folgende Elemente in Ihr Stylesheet aufzunehmen, damit es nie Probleme mit Bildern gibt, die eine Bildlaufleiste verursachen.

img {
  max-width: 100%;
  display: block;
}

Dem img-Element die Abmessungen des Bildes hinzufügen

Bei Verwendung von max-width: 100% überschreiben Sie die natürlichen Abmessungen des Bilds. Sie sollten aber trotzdem die Attribute width und height im <img>-Tag verwenden. Das liegt daran, dass moderne Browser diese Informationen verwenden, um Platz für das Bild zu reservieren, bevor es geladen wird. Dadurch lassen sich Layoutverschiebungen beim Laden von Inhalten vermeiden.

Layout

Da Bildschirmabmessungen und -breite in CSS-Pixeln je nach Gerät stark variieren können (z. B. zwischen Smartphones und Tablets und sogar zwischen verschiedenen Smartphones), sollten Inhalte nicht auf eine bestimmte Breite des Darstellungsbereichs angewiesen sein, um gut dargestellt werden zu können.

Bisher waren dafür Einstellungselemente erforderlich, die zum Erstellen des Layouts in Prozentsätzen verwendet wurden. Im folgenden Beispiel sehen Sie ein zweispaltiges Layout mit Gleitkommazahlen, deren Größe in Pixeln angegeben ist. Sobald der Darstellungsbereich kleiner als die Gesamtbreite der Spalten ist, müssen wir horizontal scrollen, um den Inhalt zu sehen.

Screenshot eines zweispaltigen Layouts, bei dem der größte Teil der zweiten Spalte außerhalb des Darstellungsbereichs liegt
Ein unverankertes Layout mit Pixeln. Sieh dir dieses Beispiel auf Glitch an.

Durch die Verwendung von Prozentsätzen für die Breiten bleiben die Spalten immer einen bestimmten Prozentsatz des Containers erhalten. Das bedeutet, dass die Spalten schmaler werden, anstatt eine Bildlaufleiste zu erstellen.

Moderne CSS-Layouttechniken wie Flexbox, Grid-Layout und Multicol vereinfachen das Erstellen dieser flexiblen Raster.

Flexbox

Diese Layoutmethode ist ideal, wenn Sie eine Reihe von Elementen unterschiedlicher Größe haben, die bequem in eine Reihe oder Reihen passen sollen, wobei kleinere Elemente weniger Platz benötigen und größere mehr Platz.

.items {
  display: flex;
  justify-content: space-between;
}

In einem responsiven Design können Sie mit Flexbox Elemente als einzelne Zeile anzeigen oder auf mehrere Zeilen gelegt, wenn der verfügbare Platz kleiner wird.

Weitere Informationen zu Flexbox

CSS-Rasterlayout

Mit dem CSS-Rasterlayout können Sie ganz einfach flexible Raster erstellen. Wenn wir das vorherige Gleitkommazahl-Beispiel betrachten, könnten wir die Spalten mit Prozentsätzen nicht erstellen, sondern stattdessen das Rasterlayout und die fr-Einheit verwenden, die einen Teil des verfügbaren Platzes im Container darstellt.

.container {
  display: grid;
  grid-template-columns: 1fr 3fr;
}

Sie können auch regelmäßige Raster- layouts mit beliebig vielen Elementen erstellen. Die Anzahl der verfügbaren Tracks wird reduziert, wenn die Bildschirmgröße kleiner wird. In der folgenden Demo haben wir so viele Karten, wie in jede Zeile passen. Die Mindestgröße beträgt 200px.

Weitere Informationen zum CSS-Rasterlayout

Mehrspaltiges Layout

Für einige Layouttypen können Sie das mehrspaltige Layout (Multicol) verwenden, um responsive Zahlen von Spalten mit der Eigenschaft column-width zu erstellen. In der folgenden Demo sehen Sie, dass Spalten hinzugefügt werden, wenn Platz für eine weitere 200px-Spalte ist.

Weitere Informationen zu Multicol

CSS-Medienabfragen für mehr Responsivität verwenden

Manchmal müssen Sie umfangreichere Änderungen an Ihrem Layout vornehmen, um eine bestimmte Bildschirmgröße zu unterstützen, als die oben gezeigten Techniken zulassen. Hier kommen Medienabfragen zum Einsatz.

Medienabfragen sind einfache Filter, die auf CSS-Stile angewendet werden können. Sie erleichtern das Ändern des Stils je nach Gerätetyp, der den Inhalt rendert, oder an den Funktionen des Geräts, z. B. Breite, Höhe, Ausrichtung, Mouseover-Funktion und ob das Gerät als Touchscreen verwendet wird.

Um verschiedene Druckstile zur Verfügung zu stellen, müssen Sie einen Ausgabetyp auf einen Typ festlegen. So könnten Sie ein Stylesheet mit Druckstilen einfügen:

<!DOCTYPE html>
<html lang="en">
  <head>
    …
    <link rel="stylesheet" href="print.css" media="print">
    …
  </head>
  …

Alternativ können Sie mithilfe einer Medienabfrage Druckstile in Ihr Haupt-Stylesheet einfügen:

@media print {
  /* print styles go here */
}

Beim responsiven Webdesign fragen wir in der Regel die Funktionen des Geräts ab, um ein anderes Layout für kleinere Bildschirme zu erhalten oder wenn wir feststellen, dass ein Besucher einen Touchscreen verwendet.

Medienabfragen auf Grundlage der Größe des Darstellungsbereichs

Mit Medienabfragen können wir eine responsive Erfahrung schaffen, bei der bestimmte Stile auf kleine und große Bildschirme und irgendwo dazwischen angewendet werden. Die Funktion, die wir hier erkennen, ist daher die Bildschirmgröße. Wir können Folgendes testen:

  • width (min-width, max-width)
  • height (min-height, max-height)
  • orientation
  • aspect-ratio

Alle diese Features bieten eine hervorragende Browserunterstützung. Weitere Details, einschließlich Informationen zur Browserunterstützung, finden Sie in der MDN unter Breite, Höhe, Ausrichtung und Seitenverhältnis.

Medienabfragen auf Grundlage der Gerätefunktion

Angesichts der Vielzahl verfügbarer Geräte können wir nicht davon ausgehen, dass es sich bei jedem großen Gerät um einen normalen Desktop- oder Laptop-Computer handelt oder dass die Menschen auf einem kleinen Gerät nur einen Touchscreen verwenden. Mit einigen neueren Ergänzungen der Spezifikation für Medienabfragen können wir Funktionen testen, z. B. den Typ des Zeigers, der für die Interaktion mit dem Gerät verwendet wird, und ob der Nutzer den Mauszeiger auf Elemente bewegen kann.

  • hover
  • pointer
  • any-hover
  • any-pointer

Sehen Sie sich diese Demo auf verschiedenen Geräten an, z. B. auf einem Desktop-Computer und einem Smartphone oder Tablet.

Diese neueren Funktionen werden in allen modernen Browsern gut unterstützt. Weitere Informationen finden Sie auf den MDN-Seiten für hover, any-hover, Pointer und Any-Hover.

any-hover und any-pointer verwenden

Mit den Funktionen any-hover und any-pointer wird getestet, ob der Nutzer die Möglichkeit hat, den Mauszeiger darauf zu bewegen oder diesen Zeigertyp zu verwenden, auch wenn dies nicht die primäre Art der Interaktion mit seinem Gerät ist. Seien Sie bei der Verwendung sehr vorsichtig. Es ist nicht sehr einfach, Nutzende zu zwingen, bei der Verwendung des Touchscreens zur Maus zu wechseln. any-hover und any-pointer können jedoch nützlich sein, wenn es wichtig ist, herauszufinden, welche Art von Gerät ein Nutzer verwendet. Ein Laptop mit einem Touchscreen und einem Touchpad sollte beispielsweise grobe und feine Zeiger haben, zusätzlich zur Möglichkeit, den Mauszeiger darüber zu bewegen.

Haltepunkte auswählen

Definieren Sie keine Haltepunkte basierend auf Geräteklassen. Das Definieren von Haltepunkten auf der Grundlage bestimmter Geräte, Produkte, Markennamen oder Betriebssysteme, die heute verwendet werden, kann einen Wartungsalptraum nach sich ziehen. Stattdessen sollte vom Inhalt selbst bestimmt werden, wie sich das Layout an den Container anpasst.

Wähle wichtige Haltepunkte, indem du klein anfängst und dann weitermachst

Gestalten Sie den Inhalt zuerst so, dass er auf eine kleine Bildschirmgröße passt, und maximieren Sie ihn dann, bis ein Haltepunkt notwendig wird. Auf diese Weise können Sie Haltepunkte inhaltsbasiert optimieren und so wenig Haltepunkte wie möglich beibehalten.

Betrachten wir das Beispiel von Anfang an: die Wettervorhersage. Zuerst muss die Prognose auch auf einem kleinen Bildschirm gut dargestellt werden.

Screenshot einer Wetter-App mit der Breite eines Mobilgeräts
Die App mit schmaler Breite.

Als Nächstes passen Sie die Größe des Browsers an, bis zu viel Leerraum zwischen den Elementen vorhanden ist und die Prognose einfach nicht so gut aussieht. Die Entscheidung ist etwas subjektiv, aber über 600px ist sie definitiv zu weit gefasst.

Screenshot einer Wetter-App mit großen Lücken zwischen den Elementen
Die App an einem Punkt, an dem wir unserer Meinung nach das Design optimieren sollten.

Wenn Sie bei 600px einen Haltepunkt einfügen möchten, erstellen Sie am Ende Ihres CSS-Codes für die Komponente zwei Medienabfragen: eine, die verwendet wird, wenn der Browser 600px und niedriger ist, und eine, wenn er breiter als 600px ist.

@media (max-width: 600px) {

}

@media (min-width: 601px) {

}

Refaktorieren Sie abschließend das CSS. Fügen Sie den CSS-Code für kleine Bildschirme in die Medienabfrage für max-width von 600px ein. Fügen Sie in die Medienabfrage für ein min-width mit 601px CSS für größere Bildschirme ein.

Wählen Sie bei Bedarf kleinere Haltepunkte aus.

Neben der Auswahl größerer Haltepunkte bei erheblichen Änderungen am Layout ist es auch hilfreich, Anpassungen für kleinere Änderungen vorzunehmen. Zwischen wichtigen Haltepunkten kann es beispielsweise hilfreich sein, die Ränder oder Abstände in einem Element anzupassen oder die Schriftgröße zu erhöhen, damit es sich im Layout natürlicher anfühlt.

Beginnen wir mit der Optimierung des kleinen Bildschirmlayouts. In diesem Fall soll die Schriftart optimiert werden, wenn die Breite des Darstellungsbereichs größer als 360px ist. Zweitens können wir, wenn genug Platz vorhanden ist, die hohen und niedrigen Temperaturen trennen, sodass sie in derselben Linie liegen und nicht übereinander liegen. Und wir werden auch die Wettersymbole etwas größer machen.

@media (min-width: 360px) {
  body {
    font-size: 1.0em;
  }
}

@media (min-width: 500px) {
  .seven-day-fc .temp-low,
  .seven-day-fc .temp-high {
    display: inline-block;
    width: 45%;
  }

  .seven-day-fc .seven-day-temp {
    margin-left: 5%;
  }

  .seven-day-fc .icon {
    width: 64px;
    height: 64px;
  }
}

Bei großen Bildschirmen sollten Sie die maximale Breite des Prognosebereichs beschränken, damit er nicht die gesamte Bildschirmbreite ausfüllt.

@media (min-width: 700px) {
  .weather-forecast {
    width: 700px;
  }
}

Text für das Lesen optimieren

Die klassische Lesbarkeitstheorie besagt, dass eine ideale Spalte 70 bis 80 Zeichen pro Zeile enthalten sollte (etwa 8 bis 10 Wörter in Englisch). Wenn also die Breite eines Textblocks über 10 Wörter hinausgeht, empfiehlt es sich, einen Haltepunkt hinzuzufügen.

Screenshot einer Seite mit Text auf einem Mobilgerät
Der auf einem Mobilgerät gelesene Text.
Screenshot einer Seite mit Text in einem Desktop-Browser
Der in einem Desktop-Browser gelesene Text mit einem Haltepunkt zur Beschränkung der Zeilenlänge.

Sehen wir uns das obige Beispiel eines Blogposts einmal genauer an. Auf kleineren Bildschirmen funktioniert die Roboto-Schriftart 1em perfekt mit 10 Wörtern pro Zeile. Auf größeren Bildschirmen ist jedoch ein Haltepunkt erforderlich. Ist die Browserbreite in diesem Fall größer als 575px, ist die ideale Inhaltsbreite 550px.

@media (min-width: 575px) {
  article {
    width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

Inhalte nicht einfach ausblenden

Überlegen Sie genau, welche Inhalte je nach Bildschirmgröße ein- oder ausgeblendet werden sollen. Blenden Sie nicht einfach Inhalte aus, nur weil sie nicht auf den Bildschirm passen. Die Bildschirmgröße ist kein zweifelhafter Indikator dafür, was Nutzende erwarten können. Wenn beispielsweise die Pollenbelastung aus der Wettervorhersage entfernt wird, könnte dies ein ernsthaftes Problem für Allergiker im Frühjahr sein, die Informationen benötigen, um festzustellen, ob sie nach draußen gehen können oder nicht.

Haltepunkte bei Medienabfragen in den Chrome-Entwicklertools ansehen

Nachdem Sie Ihre Haltepunkte für Medienabfragen eingerichtet haben, möchten Sie sehen, wie Ihre Website damit aussieht. Sie können die Größe des Browserfensters ändern, um die Haltepunkte auszulösen. Die Chrome-Entwicklertools haben jedoch eine integrierte Funktion, mit der Sie ganz einfach erkennen können, wie eine Seite unter verschiedenen Haltepunkten aussieht.

Screenshot der Entwicklertools mit geöffneter Wetter-App und ausgewählter Breite von 822 Pixeln
Entwicklertools, die die Wetter-App in einem breiteren Darstellungsbereich zeigen.
Screenshot der Entwicklertools mit geöffneter Wetter-App und ausgewählter Breite von 436 Pixeln
Entwicklertools, die die Wetter-App bei einem schmaleren Darstellungsbereich zeigen.

So zeigen Sie Ihre Seite unter verschiedenen Haltepunkten an:

Öffnen Sie die Entwicklertools und aktivieren Sie den Gerätemodus. Es wird standardmäßig im responsiven Modus geöffnet.

Wenn Sie Ihre Medienabfragen sehen möchten, öffnen Sie das Menü „Gerätemodus“ und wählen Sie Medienabfragen anzeigen aus, um die Haltepunkte als farbige Balken über der Seite anzuzeigen.

Klicken Sie auf einen der Balken, um Ihre Seite anzuzeigen, während diese Medienabfrage aktiv ist. Klicken Sie mit der rechten Maustaste auf einen Balken, um zur Definition der Medienabfrage zu springen.