Einführung

Von Anfang an war das World Wide Web unabhängig voneinander. Es spielt keine Rolle, welche Hardware du hast. Es spielt keine Rolle, welches Betriebssystem auf Ihrem Gerät ausgeführt wird. Solange Sie eine Internetverbindung haben, können Sie auf das World Wide Web zugreifen.

In den Anfängen des Webs verwendeten die meisten Menschen Desktop-Computer. Heutzutage ist das Web auf Desktop-Computern, Laptops, Tablets, faltbaren Smartphones, Kühlschranken 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 haben Webdesigner und Entwickelnde viele verschiedene Techniken ausprobiert.

Designs mit fester Breite

In den frühen 1990er Jahren, als das Web zum ersten Mal populär wurde, Die meisten Monitore hatten Bildschirmabmessungen von 640 Pixel breit und 480 Pixeln hoch. Das waren konvexe Kathodenstrahlen, anders als die flachen Flüssigkristall-Displays, die wir jetzt haben.

<ph type="x-smartling-placeholder">

</ph>

In den prägenden Tagen des frühen Webdesigns war es eine sichere Lösung, Webseiten mit einer Breite von 640 Pixeln zu erstellen. Andere Technologien wie Smartphones und Kameras verkleinerten sich zwar, wurden die Bildschirme größer (und schließlich flacher). Die meisten Bildschirme hatten schon bald eine Größe von 800 x 600 Pixeln. Die Webdesigns änderten sich entsprechend. Designer und Entwickler gingen davon aus, dass 800 Pixel ein sicherer Standardwert sind.

<ph type="x-smartling-placeholder">

</ph>

Dann wurden die Bildschirme wieder größer. 1024 x 768 wurde als Standard festgelegt. Es fühlte sich an wie ein Wettstreit zwischen Webdesignern und Hardwareherstellern.

​​

<ph type="x-smartling-placeholder">

</ph>

Ob 640, 800 oder 1024 Pixel, die Auswahl einer bestimmten Breite für das Design als Design mit fester Breite.

Wenn Sie eine feste Breite für Ihr Layout festlegen, sieht Ihr Layout nur bei dieser spezifischen Breite gut aus. Wenn der Bildschirm eines Besuchers Ihrer Website breiter ist als die von Ihnen gewählte Breite, verschwendet der Bildschirm Platz. Sie können den Content Ihrer Seiten zentrieren, um diesen Bereich gleichmäßiger zu verteilen .

<ph type="x-smartling-placeholder">

</ph>

Gelangt ein Besucher mit einem schmaleren Bildschirm als von Ihnen festgelegter 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 verschieben, um den gesamten Inhalt zu sehen.

<ph type="x-smartling-placeholder">

</ph>

Flüssige Layouts

Während die meisten Designschaffenden Layouts mit fester Breite verwendeten, entschieden sich einige für flexible Layouts. Anstatt für Ihre Layouts eine feste Breite 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, bei dem nur eine bestimmte Größe richtig dargestellt wird.

Diese wurden als flüssige Layouts bezeichnet. Obwohl ein flüssiges Layout bei einem großen Bereich von Breiten gut aussieht, kann es sich unter extremen Lichtverhältnissen verschlechtern. Auf einem großen Bildschirm wirkt das Layout gestreckt. Auf einem schmalen Bildschirm sieht das Layout kompakt aus. Beide Szenarien sind nicht ideal.

<ph type="x-smartling-placeholder">

</ph>

<ph type="x-smartling-placeholder">

</ph> .

Sie können diese Probleme verringern, indem Sie min-width und max-width für Ihr Layout verwenden. Aber bei jeder Größe unter der Mindestbreite oder über der maximalen Breite treten die gleichen Probleme auf wie bei einem Layout mit fester Breite. Auf einem breiten Bildschirm gäbe es dann ungenutzte Flächen, die verloren gehen können. Auf einem schmalen Bildschirm müssten Nutzende die gesamte Seite nach links und rechts verschieben, um alles zu sehen.

Das Wort Flüssigkeit ist nur einer der Begriffe, die für diese Art von Layout verwendet werden. Diese Art von Designs wurde auch als fließende Layouts oder flexible Layouts bezeichnet. Die Terminologie war so fließend wie die Technik.

Kleine Bildschirme

Im 21. Jahrhundert wurde das Web immer größer. Dasselbe gilt für die Monitore. Es sind jedoch neue Bildschirme entstanden, die kleiner als alle Desktop-Geräte waren. Mit der Einführung von Mobiltelefonen mit voll ausgestatteten Webbrowsern standen Designschaffende vor einem Dilemma. Wie kann sie sicherstellen, dass ihre Designs auf Desktop-Computern und Mobiltelefonen 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. Dann müssen Sie aber zwei separate Codebasen und Designs verwalten. Um Besucher auf Mobilgeräten weiterzuleiten, User-Agent-Sniffing die unzuverlässig und leicht gefälscht sein können. Der User-Agent-String wird aus Datenschutzgründen in Chrome nicht mehr unterstützt. Außerdem gibt es keine klare Trennung zwischen Mobilgeräten und anderen Nutzern. An welche Website senden Sie Tablet-Geräte?

Adaptive Layouts

Anstatt separate Websites in verschiedenen Sub-Domains zu haben, könnten Sie eine einzelne Website mit zwei oder drei Layouts mit fester Breite haben.

Als Medienabfragen erstmals in CSS verfügbar waren, öffneten sie die Tür für flexiblere Layouts. Viele Entwickler fühlten sich jedoch immer noch wohl dabei, Layouts mit fester Breite zu erstellen. Bei einer Technik wurde zwischen einigen Layouts mit fester Breite mit bestimmten Breiten gewechselt. Manche bezeichnen dies als adaptives Design.

Dank adaptivem Design konnten Designschaffende Layouts bereitstellen, die in verschiedenen Größen gut aussahen. aber das Design sah in beiden Größen nie ganz gut aus. Das Problem des zu viel Platzes blieb bestehen, obwohl es nicht so schlimm war wie bei einem Layout mit fester Breite.

Mithilfe von CSS-Medienabfragen können Sie Nutzern ein Layout zuweisen, das ihrer Browserbreite am nächsten kommt. Angesichts der Vielfalt der Gerätegrößen ist es jedoch wahrscheinlich, dass das Layout für die meisten Nutzer nicht perfekt aussieht.

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 von Ethan Marcotte im einen Artikel in A List Apart aus dem Jahr 2010.

Ethan hat drei Kriterien für responsives Design definiert:

1. Fließende Raster
2. Flüssige Medien
3. Medienabfragen

Das Layout und die Bilder einer responsiven Website würden auf jedem Gerät gut aussehen. Aber es gab ein Problem.

Ein meta-Element für viewport

Browser auf Smartphones mussten mit Websites konfrontiert werden, die mit Layouts mit fester Breite für breitere Bildschirme entwickelt wurden. Standardmäßig gingen mobile Browser davon aus, dass 980 Pixel die Breite des Designs waren, und zwar nicht falsch. Auch wenn Sie ein flüssiges Layout verwendet haben, würde der Browser eine Breite von 980 Pixeln anwenden und dann die gerenderte Webseite auf die tatsächliche Breite des Bildschirms skalieren.

Wenn Sie responsives Webdesign verwenden, müssen Sie den Browser anweisen, diese Skalierung nicht vorzunehmen. Dazu kannst du ein meta-Element im head-Element der Webseite verwenden:

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

Es gibt zwei durch Kommas getrennte Werte. Der 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. Dies teilt dem Browser mit, wie viel oder wie wenig Skalierung erforderlich ist. Bei einem responsiven Design soll der Browser überhaupt keine Skalierung vornehmen.

<ph type="x-smartling-placeholder">

</ph>

Sobald das meta-Element vorhanden ist, sind deine Webseiten responsiv.

Modernes responsives Design

Heute können wir Websites erstellen, die weit über die Größen des Darstellungsbereichs hinausgehen. Mit Medienfunktionen erhalten Entwickler Zugriff auf Nutzereinstellungen und personalisierte Funktionen. Mit Containerabfragen können Komponenten ihre eigenen responsiven Informationen besitzen. Mit dem picture-Element können Designer Entscheidungen zur Art der Ausrichtung anhand von Bildschirmverhältnissen treffen.

Wissen testen

Testen Sie Ihr Wissen über responsives Webdesign

Responsives Webdesign bietet eine aufregende, wachsende Welt der Möglichkeiten. Im weiteren Verlauf dieses Kurses lernen Sie diese Technologien kennen und erfahren, wie Sie damit responsiven Webdesigns für alle.