Mobiles Layout oder responsive Design - was ist was und was ist besser?

10.04.2015

Immer mehr Websites werden von mobilen Geräten aus angesehen. Das Surfen zwischendurch oder von unterwegs ist beliebt.

Ob es auch Spaß macht, ist immer von der angesurften Website abhängig. Und dabei zum großen Teil, ob die Website-Darstellung - das Layout - "für mobile Geräte optimiert" ist.

Auf englisch heißt das übrigens "mobile-friendly" - handyfreundlich. Klingt viel schöner, finde ich.

Und handyfreundliche Websites sind nicht nur gut für Besucher, sondern in zunehmendem Maße auch für die Suchmaschinen-Positionierung.

Schon heute werden mobil-optimierte Websites in der mobilen Suche von Google hervorgehoben. Zum 21. April hat Google ein Update angekündigt, mit dem Websites, die keine mobil optimierte Ansicht haben, abgestraft werden.

Hier können Sie prüfen, ob Ihre Website oder Ihr Shop schon heute mobile-friendly ist: https://www.google.de/webmasters/tools/mobile-friendly/

Wozu überhaupt?

Mobile Geräte bringen etwas andere Voraussetzungen mit als herkömmliche PCs. Sie haben ein kleineres Display, können also entweder weniger Inhalte darstellen oder die Darstellung ist viel, viel kleiner als auf normalen Monitoren.

Zudem gibt es keine Tastatur, sondern das Buchstabenfeld öffnet sich innerhalb des Displays, was dann auch wieder einen Teil der Ansicht verschwinden lässt.

Außerdem werden sie mit den Fingern bedient, nicht mit der Maus, was bei zu kleinen Buttons eine feinmotorische Herausforderung sein kann.

Oft kommt dann auch noch eine geringere Bandbreite hinzu, d. h. mobile Geräte verfügen oft über einen langsameren Anschluss zum Internet. Dieselbe Datenmenge (Bilder usw.) braucht auf dem Handy länger, um vollständig geladen und angezeigt werden zu können.

All das sollte man mit einem mobil optimierten Layout abfangen, indem z. B. Buttons größer, die Gesamtbreite der dargestellten Seite geringer gemacht und möglichst auch Teile weggelassen oder dynamisch nachgeladen werden.

Responsive vs. mobile

Grundsätzlich unterscheidet man zwei unterschiedliche Strategien, mit denen Websites ein für mobile Geräte angepasstes Layout erhalten können. Rein optisch unterscheiden sich die beiden Varianten auf den ersten Blick übrigens kaum.

Beim sogenannten Responsive Design sieht die Website je nach Größe des Geräte-Displays anders aus. Genauer gesagt je nach dessen Auflösung, d. h. wie viele Bildpunkte dargestellt werden können. Je kleiner das Display wird, desto mehr schieben sich die Elemente untereinander statt nebeneinander, werden verkleinert oder sogar gänzlich ausgeblendet.

Das mobile Layout hingegen ist ein komplett anderes Layout, also eine andere optische Darstellung der gleichen Inhalte. Es wird immer dann aktiv, wenn der Webserver ein mobiles Gerät erkennt. Dabei ist die Displaygröße nicht mehr relevant, sondern lediglich das Merkmal "ich bin ein mobiles Gerät".

Übrigens gibt es noch eine dritte Möglichkeit, die hier aber nicht näher beleuchtet werden soll, die Entwicklung einer Web-App. Wie andere Apps, die Sie im App Store oder bei Google Play herunterladen können, gibt es dann auch eine App mit den Inhalten der Website / des Shops. Die Entwicklung ist aufwändig, jedoch können mit einer Web-App die Möglichkeiten, die mobile Geräte bieten, viel besser nutzen.

Responsive Design

Responsive Designs "reagieren" sozusagen auf die verfügbare Bildschirmgröße des Besuchers. Der Vorteil ist, dass für verschiedene Geräte (normaler Monitor, Ipad, Smartphone) verschiedene Darstellungen erstellt werden können. So lassen sich für die verschiedenen Geräte unterschiedliche Ansichten erstellen.

Responsive Designs ändern sich auch, wenn das Browserfenster verkleinert wird. Es lässt sich so relativ leicht testen. Ein Beispiel für den Einsatz von Responsiv fitkurs.de - Sie können es wie gesagt ganz leicht testen, indem Sie das Browserfenster verkleinern. Nach und nach werden verschiedene Elemente verschoben oder ausgeblendet.

Auch die Entwicklung solcher Layouts ist relativ einfach. Dabei werden für geringere Bildschirmgrößen zusätzliche Regeln erstellt, die einzelne Elemente ausblenden oder ihre Größe verringern.

Allerdings funktioniert Responsive Design erst auf dem Gerät, d. h. erst werden alle Inhalte heruntergeladen, das Gerät zeigt dann aber nur die Inhalte an, die für die verfügbare Displaygröße aktiviert sind. Ladezeit spart so ein Design (in der Regel) also nicht.

Zudem arbeiten Responsive Designs auch nicht 100% zuverlässig. Ganz grob erklärt: Einige Smartphone-Browser arbeiten mit einer höheren Auflösung und laden somit das Standard-Layout anstelle des optimierten Layouts. Es wird also zumindest in einigen Smartphone-Browsern oft nicht korrekt verkleinert.

Mobiles Layout

Während eine Website mit responsivem Design oft mit mehreren Ansichten für verschiedene Bildschirmgrößen aufwarten kann, gibt es beim Einsatz eines mobilen Layouts oft nur zwei Ansichten: die normale und die mobile.

Das mobile Layout blendet nicht nur einzelne Elemente aus oder verkleinert sie, sondern es ist eine komplett andere Ansicht der Website. Hier erfolgt die Unterscheidung nicht erst im Gerät des Besuchers, sondern bereits auf dem Webserver, bevor er die gewünschte Seite ausliefert. Daher können hier bereits vorher einige Filter greifen, die dafür sorgen, dass die Daten "in echt" kleiner oder gar nicht ausgeliefert werden.

Mobile Layouts können somit tatsächlich Ladezeit sparen.

Leider sind mobile Layouts aus demselben Grund etwas aufwändiger in der Erstellung. Die Erkennung mobiler Geräte und die Auslieferung eines anderen Layouts muss schließlich erstmal programmiert werden. Für viele Websysteme existieren dafür allerdings bereits fertige Lösungen in Form von Plugins oder Modulen. OXID z. B. bringt das Mobile Theme Switch Modul für diesen Zweck mit. Und dann ist der Aufwand eigentlich gar nicht mehr höher, sondern oft sogar geringer!

Weil es sich hier um ein gänzlich anderes Layout handelt, das vom Server unter bestimmten Bedingungen ausgeliefert wird, lässt es sich auch mit relativ wenig Aufwand so anpassen, dass der Besucher das Umschalten deaktivieren kann. Er kann also per Mausklick auf die "normale" Ansicht wechseln, falls er damit besser zurecht kommt oder er bestimmte Inhalte vermisst. Vielleicht haben Sie einen solchen Link auch schon mal auf einer Website gesehen, er befindet sich meist ganz am unteren Ende der Seite.

Wir setzen mit unseren Websites, unserem Shop und dem Blog übrigens vollständig auf mobile Layouts. Denn weil sie komplett vom Standard-Layout abgekoppelt sind, habe ich hier als Website-Betreiber volle Flexibilität, welche Inhalte in welcher Reihenfolge angezeigt werden und bin nicht mehr vom Aufbau des herkömmlichen Layouts abhängig. Vor allem gibt es bei Änderungen keine Kreuzeffekte, auch ein sehr großer Vorteil.

Einen Nachteil haben mobile Layouts. Ein Tablet ist mit seiner Displaygröße irgendwie zwischen dem normalen Monitor und dem Smartphone-Display. Oft sieht beides nicht so richtig gut aus. Hier kann man dann vielleicht die Vorteile eines Responsive Designs nutzen (ja, eine Kombination aus beiden Strategien ist in der Tat auch noch möglich). Auch die Möglichkeit, ein drittes Layout nur für Tablets zu erstellen, gibt es natürlich. Hier muss man einfach abwägen, wieviel Aufwand Sinn macht und man in Kauf nehmen möchte.

Was ist denn nun besser?

Welche Variante die bessere ist, scheiden sich die Geister. Ich habe Webdesigner sowohl von der einen als auch von der anderen Variante schwärmen hören.

Ich finde, das responsive Design ist eine gute Möglichkeit, kurzfristig ein handyfreundlicheres Layout bereitzustellen. Langfristig lohnt sich aber eine Lösung wie ein echtes mobiles Design. Nach meiner Erfahrung ist es zuverlässiger und performanter (schneller).

Unsere Angebote auf die Schnelle

Nun ist ja nicht mehr sehr lange bis 21. April. Viele Shops und Websites haben noch gar kein mobil-optimiertes Layout. Hier nochmal der Link zum Testen Ihrer Site.

Alle unsere Angebote beinhalten die Anpassung mobiler Layouts, also Variante 2.

Für OXID eShops bieten wir die Anpassung des mitgelieferten Mobilen Themes (inkl. Behebung kleinerer Bugs) an. Dafür erstellen wir Ihnen gern ein Angebot.

Im WEB-Villa CMS sind mobile Layouts bereits enthalten.

Natürlich richten wir Ihnen gern auch für Ihr Wordpress ein mobiles Layout ein.

Bitte kontaktieren Sie uns für weitere Infos oder für die Umsetzung.

Sharing is caring - teile den Beitrag

Ähnliche Beiträge

Beitrag kommentieren