Was ist Responsive Webdesign?

Der Begriff Responsive Webdesign umfasst verschiedene Techniken um eine Website an unterschiedliche Ausgabegeräte, wie Smartphone, Tablet, Smart-TV und neuerdings Smart-Watches und Autos auszuliefern. Erdacht oder zu erst erwähnt wurde der Begriff in diesen Artikel im Jahre 2010, von den im Bosten lebenden unabhängigen Webdesigner und Web-Developer Ethan Marcotte. Er schrieb auch das Buch Responsive Web Design dazu. Welches bereits in der zweiten Auflage erschienen ist.

In diesen kurzen Artikel will ich nur umreißen, worum es bei Responsive Webdesign geht. Dies soll kein Artikel sein, der tief in die Materie eintaucht.

Die Techniken hinter Responsive Webdesign sind folgende: Ein Fluides Grid, flexible Bilder und Media-Queryies. Diese nun kurz, und hoffentlich verständlich erklärt.

Fluides Grid:

Das Grid kommt eigentlich aus dem Printbereich. Jede Printzeitung hat so ein unsichtbares Gestaltungsraster, an das sich die Inhalte orientieren.

Hier ein Beispiel des Grids von Twitter Bootstrap 3.

bootstrap-grid

Das Grid von Bootstrap basiert auf 12 Spalten, wenn man so will. Wie in der ersten Reihe gut zu sehen. Es sind 12 Elemente, die jeweils einzeln unterteilt sind. Die zweite Reihe zeigt den ersten Container oder Spalte mit 8-facher Breite an. Übrig bleiben 4 bis zur 12. So führt sich das weiter. Denkbar sind alle Möglichkeiten, die 12 als Ergebnis haben. Halbe Spalten gibt es nicht.

Ein fluides Grid heißt also, dass sich die Spalten dem umschließenden Element anpassen, also zum Beispiel der vordefinierten gesamten Breite der Website. Die CSS-Klasse .col-md-12 hat zum Beispiel eine gesamte Breite von 970px. Die einzelnen CSS-Klassen für die Spalten oder auch Columns haben eine fluide Breite in Prozent. Darum auch fluides Grid. Mehr dazu gibt es in der Dokumentation von Twitter Bootstrap.

Durch Media-Queries, die weiter unten beschrieben sind, wird dieses Verhalten beschrieben, wenn es zu einen „Umbruch“ dieser Spalten kommen soll. Dies geschieht, wenn nicht genügend Platz für den vorhanden ist  und ein vordefinierter Wert den Umbruch auslöst.

Flexible Bilder:

Bilder auf einer Website haben normalerweise eine feste Größe. Dies ist hinderlich, wenn man die Website, zum Beispiel, auf einem Smartphone betrachten will und das Bild hat eine fest vorgegebene Größe. Abhilfe schafft eine relative Größe des Bildes, sodass es sich anpasst. Es gibt viele verschiedene Möglichkeiten und Tools, Bilder je nach gerät auszuliefern. Man bedenke nur das iPad, welches die doppelte Pixeldichte eines normalen Displays hat. So wirkt ein Logo schnell matschig und verschwommen auf dem iPad, sofern es nicht optimiert ist. Diese einzeln Tools und Techniken aufzuführen, würde den Artikel sprengen und zu tief gehen. Dafür braucht es einen eigenen Artikel.

Media-Queryies:

Dies sind nun die CSS-Regeln, nachdem sich das Grid und alle anderen Elemente richtet. Hier wird beschrieben, wie die Website, auf einer bestimmten Breite auszusehen hat. Zum Beispiel sieht meine Website auf dem iPhone 4 komplett anders aus als auf einen Desktop. So werden alle Spalten untereinander ausgerichtet. Aus einem 12 Spalten Grid wird ein Einspaltiges.

Zusammenfassung

Responsive Webdesign beschreibt die Technologien, die nötig sind, um eine reaktionsfähige Website aufzubauen. Mit reaktionsfähig ist gemeint, dass sich der Inhalt einer Website genau an das Ausgabegerät anpasst und so ein optimales Benutzererlebnis ermöglicht. Sei es von Handy oder Smart-Watch bis zum Smart-TV.

Ich hoffe, der kleine Einblick hat euch gefallen und ich konnte etwas Licht um den Begriff Responsive Webdesign schaffen. Es gibt viele Artikel da draußen, die tiefer in das Thema eintauchen. Zu empfehlen ist hier der Blog vom Kulturbanause.

 

Hallo Welt! Hallo Halle!

Hi. Mein Name ist Christoph Schade. Ich bin 31 Jahre alt. Ich lebe und arbeite seit 2009 in Halle. Seit 2009 beschäftige ich mich auch mit dem Internet. Angefangen mit einem kleinen privaten Blog, der noch selbst in HTML und CSS programmiert wurde.

Seit 2014 habe ich mich entschlossen, mein Glück als selbstständiger Webdesigner und Webdeveloper, in Halle zu versuchen. Ich liebe das Web und seine Möglichkeiten und freue mich jeden Tag, in diesen Beruf arbeiten zu dürfen.

Tja, was wird euch hier erwarten? Weiterlesen „Hallo Welt! Hallo Halle!“