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.
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.
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.
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.
Ä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.
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.
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.
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.
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.
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:
- Fluide Raster
- Fluid Media
- 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.
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?
Bei welchen Bildschirmgrößen funktionieren Liquid Layouts in der Regel nicht richtig?
Wie lauten die ursprünglichen drei Kriterien für responsives Webdesign?
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.