Websites werden immer häufiger von mobilen Geräten aufgerufen. Das Design einer Desktop-Ansicht für eine Website reicht nicht mehr aus. Es braucht beim Webdesign auch Layouts, die für Smartphones und Tablets funktionieren. Dabei spielen die Begriffe responsive & adaptive Webdesign eine Rolle. Was heißt das aber überhaupt?
Ein Webdesign, dass Nutzern auf verschiedenen Gerätegrößen eine gute Darstellung liefert, ist unumgänglich. Warum? Der Bildschirm auf einem Smartphone ist kleiner, außerdem hat er ein Hochformat. Der Platz, um eine Website anzuzeigen ist also völlig anders im Vergleich zu einem PC-Monitor. Wird eine Website gestaltet, die keine Informationen für die Ansicht auf einem Mobilgerät beeinhaltet, wird diese automatisch auf die Bildschirmgröße angepasst. Sie können sich das so vorstellen, dass Sie ein Querformat-Foto haben und dieses nun in einen hochformatigen Rahmen quetschen. Das passt nicht gut 😉
Nun wird eine Website natürlich nicht wirklich zusammengedrückt. Aber: Eine große Schrift zum Beispiel wird auf einem Smartphone nicht automatisch kleiner dargestellt, sondern sie bleibt so groß. Die Wörter umbrechen allerdings sehr häufig. So passiert es, dass ein Satz einen gesamten Smartphone Bildschirm füllt. Auch Abstände, die auf dem Dekstop gut aussehen, können auf einem Smartphone zu großen Lücken führen. Aus diesem Grund ist es wichtig, dass man seine Website auf die verschiedenen Gerätegrößen anpasst.
Responsive Design und Adaptive Design
Es gibt nun zwei Optionen beim Webdesign für mobile Geräte. Beim Responsive Design geht man von einem grundlegenden Design aus und passt dieses an einigen Stellen für das jeweilige Gerät an. Zum Beispiel kann man auf dem Dekstop wunderbar zwei, drei oder vier Spalten nebeneinander haben, weil ausreichend Platz in der Breite vorhanden ist. Auf einem Smartphone hat man aber nur Platz für eine Spalte. Also werden die Inhalte nicht mehr nebeneinander, sondern untereinander angeordnet. Das Layout ist sozusagen elastisch und verschiebt sich. Zum Beispiel vier Fotos, die am PC nebeneinander stehen, sind auf dem Smartphone untereinander angeordnet. Auch die Schriftgrößen werden angepasst und für mobile Geräte entsprechend verkleinert. Wir haben also überall ein gleiches Design, welches wir aber in der Darstellung auf die Bildschirmgröße anpassen.
Beim adaptive Webdesign gestaltet man wiederum für jedes Gerät ein eigenes Template. Wir haben also ein Website-Design für den Desktop, eines für das Smartphone und eines für die Tablet-Ansicht. Wenn ein Besucher die Website aufruft, überprüft ein Skript die Bildschirmgröße und zeigt das entsprechende Design an. Demnach gebe ich bei der Gestaltung schon im Vorfeld die Maße für mein Design an. Und hier entsteht ein Nachteil. Nämlich: Es gibt keine genormten Größen für Bildschirme. Die Größe eines Bildschirms schwankt je nach Hersteller, aber auch nach Geräteversion. Smartphone Bildschirme von Samsung haben andere Größen, als die von Apple. Meine Website wird also unter Umständen nicht immer optimal angezeigt. Es kann auch passieren, dass die falsche Ansicht geladen wird und auf einem kleineren Tablet die Smartphone-Version angezeigt wird.
Lieber responsive Webdesign
Ich bevorzuge ein responsives Webdesign. Der Vorteil ist, dass sich dieses flüssig an die Gerätegröße anpasst und der verfügbare Raum optimal ausgenutzt wird. Die einzelnen Elemente brechen um, sobald die Bildschirmgröße kleiner wird. Die Darstellung des Inhalts steht klar im Fokus. Natürlich geht man hier optisch ein paar Kompromisse ein. Dafür hat man aber ein gutes Ergebnis auf allen erdenklichen Bildschirmgrößen.