Responsive Web Design – Teil 2: Lösungsansätze

In diesem zweiten Teil der Responsive Web Design-Serie werden die verschiedenen Ansätzen des Responsive Web Design vorgestellt und erklärt.

Im ersten Teil der Serie habe ich erklärt, warum Responsive Web Design wichtig ist und es 2014 eigentlich keinen Relaunch mehr ohne geben sollte. In diesem Teil möchte ich mich mit den verschiedenen Ansätzen des Responsive Web Design beschäftigen.

Responsive Web Design nach Liquid Layout

Bei einem Liquid Layout wird immer die gesamte Breite (also 100%) des Browsers genutzt, die Elemente ordnen sich darin nach bestimmten Vorgaben an. Diese Lösung eignet sich vor allem für Layouts, bei denen „Tiles“, also kleine Content-Schnipsel, vorkommen. Beispielsweise E-Commerce-Systeme wie amazon.com: Jedes Produkt ist ein einzelnes Tile mit einer fixen Breite; je nach Auflösung passen mehr oder weniger Elemente in eine Zeile.

Ein weiterer spezieller Vertreter dieses Layouts ist Pinterest. Alle Pins haben die gleiche Breite, aber (meistens) unterschiedliche Höhen. Die Anordnung erfolgt in Spalten, mit dem neuesten Element ganz oben.

pinterest

Pinterest ist ein prominenter Vertreter des Liquid Layouts.

Dass dieser Ansatz aber nicht für alle Inhalte geeignet ist, zeigt wikipedia. Der Text zieht sich fast über die gesamte Breite und wird dadurch bei hohen Auflösungen unleserlich.

Responsive Web Design im Grid

Den meisten Layouts liegen Grids zugrunde. Das hat viel mit der Technik dahinter zu tun, aber auch für die logische Anordnung ist ein Raster hilfreich. Als ideale Lösung haben sich zwölf Spalten herauskristallisiert, da sich diese Zahl relativ flexibel aufteilen lässt: Spalten werden zusammengefasst und ergeben so einen Block. Ein Seitenblock kann so drei Spalten (25%) einnehmen, der Hauptbereich die übrigen 75%. Oder gleichwertig mit zweimal sechs Spalten usw.Wenn man hinter die Kulissen von vielen Websites schaut, entdeckt man, dass den meisten ein 12 Column Grid zugrunde liegt. Ein prominentes Beispiel, das in diesem Zusammenhang immer wieder genannt wird, ist die Website des Boston Globe.

boston-globeDie Website des Boston Globe wird sehr häufig als Best Case für das 12-Column-Grid genannt

Das Grid Layout in verschiedenen Auflösungen

In geringeren Auflösungen werden Spalten weggelassen: So werden im Tablet-Hochformat nur noch neun Spalten verwendet, auf dem Handy im Querformat sechs und im Hochformat vier Spalten.

Für den „Übergang“ zwischen den Auflösungen gibt es wiederum zwei Ansätze: Entweder teilt sich die gesamte Breite auf die Spaltenanzahl auf (beispielsweise mashable.com) oder aber man wählt eine fixe Spaltenbreite und richtet die Website zentriert aus (z.B. readwrite.com).

readwrite

Auf readwrite.com wird eine fixe Layout-Breite für jede Auflösung verwendet.

Sonderformen des Responsive Webdesign

Natürlich gibt es noch weitere Ansätze, wie man eine Website im Responsive Webdesign umsetzen kann. Liquid Layout und Column Grid sind aber die häufigsten Grundideen, auf die die Lösungen aufbauen.

Im nächsten Teil der Serie werde ich darauf eingehen, wie man ein Responsive Webdesign am besten angeht.

Newsletter abonnieren

    Du willst mit uns moshen, jammen, rocken? Get in touch: Schieb uns deine Challenge in den Briefkasten und wir melden uns mit einer Lösung!

    Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

    Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

    Danke für deine Nachricht

    Wir freuen uns und melden uns asap. Bis bald.

      Du willst moshen, jammen, rocken? Bist du Pulpie, oder was? Schieb uns deine Mappe durch den Türschlitz!

      Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

      Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

      Danke für deine Bewerbung

      Wir melden uns asap. Vielleicht sogar mit einer Einladung zum Kennenlernen. Frisier dich schon mal. Irokese, wallende Mähne oder Seiten auf null – alles Wurscht. Hauptsache die Chemie stimmt.

        Hallo Brieffreund:in!

        Du möchtest gerne mehr von uns lesen? Melde dich für unseren Newsletter an und schon hast du unser Wort!

        Pulpmedia verpflichtet sich, Ihre Privatsphäre zu schützen und zu respektieren. Wir verwenden Ihre persönlichen Daten nur zur Verwaltung Ihres Kontos und zur Bereitstellung der von Ihnen angeforderten Produkte und Dienstleistungen.

        Mit dem Absenden des Formulars stimmen Sie der Speicherung und Verarbeitung Ihrer persönlichen Daten durch Pulpmedia zu. Sie können diese Benachrichtigungen jederzeit abbestellen. Weitere Informationen zum Abbestellen, zu unseren Datenschutzverfahren und dazu, wie wir Ihre Privatsphäre schützen und respektieren, finden Sie in unserer Datenschutzrichtlinie.

        Danke für deine Anmeldung

        Um die Anmeldung abzuschließen, klicke bitte auf den Link in der E-Mail, die wir soeben an dich gesendet haben.