Was ist Webdesign?

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.

Webdesign & Usability

Bedienungsfreundlichkeit wird zur Selbstverständlichkeit

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.

Responsive Webdesign

Warum Responsive Design an Bedeutung gewinnt

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.

Von Fixed bis Responsive Webdesign

4 Designansätze im Vergleich

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.

plus_iconInhalte passen sich dem Verfügbaren Platz an (Optimale Platznutzung)
plus_iconEs können mehr Inhalte dargestellt werden
minus_iconÜberlappung der Elemente wenn der Platz nicht mehr ausreicht
minus_iconKomplexere Planung und Umsetzung: Muss flexibel gestaltet werden, dadurch ist der Designer „eingeschränkt“
minus_iconAnpassungen 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.

plus_iconLeicht verständlich
plus_iconEinfach: Unkomplizierte Umsetzung im Gegensatz zu anderen Designs
plus_iconViel Freiheit (da es keine flexiblen Elemente gibt, wodurch keine Anpassungen nötig sind)
minus_iconStatisch: Elemente passen sich nicht dem verfügbaren Platz an
minus_iconNur 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.

plus_iconStarres Raster: Viel Freiraum für Gestaltung ohne Bedenken zu haben
plus_iconSehr einfach gestrickt, von der Konzeption bis zur Gestaltung
plus_iconUnkompliziert: Inhalte passen sich an, sind aber nicht flexibel
minus_iconEs wird nur für bestimmte Viewports bzw. Geräte optimiert
minus_iconAuf abweichenden Geräten kommt es häufig zu einer fehlerhaften Darstellung
minus_iconZielgruppenanalyse 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.

plus_iconFür jede Displaygröße geeignet
plus_iconInhalte passen sich an, es wird also kein Platz verschenkt
plus_iconVerschieden Viewports erlauben das Anpassen der Seiteninhalte für eine besser Strukturierung und Gestaltung
minus_iconSehr komplex, von der Planung bis hin zur Umsetzung
minus_iconZeitintensiv

Webdesign-Ansätze interaktiv erleben

Den Unterschied zwischen den verschiedenen Webdesign-Ansätzen von Fluid bis Responsive Webdesign zeige ich dir am besten live. Folge dem Link und teste die 4 Design-Ansätze aus, indem du dein Bildschirmfenster jeweils verkleinerst und vergrößerst.

Fazit

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?

Mehr zum Thema Webdesign
Die Vorteile eines guten Webdesigns

Vielen Dank fürs Lesen!

Dennis Elbert

Passionierter Webdesigner