Tel.: +49(0) 201-458 44 102

Webseiten Relaunch V3 - Responsive Webdesign, adaptive vs. fluid Layouts

Datum:

2013.07.11

Lesedauer:

2 Minuten, 13 Sek.

Innerhalb von wenigen Monaten habe ich nun schon den zweiten Relaunch meiner Webseite vorgenommen. Zum einen natürlich, weil sich durch die Heirat mit meiner bezaubernden Frau mein Nachname von Helms zu Brux geändert hat und zum anderen, weil die bisherige Webseite aus verschiedensten Gründen nicht optimal war. In den nächsten Posts möchte auf den Relaunch der Webseite einmal genauer eingehen und technische Aspekte, sowie Gestaltungsentscheidungen näher erläutern.

In Teil 1 dieser Serie möchte ich erst einmal auf ganz grobe Layout Entscheidungen eingehen und erläutern warum ich sie so umgesetzt habe.
Um eine Webseite responsive, sprich für verschiedene Endgeräte optimiert, zu gestalten hat man als Webdesigner im Grunde zwei Möglichkeiten.

Adaptive Layouts

Man Gestaltet die Webseite wie bisher für eine bestimmte Bildschirmauflösung optimiert (Viele Grid Systeme arbeiten mit der bewährten Auflösung von 960 px Breite) und passt dieses Layout dann über CSS Mediaqueries an die verschiedenen Bildschirmauflösungen (Smartphones, Tabletts, etc.) an. Man spricht hierbei von sogenannten adaptiven Layouts. Diese haben den Vorteil, dass man sich als Webdesigner erst einmal in seiner Grundgestaltung nicht groß umstellen muss, da man sich in bekannten "Pixelgefilden" bewegt und sich (bestehende) Layouts somit schnell anpassen lassen.
Der Nachteil dieser Lösung liegt in der festen absoluten Breite und der dadurch entständen Bindung an vor definierte Bildschirmauflösungen. Wird die Webseite auf einem Bildschirm angezeigt, welcher mehr als 960 px Breite darstellen kann, so wird der umliegende Weißraum nicht verwendet. Man verschenkt Platz und verschlechtert in vielen Fällen, wie z.B. bei TV-Geräten, deutlich die Lesbarkeit durch zu kleine Typografie.

Fluide Layouts

Die zweite und deutlich flexiblere, wenn auch aufwendigere, Lösung ist ein so genanntes fluides/flexibles/elastisches Layout. Hierbei verwendet man nicht mehr feste Pixel Maße, sondern prozentuale Werte. Die Vorteile liegen auf der Hand: egal welche Auflösungen das Ausgabegerät hat, die Webseite passt sich in Layout und Typografie immer optimal an.
Aufwendiger wird diese Lösung dadurch, dass Bilder und Typografie einer weiteren Optimierung bedürfen.

Fazit

Täglich werden immer neue Smartphones, Tabletts, Fernsehgeräte, etc. mit immer neuen Bildschirmauflösungen vorgestellt. Um hier mit seiner Webseite wirklich überall optimal erreichbar zu sein, führt meiner Meinung nach kein Weg mehr um fluide Web Layouts herum. Aus diesem Grund habe ich mich bei dem Relaunch meiner Webseite auch für ein solches fluides Weblayout entschieden. Man kann dies ganz einfach selber testen, indem man das Browser Fenster mit diesem Post hier größer und kleiner zieht. Schrift und Bilder passen sich immer optimal an.