Wissenswertes zu den Themen Webdesign, Responsive Webdesign, Web-Entwicklung, Homepage Erstellung und Contao

Die explosionsartige Zunahme bei Endgeräten mit unterschiedlichen Displaygrößen und Auflösungen macht es für Webentwickler nicht leicht, sich zu Beginn eines Web-Projekts für eine geeignete Designmethode zu entscheiden. Das Dumme ist: So richtig schlau ist man eigentlich erst dann, wenn man weiß, welche Geräte die Besucher überwiegend nutzen, wenn sie auf die Seite kommen. Ob man sich beim Webdesign für Adaptive Design oder auf Responsive Design entscheidet, hängt von der Zielgruppe und vom Content ab.

Responsive Design – Flexibel aber aufwendig

Viele Webdesigner setzen auf das flexible Responsive Design, das sich durch Verwendung relativer Größen wie „em“ automatisch an die verschiedenen Displaygrößen anpasst. Anders als bei einer mobilen Website, die für die Displaygröße eines bestimmten Gerätes genau fixiert wird, passen sich die Elemente der Website beim responsiven Design an den Viewport an. Darunter wird der für die Darstellung verfügbare Platz im Browserfenster verstanden. Verkleinert oder vergrößert der Nutzer das Fenster, dann ordnen sich die Elemente automatisch neu an. Responsive Design stellt sicher, dass wirklich jede Displaygröße berücksichtigt wird. Aus der Sicht der Nutzer ist das praktisch, weil der Content den verfügbaren Anzeigebereich immer optimal ausfüllt. Der Server muss das Gerät, an das er das Design ausliefert, nicht kennen. So praktisch der responsive Ansatz beim Webdesign auch erscheinen mag – der Gestaltungsaufwand ist wesentlich höher als beim Adaptive Design.

Adaptive Design – Perfekt auf bestimmte Geräte optimiert

Adaptive Design orientiert sich an zwei bis drei starren Gestaltungsrastern für bestimmte Displaygrößen beziehungsweise Viewports von gängigen Gerätetypen. Beispielsweise wird eine Ansicht für Desktop-PCs, ein weitere für Tablet-PCs und eine für Smartphones festgelegt. Hierbei gibt es keine fließenden Übergänge wie beim Responsive Design. Adaptive Design wird durch die feste Anzahl von Breakpoints, wie die Abgrenzungen zwischen den verschiedenen Layouts genannt werden, festgelegt. Weichen Endgeräte jedoch von den vorgegebenen Displaygrößen ab, kann es zu fehlerhaften Darstellungen kommen. So laden beispielsweise kleinere als die vorgegebenen Displaygrößen für Tablet-PCs automatisch die nächstkleinere Smartphone-Ansicht. Dem Nutzer wir der Content in einem smartphonegroßen Ausschnitt mit viel leerer Fläche um den Ausschnitt herum angezeigt. Das ist nicht nur optisch unschön, sondern führt auch zu Irritationen beim Nutzer. Es empfiehlt sich daher vor Beginn des Projekts eine Zielgruppenanalyse durchzuführen, um herauszufinden, welche Geräte mit welchen Displaygrößen die potenziellen User der Anwendung üblicherweise verwenden.

Fazit

Das Webdesign sollte sich weniger an Geräten und Displaygrößen orientieren, sondern vielmehr die Zielgruppe und schließlich den Content im Auge haben. Eine Website, die hauptsächlich für den mobilen Einsatz konzipiert wurde, erfordert eine andere Content-Strategie als eine Web-Anwendung mit stationärem Schwerpunkt. In diesen Fällen ist Adaptive Design das naheliegende Konzept. Bei Websites, die alle Geräteklassen und Displaygrößen ansprechen, wird die Webentwicklung um Responsive Design kaum herumkommen. Hier kommt es vor allem darauf an den Content so zu gestalten, dass er auf allen Geräten eine möglichst optimale UX bietet.