Erfolg durch modernes Webdesign für Desktop, Mobile und mehr
Mit welchen Designansätzen lässt sich die Vielfalt der verschiedenen Endgeräte versorgen? Und gibt es einen Königsweg?
Surfen auf dem TV, Desktop, Smartphone, Tablet … die Internetnutzung ist vielfältig geworden. Eine gute Website sollte dies berücksichtigen und dem Nutzer ein optimales Surf- bzw. Einkaufserlebnis auf den unterschiedlichen Endgeräten ermöglichen.
Dies gilt sowohl für die Unternehmenshomepage als auch für Informationsseiten, Communities und Online-Dienstleistungen sowie – und hier vielleicht in besonderem Maße – für Online-Shops und e-Commerce. Doch mit welchen Ansätzen kann modernes Webdesign den neuen Anforderungen einer mobilen, diversifizierten Internetnutzung und der unterschiedlichen Devices gerecht werden?
In den letzten Jahren haben sich im Webdesign unterschiedliche konzeptionelle Designansätze herausgebildet:
Static Webdesign
Als Static Webdesign bezeichnet man ein statisches und vor allem unbewegliches Layout. Static Webdesign kann wohl als die „ursprüngliche“ Art und Weise bezeichnet werden, Internetseiten zu gestalten. Ähnlich wie im Printbereich wird beim Static Webdesign die Website mit einer festgelegten Breite und fest vorgebebenen inhaltlichen Elementen angelegt.
Folglich passt sich das Webdesign auch nicht für unterschiedliche große Browserfenster und Auflösungen an. Zu Zeiten als das Internet fast ausschließlich über Desktop-PCs mit geringen Unterschieden in der Auflösung genutzt wurde, wurde Static Webdesign den Anforderungen gerecht. Heutzutage, mit Nutzung von Smartphones und Tablets, ist dies nicht mehr der Fall. Auf kleinen Bildschirmen muss dann fleißig gescrollt werden oder die Darstellung wird ausgezoomt so klein, dass Texte kaum mehr zu entziffern sind und Schaltflächen nicht angeklickt werden können.
Liquid Webdesign oder Fluid Webdesign
Beim Liquid Webdesign oder auch Fluid Webdesign werden für die Gestaltung der Website keine festen Pixelwerte mehr verwendet, sondern die Angaben von z.B. Breite von Website und Content-Blöcken, die Größe von Bildern und die Größe der Schriften etc. werden prozentual im Verhältnis zur jeweiligen Bildschirmgröße angegeben.
Auflösung bzw. Größe des Browserfensters sowie die Größe der Elemente auf der Website stehen bei dieser Art des „fließenden Webdesigns“ also relativ zueinander im Verhältnis. Ändert sich die Auflösung bzw. die Größe des Browserfensters, so kann sich die Größe der Website-Elemente stufenlos anpassen.
Adaptive Webdesign
Beim Adaptive Webdesign ändert sich die Größe und das Aussehen der Website in festen Stufen. Unterschreitet die Auflösung bzw. die Größe des Browserfensters einen bestimmten Schwellenwert, so ändert sich auch das Aussehen der Website. Technisch lässt sich dies z.B. mit unterschiedlichen Templates oder CSS-Anweisungen unter Verwendung eines Content Management Systems realisieren. Prinzipiell verhält sich Adaptive Webdesign so, als wären mehrere statische Websites für unterschiedliche Auflösungen bzw. Endgeräte hinterlegt worden. Die Unterschiede betreffen jedoch nur die Programmierung des Webdesigns, nicht den Datenbestand/Content, so dass die Inhalte der Website nur einmal gepflegt werden müssen.
Responsive Webdesign
Responsive Webdesign ist in der Regel eine Mischung aus Liquid Webdesign und Adaptive Webdesign. Die Elemente der Website passen sich beim Responsive Webdesign automatisch der verfügbaren Bildschirmauflösung an. Dabei vereint Responsive Webdesign die Vorteile der beiden vorhergenannten Design-Ansätze und kann so eine möglichst optimale Darstellung für viele unterschiedliche Endgeräte und Auflösungsstufen erreichen.
Einerseits können damit kleinere Unterschiede in der Auflösung innerhalb z.B. einer Gerätegattung (Smartphone, Tablet, Desktop etc.) mittels der „fließenden“ Größenanpassung aus dem Konzept des Liquid Webdesigns ausgeglichen werden. Andererseits verhindert die Definition von Darstellungsalternativen für feste Stufen, dass z.B. die Schrift zu klein wird oder Schaltflächen nicht mehr mit dem Finger angeklickt werden können.
Über die definierten Stufen lassen sich zudem generelle Layout-Änderungen ansteuern, wenn beispielsweise auf dem Smartphone Content-Blöcke mit nicht unbedingt notwendigen Zusatzinformationen oder rein schmückende Bilder aus Platzgründen nicht angezeigt werden sollen.
Auswahl des richtigen Design-Ansatzes
Da sich die vorgestellten Design-Konzepte in der Umsetzung unterscheiden, sowohl im Aufwand der Erstellung als auch in den Anwendungsmöglichkeiten, ist es schwierig eine pauschale Aussage zu treffen, welcher Design-Ansatz heutzutage optimal ist. Die Auswahl des richtigen Design-Ansatzes, insbesondere auch unter Kosten-Nutzen-Gesichtspunkten, ist vom konkreten Anwendungsfall und der zu erreichenden Zielgruppe abhängig. Beispielsweise gibt es auch immer noch Anwendungsfälle, bei denen ein rein statisches Webdesign ausreicht.
Für das Gros der öffentlich im Internet erreichbaren Seiten wird jedoch sicherlich eine Darstellung sinnvoll sein, die sowohl Desktop-Systemen als auch mobilen Endgeräten mit kleinerer Auflösung gerecht wird.
Aktuell weit verbreitet sind hierzu vor allem zwei Lösungsansätze:
- Static Webdesign mit unterschiedlichen Versionen für Desktop und mobile Endgeräte
- Responsive Webdesign
Auch hier kann kein Königsweg für alle Anwendungsfälle genannt werden. Allerdings ist für uns, in unserer täglichen Arbeit als Webdesign- und Internetagentur oftmals das Responsive Webdesign die bessere Wahl.
Die besondere Stärke des Responsive Webdesign liegt vor allem in der großen Flexibilität, die eine optimale Darstellung auf vielen unterschiedlichen Auflösungsstufen ermöglicht. Kehrseite der Medaille ist jedoch ein deutlich höherer Aufwand bei der Konzeption der Internetseite (mit optimaler User Experience für die unterschiedlichen Auflösungsstufen) sowie in der Programmierung.
Daher kann im Hinblick auf die Kosten durchaus auch der Einsatz von Static oder Adaptive Webdesign in unterschiedlichen Versionen sinnvoll sein, wenn beispielsweise nur sehr wenige Auflösungsstufen benötigt werden oder wenn die mobile Version der Website grundsätzlich sehr unterschiedlich zur Desktop-Version ist – also zum Beispiel eher einen App-Charakter mit gezielt ausgewählten Handlungsoptionen hat.
Weitere Artikel zum Thema:
Tag-It: Responsive Webdesign, Mobile Webdesign, Mobiloptimierung von Internetseiten, Designansätze, HTML-Programmierung, CSS, SEO
[…] Erfolg durch modernes Webdesign für Desktop, Mobile und mehr […]