4 Designansätze mit ihren Vor- und Nachteilen

Bevor ich die vier Designansätze Fixed Design, Fluid Design, Adaptive Design und Responsive Design darstelle, erläutere ich, was Webdesign überhaupt bedeutet:

Webdesign ist im Grunde genommen das Website Design. Site kann man als Struktur und als zu gestaltende Fläche verstehen, da die Übersetzung als Bauplatz, Baugrundstück, Anlage oder ähnlichem übersetzt werden kann. Daher spielen die (Seiten-) Struktur, als auch die Funktionalität, zum Beispiel wie die Seiten untereinander verlinkt sind, eine wichtige Rolle. Der Begriff Design deckt aber auch die eigentliche grafische Gestaltung, also wie der entsprechende Internetauftritt letztendlich auszusehen hat, ab.

Einer der wichtigsten Punkte für ein gelungenes Webdesign ist aber mittlerweile die Usability, die Benutzer- und Bedienungsfreundlichkeit einer Internetseite. Findet der Seitenbesucher nicht schnell das, was er sucht, ist der Aufbau einer Seite nicht eingängig und unverständlich. Die Folge ist in den meisten Fällen das Verlassen der Seite.

Sowohl aus gestalterischer als auch technischer Sicht sollte alles getan werden, damit Besucher auf der Seite bleiben.

Ein gutes Webdesign und eine gute Internetseite zeichnet sich vor allem durch eine intuitive Bedienung, einen guten Aufbau, einer guten Performance und ein gutes Look & Feel aus. Erfüllst du die Erwartungen deiner Seitenbesucher und sie fühlen sich auf deiner Seite wohl, dann stehen die Chancen gut, dass du deine Ziele mit der Internetseite auch erreichen wirst.

Das Webdesign beinhaltet somit die visuelle, funktionale und strukturelle Gestaltung einer Internetseite. Das Ziel ist eine für die Zielgruppe ideale Aufbereitung und Präsentation der Inhalte.

Bevor ich nun auf die Möglichkeiten eingehe, wie die einzelnen Webdesigns umgesetzt werden können, gehen wir erstmal darauf ein, warum es überhaupt verschiedene Designansätze gibt.

Wir beginnen in der Zeit, welche für viele junge Menschen heute wohl das finstere Mittelalter ist, zur Zeit vor Smartphones, Tablets und Full-HD Breitbildschirmen.

Als das Internet noch jung war und für die breite Bevölkerung eingeführt wurde, waren Computer und ihre Bildschirme recht einheitlich mit einem 4:3 Seitenverhältnis. Dabei musste man sich noch nicht viel Gedanken über Gestaltung und Anpassbarkeit machen. Mit der Zeit jedoch veränderten sich die Standards, und die Menschen besuchten Websites über verschiedene Bildschirme – unter anderem auch Breitbildschirme mit einem 16:9 oder gar 16:10 Seitenverhältnis, die eine höhere Auflösung besaßen.

Das Internet wurde beliebter. Online Einkaufen und Videos anschauen wurde zum Trend. Mit diesen Veränderungen musste natürlich auch der Aufbau und die Gestaltung der Seiten geändert werden. Spätestens mit dem Zeitalter der Smartphones und Tablets, als mobil unterwegs und im Internet zu sein in geworden ist.

Die Folge: Es musste sich an den Websites was ändern. Webdesigner mussten die Webseiten für alle Geräte und Bildschirmgrößen anpassen können.

Die Lösung: Mit CSS3 wurden Media Queries eingeführt. Und als Media Queries von den Browsern unterstützt wurden, stand dem Zeitalter des mobilen Internets nichts mehr im Wege.

Was sind Media Queries?

Media Queries sind Abfragemethoden. Bei diesen Methoden kann zum Beispiel abgefragt werden, wie groß die Auflösung eines jeweiligen Geräts ist oder ob es sich um Druckprodukt handelt. War eine Abfrage erfolgreich, so wird das jeweilige Stylesheet eingefügt beziehungsweise die Darstellung der Seite für das jeweilige Medium umgeändert.

Da nun geklärt ist, was Webdesign ist, mache ich weiter mit den verschiedenen Designs und was ihre Vorteile und Nachteile sind. Technisch und gestalterisch haben sich folgende Designs bewährt:

Fixed Design

Beim Fixed Design werden Elemente in Pixel, also statisch angegeben, das heißt die Elemente besitzen in diesem Design festgelegte Abmessungen. Die Seiten werden für einen bestimmten Viewport (der sichtbare Bereich eines Browserfensters) entwickelt, sodass bei einem Größeren Viewport viel Freiraum entsteht und der verfügbare Platz nicht genutzt werden kann. Besteht dagegen ein kleinerer Viewport als die Seite besitzt, wird diese abgeschnitten. Dadurch entstehen neben den vertikalen Scrollbalken auch horizontale Scrollbalken. Nutzer mit einem Smartphone müssen bei diesem Design hineinzoomen und viel auf ihrem Bildschirm wischen.

	Inhalte passen sich dem Verfügbaren Platz an (Optimale Platznutzung)
	Es können mehr Inhalte dargestellt werden
	Überlappung der Elemente wenn der Platz nicht mehr ausreicht
	Komplexere Planung und Umsetzung: Muss flexibel gestaltet werden, dadurch ist der Designer „eingeschränkt“
	Anpassungen sind aufwändig

Fluid Design

Dieses Design ist im Gegensatz zum Fixed Design flexibel, die Elemente besitzen prozentuale Breitenangaben.  Durch die flexible Gestaltung der Elemente können auf größeren Bildschirme dann beispielsweise mehr Inhalte abgebildet werden als auf kleineren. Das Fluid Design ist technisch nicht so leicht umsetzbar wie das Fixed Design weil der Designer die Flexibilität der Elemente im Auge behalten und alles vorbereiten muss. Teilweise ist er sogar eingeschränkt. Das Fluid Design besitzt auch eine „Erweiterung“, das sogenannte Elastic Design. In diesem Design werden sowohl die Breite als auch die Höhe prozentual angegeben.

	Leicht verständlich
	Einfach: Unkomplizierte Umsetzung im Gegensatz zu anderen Designs
	Viel Freiheit (da es keine flexiblen Elemente gibt, wodurch keine Anpassungen nötig sind)
	Statisch: Elemente passen sich nicht dem verfügbaren Platz an
	Nur ein Viewport: Es entsteht zuviel Freiraum falls er zu groß ist und wird abgeschnitten, falls zu klein

Adaptive Design

Das Adaptive Design ist im Grunde genommen das Fixed Design verbunden mit Media Queries. Das Design besitzt durch die Media Queries verschiedene Punkte, sogenannte Breakpoints durch welche sich das Design ändert oder besser gesagt dem Viewport anpasst. Dieses Design ist nur für bestimmte Gerätegrößen gedacht.

	Starres Raster: Viel Freiraum für Gestaltung ohne Bedenken zu haben
	Sehr einfach gestrickt, von der Konzeption bis zur Gestaltung
	Unkompliziert: Inhalte passen sich an, sind aber nicht flexibel
	Es wird nur für bestimmte Viewports bzw. Geräte optimiert
	Auf abweichenden Geräten kommt es häufig zu einer fehlerhaften Darstellung
	Zielgruppenanalyse zur Bestimmung der Viewports

Responsive Design

Responsive Design ist das Fluid Design oder das Elastic Design verbunden mit Media Queries. Durch die bestimmten Viewports und der Flexibilität der Elemente passen sich alle Elemente dem Platz an, egal wie groß das Display ist. Somit ist dieses für alle Endgeräte gedacht (Smartphone, Tablets, Desktop-PCs). Der Designer muss zusätzlich zum Fluid Design ab den Breakpoints das Design für die jeweilige Bildschirmgröße anpassen, was eine sehr Zeitintensive Arbeit ist.

	Für jede Displaygröße geeignet
	Inhalte passen sich an, es wird also kein Platz verschenkt
	Verschieden Viewports erlauben das Anpassen der Seiteninhalte für eine besser Strukturierung und Gestaltung
	Sehr komplex, von der Planung bis hin zur Umsetzung
	Zeitintensiv

Mittlerweile sollten meiner Meinung nach Websites für alle Endgeräte optimiert werden um die Reichweite und die Konvertierungsrate zu erhöhen. Ob ein Fluid oder Fixed oder womöglich ein Adaptive Design in Frage kommt hängt von den Anforderungen des Projektes ab. Bei der Recherche nach eindeutigen Definitionen sind wir leider nicht fündig geworden. Für unser Verständnis ist Responsive Webdesign der Überbegriff, da die Erfahrung zeigt, dass es in der Praxis oft Kombinationen sind.

Kennt ihr eine präzise Abgrenzung oder wie sind eure Erfahrungen?