Was ist responsives Design?

Es ist noch nicht lange her, dass sich Designer nicht wirklich darum kümmern mussten, wie Websites auf Mobiltelefonen und Tablets aussahen. Telefone waren noch nicht wirklich praktisch für das Betrachten des Internets, und vor dem iPad waren Tablets eher eine Neuheit als ein Muss.

Offensichtlich hat sich all das geändert, und die meisten Technologieexperten sagen voraus, dass in den nächsten Jahren, wahrscheinlich eher früher als später, das mobile Surfen das Desktop-Browsing als vorherrschende Art der Betrachtung des Webs überholen wird.

Mit einer sich ständig weiterentwickelnden Auswahl an Bildschirmgrößen und Geräten, einschließlich Videospielkonsolen und Internetfernsehern, sind die alten Methoden des Webdesigns einfach nicht mehr der Aufgabe gewachsen. Und da Unternehmen die Notwendigkeit erkennen, ihre Online-Erfahrung für mobile Benutzer zu optimieren, werden Designer, die sich nicht anpassen, zurückgelassen.

Anmerkung des Herausgebers: Das Folgende ist eine Einführung in das Responsive Design für Anfänger, die nicht für erfahrenere Webdesigner gedacht ist.

Die Hauptkomponenten von Responsive Design

Hier kommt Responsive Webdesign ins Spiel, Inhalte und/oder Layout, die sich automatisch an die Größe des Bildschirms anpassen, auf dem sie betrachtet werden. Die drei wichtigsten Elemente des Responsive Design sind im Grunde genommen ein flexibles Raster, flexible Bilder und Medienabfragen, wobei letztere als Teil von CSS3s eingeführt wurden. Mehr dazu gleich.

Flexible Gitter

Flexible Raster sind im Grunde Themen und Vorlagen, in denen Designelemente in Prozenten und nicht in Pixeln festgelegt werden. Mit Prozent als Maßeinheit bedeutet das, dass ein Element, das auf 50 % ausgelegt ist, immer die Hälfte des Bildschirms einnimmt, egal wie groß oder klein der Bildschirm ist.

Flexible Bilder

Im Grunde könnten flexible Bilder nicht einfacher zu erstellen sein, indem eine einfache Regel geschrieben wird, die besagt:

 img { max-width: 100%; }

Im Wesentlichen bedeutet dies, dass, wenn ein Element größer als sein Container ist, die Regel es dazu zwingt, der Breite dieses Containers zu entsprechen. Und da moderne Browser die Bildgröße proportional ändern, bleibt auch das Bildseitenverhältnis erhalten. Darüber hinaus kann die 100%-Regel auch für fast alle anderen Elemente, wie eingebettete Videos, verwendet werden.

Die Medienabfrage

Seit der Einführung von Media Types in CSS 2.1 haben Stylesheets mobile und andere Geräte viel stärker integriert. Medientypen ermöglichen im Wesentlichen das Styling, um auf bestimmte Klassen von Webgeräten abzuzielen, wobei diese Typen Handheld, Bildschirm und Fernseher umfassen. Aber mit wenig Standardisierung zwischen Geräten und wenig Unterstützung von Geräteherstellern haben Medientypen ihr Potenzial nie ausgeschöpft.

Medienabfragen werden diesem Potenzial gerecht und noch einiges mehr. Aber anstatt sich wie Medientypen mit dem Gerätetyp zu befassen, betrachten Medienabfragen stattdessen die Fähigkeiten des Geräts.

Eine einfache Medienabfrage könnte so aussehen:

Die beiden Komponenten der Abfrage sind der Medientyp, festgelegt als Bildschirm, und dann die eigentliche Abfrage – (max-device-width: 480px) – die im Wesentlichen fragt, ob die Breite des Geräts 480 Pixel oder weniger beträgt. Wenn dies der Fall ist, lädt das Gerät die Datei "generic.css". Wenn nicht, wird der Link wie andere ignoriert, bis die richtige Auflösung identifiziert und das entsprechende Stylesheet geladen ist.

Mehr als nur Auflösung

Aber die Auflösung ist keineswegs das einzige Gestaltungselement, das durch den Einsatz von Media Queries gesteuert werden kann. Breite und Höhe des Browserfensters, Quer- und Hochformat, sogar Layout sind einige der weiteren einstellbaren Parameter.

Wenn beispielsweise eine Medienabfrage erkennt, dass es sich bei einem Gerät um ein Smartphone handelt, wird möglicherweise ein Design geladen, das drei Spalten mit einem Textbereich und zwei vertikalen Seitenleisten auf einem Computerbildschirm anzeigt, und kann auf dem Smartphonebildschirm als Textbereich in voller Breite mit dem geladen werden zwei Seitenleisten als horizontale Elemente darunter.

Eine flexible Denkweise

Eine Schlüsselvoraussetzung für flexibles Design sind natürlich Designer mit einer flexiblen Design-Denkweise. Leider sind die meisten Webseiten für Mobilgeräte immer noch nicht so benutzerfreundlich, vor allem, weil die meisten Designer immer noch typischerweise nur für den Desktop mit Smartphones und Tablets im Nachhinein entwerfen. Nur wenige Designer nähern sich dem Design mit mehreren Plattformen im Hinterkopf.

Während es bei der Einbindung von Medienabfragen in Stylesheets eine Lernkurve gibt, ist es der Übergang vom Design mit Pixeln zum Design mit Prozentsätzen, der einige Webdesigner aufhält. In Wirklichkeit gibt es jedoch keinen großen Unterschied beim Entwerfen mit Prozentsätzen, und es ist auch einfacher.

Betrachten Sie beispielsweise den Unterschied zwischen der Zuweisung von Breiten von 100 % und 100 Pixel an zwei identische Elemente. Zum einen können Sie sicher sein, dass das Element den Bildschirm ausfüllt, egal ob es sich um den Bildschirm eines Desktops, Laptops oder iPhones handelt. Aber ein 100 Pixel breites Element wäre auf einem 480-Pixel-iPhone-Bildschirm groß, aber vergleichsweise winzig auf einem Desktop-Bildschirm mit einer Auflösung von 1600 × 900.

Responsive Design bedeutet Geschäft

Für Unternehmen liegt der Hauptgrund für die Implementierung von Responsive Design auf der Hand. Je einfacher es für potenzielle Kunden ist, zu navigieren und zu finden, wonach sie suchen, desto höher ist die Konversionsrate. Aber für viele Designer bedeutete Responsive Design für eine Unternehmenswebsite normalerweise nur, die Größe des Inhalts zu verkleinern, um auf einen kleineren Bildschirm zu passen. Jeder, der Zeit damit verbracht hat, herumzuscrollen und hinein- und herauszuzoomen, um die gesuchten Informationen zu finden, weiß, dass eine Miniaturversion einer Website nicht die Antwort ist.

Eine andere Art und Weise, wie Unternehmen und Designer mit dem Problem des Entwerfens für ein mobiles Gerät umgegangen sind, bestand darin, eine separate Website für verschiedene Geräte mit automatischen Weiterleitungen je nach Gerät zu erstellen. Dadurch kann die beste Benutzeroberfläche bereitgestellt und ein durch JavaScript und große Bilder verursachtes langsames Laden vermieden werden.

Aber es gibt mehrere Nachteile bei diesem Ansatz. Einer davon sind sicherlich die Kosten für die Erstellung und Pflege mehrerer Websites und die Koordinierung von Inhalten über diese Websites hinweg. Und natürlich muss noch eine weitere neue Website erstellt werden, wenn ein neues Gerät auf den Markt kommt. Glücklicherweise kann Responsive Design, wenn es richtig gemacht wird, fast alle Probleme beim Design für mobile Geräte lösen.