Das World Wide Web war von Anfang an unabhängig von Anfang an. Ganz egal, welche Hardware du hast. Es spielt keine Rolle, welches Betriebssystem auf Ihrem Gerät ausgeführt wird. Solange Sie eine Verbindung zum Internet herstellen können, haben Sie auch Zugriff auf das World Wide Web.
In der Anfangszeit des Webs nutzten die meisten Nutzer Desktop-Computer. Heutzutage ist das Web auf Computern, Laptops, Tablets, faltbaren Smartphones, Kühlschränken und Autos verfügbar. Nutzer erwarten zu Recht, dass Websites auf jedem Gerät gut aussehen. Responsives Webdesign macht dies möglich.
Responsives Design ist nicht der erste Ansatz beim Entwerfen von Websites. In den Jahren vor dem responsiven Design probierten Webdesigner und -entwickler viele verschiedene Techniken aus.
Design mit fester Breite
In den frühen 1990er-Jahren, als das Web zum ersten Mal populär wurde, hatten die meisten Monitore eine Bildschirmgröße von 640 × 480 Pixeln (Breite und Höhe). Das waren konvexe Kathodenstrahlröhren, nicht wie die flachen Flüssigkristallbildschirme, die wir heute haben.
In den prägenden Tagen des Webdesigns war es sicher, Webseiten mit einer Breite von 640 Pixeln zu entwerfen. Aber während andere Technologien wie Smartphones und Kameras immer kleiner wurden, wurden die Bildschirme immer größer (und schließlich flacher). Schon bald hatten die meisten Bildschirme eine Größe von 800 x 600 Pixeln. Webdesigns haben sich entsprechend geändert. Designer und Entwickler gingen davon aus, dass 800 Pixel ein sicherer Standard sind.
Dann wurden die Bildschirme wieder größer. 1024 x 768 wurde als Standard verwendet. Es fühlte sich wie ein Wettrennen zwischen Webdesignern und Hardwareherstellern an.
Ob 640, 800 oder 1.024 Pixel – die Auswahl einer bestimmten Breite für das Design wurde als Design mit fester Breite bezeichnet.
Wenn du eine feste Breite für dein Layout angibst, sieht es nur bei dieser spezifischen Breite gut aus. Weist ein Besucher Ihrer Website einen breiteren Bildschirm als die von Ihnen gewählte Breite auf, wird Platz auf dem Bildschirm verschwendet. Du kannst den Inhalt deiner Seiten zentrieren, um diesen Raum gleichmäßiger zu verteilen (anstatt einen leeren Bereich auf einer Seite zu haben). Dennoch kannst du den verfügbaren Platz nicht voll ausnutzen.
Und falls ein Besucher mit einem schmaleren Bildschirm als der von Ihnen gewählten Breite auf die Website gelangt, passt der Inhalt nicht horizontal. Der Browser generiert eine Crawling-Leiste – die horizontale Entsprechung einer Bildlaufleiste – und der Nutzer muss die gesamte Seite nach links und rechts bewegen, um den gesamten Inhalt zu sehen.
Liquid-Layouts
Während die meisten Designschaffenden Layouts mit fester Breite verwendet haben, entschieden sich einige dafür, ihre Layouts flexibel zu gestalten. Anstelle von festen Breiten für Ihre Layouts 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 in einer bestimmten Größe richtig aussieht.
Diese wurden als Flüssig-Layouts bezeichnet. Doch obwohl ein flüssiges Layout bei vielen Breiten gut aussieht, wird es sich in extremen Bereichen verschlechtern. Auf einem Breitbildschirm sieht das Layout gestreckt aus. Auf einem schmalen Bildschirm wirkt das Layout unübersichtlich. Beide Szenarien sind nicht ideal.
Sie können diese Probleme umgehen, indem Sie min-width und max-width für Ihr Layout verwenden.
Aber dann haben Sie bei jeder Größe, die unter der Mindestbreite oder über der maximalen Breite liegt, die gleichen Probleme wie bei einem Layout mit fester Breite.
Auf einem breiten Bildschirm würde ungenutzter Platz verschwendet werden.
Auf einem schmalen Bildschirm müssten die Nutzenden die gesamte Seite nach links und rechts bewegen, um alles zu sehen.
Das Wort Flüssig ist nur einer der Begriffe, die für diese Art von Layout verwendet werden. Diese Art von Designs wurde auch als flexible Layouts oder flexible Layouts bezeichnet. Die Terminologie war so fließend wie die Technik.
Kleine Bildschirme
Im 21. Jahrhundert nahm das Web immer mehr zu. Dasselbe gilt für Monitore. Aber es gab neue Bildschirme, die kleiner als alle Desktop-Geräte waren. Mit der Einführung von Mobiltelefonen mit voll funktionsfähigen Webbrowsern standen Designschaffende vor einem Dilemma. Wie können sie sicherstellen, dass ihre Designs auf einem Desktop-Computer und einem Mobiltelefon gut aussehen? Sie brauchten eine Möglichkeit, ihre Inhalte für Bildschirme mit einer Breite von nur 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 Codebasen und Designs pflegen. Um Besucher auf Mobilgeräten weiterzuleiten, müssen Sie außerdem ein User-Agent-Sniffing durchführen, das unzuverlässig und leicht gefälscht sein kann. Der User-Agent-String in Chrome wird aus Datenschutzgründen eingestellt. Außerdem gibt es keine klare Grenze zwischen mobil und nicht mobil. An welche Website senden Sie Tablet-Geräte?
Adaptive Layouts
Anstatt separate Websites auf verschiedenen Subdomains zu erstellen, könntest du eine einzelne Website mit zwei oder drei Layouts mit fester Breite erstellen.
Mit der Einführung von Medienabfragen in CSS war es möglich, Layouts flexibler zu gestalten. Viele Entwickler fühlten sich jedoch am wohlsten bei der Erstellung von Layouts mit fester Breite. Eine Technik bestand darin, zwischen einigen Layouts mit fester Breite und bestimmten Breiten zu wechseln. Dies wird auch als adaptives Design bezeichnet.
Mit adaptivem Design konnten Designer Layouts erstellen, die in verschiedenen Größen gut aussahen, aber bei der Betrachtung zwischen diesen Größen nie ganz richtig aussahen. Das Problem mit zu viel Platz blieb bestehen, obwohl es nicht so schlimm war wie bei einem Layout mit fester Breite.
Mit CSS-Medienabfragen können Sie Nutzern das Layout geben, das der Breite ihres Browsers am nächsten kommt. Aber angesichts der Vielzahl von Gerätegrößen ist es wahrscheinlich, dass das Layout für die meisten Menschen nicht perfekt aussieht.
Responsives Webdesign
Wenn adaptive Layouts eine Kombination aus Medienabfragen und Layouts mit fester Breite sind, ist das responsive Webdesign eine Kombination aus Medienabfragen und Flüssig-Layouts.
Der Begriff wurde 2010 von Ethan Marcotte in einem Artikel in „A List Apart“ geprägt.
Ethan definierte drei Kriterien für das responsive Design:
- Fließende Raster
- Flüssige Medien
- Medienabfragen
Das Layout und die Bilder einer responsiven Website sollten auf jedem Gerät gut aussehen. Aber es gab ein Problem.
Ein meta-Element für viewport
Browser auf Mobiltelefonen mussten sich mit Websites auseinandersetzen, die mit einem Layout mit fester Breite für breitere Bildschirme gestaltet wurden. Standardmäßig gingen mobile Browser davon aus, dass die Breite von 980 Pixeln für das Design der Nutzer anfiel (und dies war nicht falsch). Selbst wenn Sie also ein Liquid-Layout verwenden, wendet der Browser eine Breite von 980 Pixeln an und skaliert dann die gerenderte Webseite auf die tatsächliche Breite des Bildschirms.
Wenn Sie responsives Webdesign verwenden, müssen Sie den Browser anweisen, diese Skalierung nicht vorzunehmen.
Dazu kannst du ein meta-Element in der head der Webseite verwenden:
<meta name="viewport" content="width=device-width, initial-scale=1">
Es gibt zwei durch Kommas getrennte Werte.
Die erste lautet width=device-width.
Auf diese Weise nimmt der Browser an, dass die Breite der Website mit der Breite des Geräts übereinstimmt (anstatt 980 Pixel).
Der zweite Wert ist initial-scale=1.
Der Browser teilt dem Browser mit, wie viel oder wie wenig Skalierung er ausführen soll.
Bei einem responsiven Design soll der Browser überhaupt keine Skalierung vornehmen.
Sobald Sie das meta-Element eingerichtet haben, können Ihre Webseiten responsiv werden.
Modernes responsives Design
Heute können wir Websites erstellen, die weit über die Größen des Darstellungsbereichs hinaus responsiv sind.
Mit Medienfunktionen können Entwickler auf Nutzereinstellungen zugreifen und benutzerdefinierte Nutzererfahrungen ermöglichen.
Mit Containerabfragen können Komponenten Eigentümer ihrer eigenen responsiven Informationen sein.
Mit dem picture-Element können Designer Entscheidungen in Bezug auf die künstlerische Richtung basierend auf den Bildschirmverhältnissen treffen.
Wissen testen
Testen Sie Ihr Wissen über responsives Webdesign
Ist es 2021 sicher sinnvoll, Webseiten mit einer festen Breite zu gestalten?
Flüssige Layouts haben bei welcher Art von Bildschirmgrößen im Allgemeinen Probleme?
Sind die drei ursprünglichen Kriterien für responsives Webdesign?
Responsives Design ist eine spannende, wachsende Welt voller Möglichkeiten. Im weiteren Verlauf dieses Kurses lernen Sie diese Technologien kennen und erfahren, wie Sie damit ansprechende, responsive Websites für alle erstellen können.