Einführung

Das World Wide Web wurde von Anfang an so konzipiert, dass es unabhängig von der Hardware und dem Betriebssystem ist. Solange Sie eine Internetverbindung haben, können Sie auf das World Wide Web zugreifen.

In den Anfangstagen des Webs nutzten die meisten Menschen Computer. Heutzutage ist das Internet auf Computern, Laptops, Tablets, faltbaren Smartphones, Kühlschränken und Autos verfügbar. Nutzer erwarten zu Recht, dass Websites unabhängig vom verwendeten Gerät gut aussehen. Responsives Design macht das möglich.

Responsives Design ist nicht der erste Ansatz beim Entwerfen von Websites. In den Jahren vor dem responsiven Webdesign haben Webdesigner und ‑entwickler viele verschiedene Techniken ausprobiert.

Frühe Designentscheidungen

Entwickler haben Websites mit fester Breite oder flüssigen Layouts erstellt.

Feste Breite

Anfang der 1990er-Jahre, als das Web immer beliebter wurde, hatten die meisten Monitore eine Bildschirmgröße von 640 Pixeln breit und 480 Pixeln hoch. Diese waren konvexe Kathodenstrahlröhren, im Gegensatz zu den flachen Flüssigkristallanzeigen, die wir heute haben.

Die Microsoft-Website mit zwei einfachen Textspalten und einer Navigationsleiste.
Die Microsoft-Website wurde Ende der 90er-Jahre für eine Breite von 640 Pixeln entwickelt. Screenshot von archive.org

In den Anfängen des Webdesigns war es eine sichere Wette, Webseiten mit einer Breite von 640 Pixeln zu entwerfen. Während andere Technologien wie Smartphones und Kameras immer kleiner wurden, wurden Bildschirme immer größer (und schließlich flacher). Die meisten Bildschirme hatten schon bald eine Größe von 800 x 600 Pixeln. Webdesigns haben sich entsprechend verändert. Designer und Entwickler gingen davon aus, dass 800 Pixel ein sicherer Standardwert sind.

Die Microsoft-Website verwendete ein dreispaltiges, hauptsächlich textbasiertes Design.
Die Microsoft-Website wurde Anfang der 2000er-Jahre für eine Breite von 800 Pixeln konzipiert. Screenshot von archive.org

Dann wurden die Bildschirme wieder größer. 1.024 × 768 wurde zum Standard. Es fühlte sich an wie ein Wettrüsten zwischen Webdesignern und Hardwareherstellern.

​​

Die Microsoft-Website mit einem komplexeren Design, das sowohl Bilder als auch Text verwendet.
Die Microsoft-Website wurde Mitte der 2000er-Jahre für eine Breite von 1.024 Pixeln konzipiert. Screenshot von archive.org

Unabhängig davon, ob es sich um 640, 800 oder 1.024 Pixel handelte, wurde die Auswahl einer bestimmten Breite für das Design als Design mit fester Breite bezeichnet.

Wenn Sie eine feste Breite für Ihr Layout festlegen, sieht das Layout nur ab dieser Breite gut aus. Wenn ein Besucher Ihrer Website ein breiteres Display als die von Ihnen ausgewählte Breite hat, wird auf dem Bildschirm Platz verschwendet. Sie können den Inhalt Ihrer Seiten zentrieren, um diesen Bereich gleichmäßiger zu verteilen (anstatt auf einer Seite einen leeren Bereich zu haben), aber Sie würden den verfügbaren Platz immer noch nicht optimal nutzen.

Eine schmale Layout mit viel Weißraum drumherum.
Die Yahoo-Website aus den frühen 2000er-Jahren in einem Browser, der breiter ist als das 800 Pixel breite Design der Website. Screenshot von archive.org

Ähnlich verhält es sich, wenn der Bildschirm eines Besuchers mit einem schmaleren Bildschirm als von Ihnen festgelegter Breite auf die Website gelangt. Der Browser generiert eine Scrollleiste – das horizontale Äquivalent einer Scrollleiste – und der Nutzer muss die gesamte Seite nach links und rechts bewegen, um alle Inhalte zu sehen.

Eine Website, die rechts abgeschnitten erscheint, weil sie zu breit für den Darstellungsbereich ist.
Die Yahoo-Website aus den frühen 2000er-Jahren in einem Browser, der schmaler ist als das 800 Pixel breite Design der Website. Screenshot von archive.org

Fließende Layouts

Die meisten Designer verwendeten Layouts mit fester Breite, einige entschieden sich jedoch für flexible Layouts. Anstatt feste Breiten für Ihre Layouts zu verwenden, können Sie ein flexibles Layout mit Prozentsätzen für die Spaltenbreiten erstellen. Diese Designs funktionieren in mehr Situationen als ein Layout mit fester Breite, das nur bei einer bestimmten Größe richtig aussieht.

Diese wurden als flüssige Layouts bezeichnet. Ein Liquid-Layout kann zwar bei einer breiten Palette von Breiten gut aussehen, aber an den Extremen verschlechtert es sich. Auf einem breiten Bildschirm wirkt das Layout gestreckt. Auf einem schmalen Bildschirm wirkt das Layout gestaucht. Beide Szenarien sind nicht ideal.

Ein Layout, das in einem schmalen Fenster zusammengedrückt ist.
Das responsive Layout von Wikipedia aus der Mitte der 2000er-Jahre in einem schmalen Browserfenster. Screenshot von archive.org
​​
Ein horizontal gestrecktes Layout mit sehr langen Zeilenlängen.
Das responsive Layout von Wikipedia Mitte der 2000er-Jahre in einem breiten Browserfenster. Screenshot von archive.org

Sie können diese Probleme minimieren, indem Sie min-width und max-width für Ihr Layout verwenden. Bei einer Größe unter der Mindestbreite oder über der Maximalbreite treten jedoch dieselben Probleme auf wie bei einem Layout mit fester Breite. Auf einem Breitbildbildschirm würde ungenutzter Platz verschwendet. Auf einem schmalen Bildschirm müsste der Nutzer die gesamte Seite nach links und rechts bewegen, um alles zu sehen.

Öffnen Sie das Beispiel für ein Liquid Layout in einem neuen Browserfenster, um zu sehen, wie sich das Design bei einer Änderung der Fenstergröße dehnt.

Der Begriff liquid ist nur einer der Begriffe, mit denen diese Art von Layout beschrieben wird. Diese Art von Designs wurde auch als Fluid-Layout oder flexibles Layout bezeichnet. Die Terminologie war so fließend wie die Technik.

Für verschiedene Bildschirmgrößen entwickeln

Im 21. Jahrhundert wurde das Web immer größer. Das gilt auch für Monitore. Aber es gab neue Bildschirme, die kleiner waren als jedes Desktopgerät. Mit der Einführung von Smartphones mit vollwertigen Webbrowsern standen Designer vor einem Dilemma. Wie können sie dafür sorgen, dass ihre Designs auf einem Computer und einem Smartphone gut aussehen? Das Unternehmen suchte nach einer Möglichkeit, seine Inhalte für Bildschirme mit einer Breite von 240 Pixeln und einer Breite von mehreren Tausend Pixeln zu gestalten.

Separate Websites

Eine Möglichkeit besteht darin, eine separate Subdomain für mobile Nutzer zu erstellen. Aber dann müssen Sie zwei separate Codebases und Designs verwalten. Um Besucher auf Mobilgeräten weiterzuleiten, müssten Sie User-Agent-Sniffing verwenden, was jedoch unzuverlässig und manipulierbar sein kann. In Chrome wurde der User-Agent-String reduziert, um ein solches passives Fingerprinting zu verhindern. Außerdem gibt es keine klare Grenze zwischen Mobilgeräten und anderen Geräten. An welche Website senden Sie Tablet-Geräte?

Adaptive Layouts

Anstatt separate Websites auf verschiedenen Subdomains zu haben, können Sie eine einzige Website mit zwei oder drei Layouts mit fester Breite verwenden.

Als Media Queries in CSS eingeführt wurden, konnten Layouts flexibler gestaltet werden. Viele Entwickler fühlten sich jedoch immer noch am wohlsten bei Layouts mit fester Breite. Eine Methode bestand darin, zwischen einer Handvoll Layouts mit fester Breite bei bestimmten Breiten zu wechseln. Einige nennen das adaptives Design.

Mit dem responsiven Design konnten Designer Layouts erstellen, die in verschiedenen Größen gut aussahen, aber nie ganz richtig wirkten, wenn sie zwischen diesen Größen betrachtet wurden. Das Problem des zu viel Platzes blieb bestehen, obwohl es nicht so schlimm war wie bei einem Layout mit fester Breite.

Mit CSS-Medienanfragen können Sie Nutzern das Layout anzeigen, das der Breite ihres Browsers am besten entspricht. Angesichts der Vielzahl von Gerätegrößen ist das Layout für die meisten Nutzer jedoch wahrscheinlich nicht perfekt.

Öffnen Sie das Beispiel für ein adaptives Layout in einem neuen Browserfenster, um zu sehen, wie das Design bei einer Änderung der Fenstergröße zwischen den Layouts wechselt.

Responsives Webdesign

Wenn adaptive Layouts eine Kombination aus Medienabfragen und Layouts mit fester Breite sind, ist responsives Webdesign ein Mashup aus Medienabfragen und flüssigen Layouts.

Öffnen Sie das Beispiel für responsives Design in einem neuen Browserfenster, um zu sehen, wie sich das Layout des Designs durch Ändern der Fenstergröße flüssig ändert.

Der Begriff wurde 2010 von Ethan Marcotte in einem Artikel in A List Apart geprägt.

Ethan hat drei Kriterien für responsives Design definiert:

  1. Fluide Raster
  2. Fluid Media
  3. Medienabfragen

Das Layout und die Bilder einer responsiven Website sehen auf jedem Gerät gut aus. Es gab jedoch ein Problem.

Ein meta-Element für viewport

Browser auf Smartphones mussten mit Websites umgehen, die mit einem festen Layout für breitere Bildschirme entwickelt wurden. In mobilen Browsern wurde standardmäßig davon ausgegangen, dass die Breite 980 Pixel betrug, für die die Designer ihre Websites entwarfen. Das war nicht falsch. Selbst wenn Sie ein Liquid-Layout verwenden, würde der Browser eine Breite von 980 Pixeln anwenden und die gerenderte Webseite dann auf die tatsächliche Breite des Bildschirms skalieren.

Wenn Sie ein responsives Design verwenden, müssen Sie dem Browser mitteilen, dass er diese Skalierung nicht vornehmen soll. Dazu verwenden Sie das Element meta im head der Webseite:

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

Es gibt zwei Werte, die durch Kommas getrennt sind. Die erste ist width=device-width. Der Browser nimmt dann an, dass die Breite der Website der Breite des Geräts entspricht, anstatt anzunehmen, dass die Breite der Website 980 Pixel beträgt. Der zweite Wert ist initial-scale=1. So wird dem Browser mitgeteilt, wie stark oder wie wenig skaliert werden soll. Bei einem responsiven Design soll der Browser gar nicht skalieren.

Bilder von zwei Smartphones mit Text, wobei eines aufgrund des fehlenden Meta-Tags herangezoomt erscheint.
Auf dem Smartphone auf der linken Seite ist im Vergleich zum Layout rechts zu sehen, wie das Layout vor dem Einfügen des Meta-Tags aussieht.

Mit diesem meta-Element sind Ihre Webseiten jetzt responsiv.

Modernes responsives Design

Jetzt können wir Websites erstellen, die weit über die Darstellungsbereiche hinaus responsive sind. Medienfunktionen bieten Entwicklern Zugriff auf Nutzereinstellungen und ermöglichen eine individuelle Nutzung. Mit Containerabfragen können Komponenten eigene responsive Informationen haben. Mit dem picture-Element können Designer Entscheidungen zur Kunstrichtung basierend auf Bildschirmverhältnissen treffen.

Wissenstest

Ihr Wissen über responsives Webdesign testen

Ist es 2021 empfehlenswert, Webseiten mit einer festen Breite zu entwerfen?

falsch
wahr

Bei welchen Bildschirmgrößen funktionieren Liquid Layouts in der Regel nicht richtig?

Breitbild-Displays
Kurze Bildschirme
Schmale Bildschirme
Hochformatige Bildschirme
Durchschnittliche Bildschirme
Alle Bildschirme

Wie lauten die ursprünglichen drei Kriterien für responsives Webdesign?

Adaptive Raster
Medienabfragen
Fluid Media
Design mit fester Breite
Fluide Raster
Fließende Typografie

Responsives Design ist eine spannende, wachsende Welt voller Möglichkeiten. Im Rest dieses Kurses erfahren Sie mehr über diese Technologien und wie Sie damit ansprechende, responsive Websites für alle erstellen.