blumbryant gmbh

Postfach 258, 4601 Olten

©2019 by blumbryant gmbh

Impressum    Datenschutz

  • Gabriele Bryant

Mobile Webseiten: adaptives oder responsives Design?


Dass Sie heute eine nahtlos funktionierende mobile Webseite für Smartphones brauchen, ist klar. Immer mehr Menschen sind mobil online und Google hat seit Monaten auf den «mobile first index» umgestellt: das bedeutet, dass sich das Ranking Ihrer Webseite bei Google ausschliesslich nach der Performance und Funktionalität Ihrer mobilen Webseite richtet.


Mobile First Design?

Bei der Konzeption Ihrer Webseite sollten Sie also auf jeden Fall die mobile Funktion berücksichtigen. Ob Sie gleich ein «mobile first»-Design brauchen (ein Design, das zuallererst für mobile Nutzer konzipiert wird und dann erst Desktop-Nutzer berücksichtigt), ist eine Frage, die Sie relativ einfach mit einem Blick in Google Analytics beantworten können: Wie viele Besucher kommen mobil auf Ihre Seite und wie haben sich diese Zahlen in den letzten 12 Monaten verändert? Wenn seit 12 Monaten stark steigende Tendenzen zu beobachten sind, wenn Dreiviertel Ihrer wichtigsten Webseitenbesucher Ihre Seite mobil nutzen, dann sollten Sie in der Tat beim Relaunch «mobile first» denken. Aber Achtung: definieren Sie Ihre Zielgruppen sauber! Wen wollen Sie auf Ihre Webseite holen? Lokale, überregionale oder internationale Nutzer? Welche sind am wichtigsten für sie und wie ist deren Nutzungsverhalten?

Und: «mobile first» darf nicht bedeuten «desktop last», denn Seiten, die für die mobilen Nutzer toll, aber auf dem Laptop, PC oder grossen Monitoren völlig übergross und unübersichtlich gelayoutet sind, machen den Nutzern dort überhaupt keinen Spass.


Responsive oder Adaptive Design

Optimal mobil ist also klar. Aber heisst das jetzt «responsive» oder «adaptive» Design? Wichtig ist, dass sich die mobile Webseite für den Nutzer problemlos und automatisch jedem Gerät anpasst, ob Samsung oder Apple, klein oder gross, horizontal oder vertikal, Tablet oder PC oder Smart TV.


Responsive Webseiten reagieren auf die Grösse der Webseitenansicht, indem sie die Elemente der Webseite neu anordnen, so dass sie in das jeweilige Browserfenster passen. Die Webseite erfasst also automatisch, auf welchem Gerät sie geöffnet wird und passt sich der vorgegebenen Grösse an. Normalerweise rutscht dabei alles, was rechts ist unter das, was links ist und so muss beim Design der Webseite bedacht werden, in welcher Reihenfolge die Elemente in der mobilen Ansicht beim Scrollen erscheinen sollen. Sie können das beobachten und testen, indem Sie das Browserfenster einer Webseite mit der Maus verkleinern. Der Inhalt der Seite bleibt genau gleich, die Elemente ordnen sich nur übereinander an. Die Navigationszeile verschwindet im dreistreifigen so genannten «Burger»-Menu. Aus der Buchungsmaske wird vielleicht ein einfacher Button, Fotos erscheinen unter- anstatt nebeneinander, etc.


Im Unterschied dazu werden für eine adaptive Seite für unterschiedliche Geräte unterschiedliche Layouts fix angelegt. Meist sind es bis zu sechs Layouts, die den gängigsten Bildschirmgrössen entsprechen. Ziel ist, dem Nutzer auf jedem Gerät die für seine Absichten optimale Webseitenansicht zu zeigen. Die Seite erfasst auch hier automatisch, auf welchem Gerät sie geöffnet wird und wählt dann eines ihrer verschiedenen Layouts aus. Diese Seiten können daher nicht im Desktop-Browser getestet werden. Grosse Unternehmen wie z.B. Amazon, Apple etc. haben adaptive Webseiten, die auf unterschiedlichen Geräten jeweils ganz anders aussehen.


Was ist besser?

Es liegt auf der Hand, dass es einfacher ist, ein Design anzulegen, das seine Anordnung automatisch selbst anpasst, als sechs verschiedene Layouts zu entwickeln, die auf unterschiedlichen Geräten jeweils die optimale Nutzbarkeit, Funktionalität und Verkaufsfitness einer Webseite bieten sollen. Responsive Seiten sind daher zeit- und kostengünstiger, auch wenn sie weniger Kontrolle über die Ansicht bieten. Ausserdem gibt es natürlich schon viele responsive Templates (Designvorlagen) für die gängigen Content Management Systeme (CMS) wie Joomla, Wordpress, etc., die das Design nochmal günstiger machen.


Auch Google schätzt responsives Design, weil es dem Googlebot einfacher fällt, eine Seite zu crawlen, die über alle Geräte den gleichen Aufbau aufweist, als pro Gerät jeweils ein anderes Layout entschlüsseln zu müssen. Deshalb haben optimal aufgebaute responsive Seiten meist Vorteile in punkto SEO (Suchmaschinenoptimierung) gegenüber vergleichbar guten adaptiven Seiten. Bei adaptiven Seiten muss zudem aufgrund ihrer unterschiedlichen URL eine Lösung für das «Duplicate Content»-Problem gefunden werden.


Auch Nutzer finden es grundsätzlich gut, wenn eine Seite über alle Geräte ähnlich aufgebaut ist, weil sie dann wissen, wo sie etwas finden. Andererseits fühlt sich eine adaptive Seite oft relevanter an, weil sie sie genau dort optimal abholt, wo sie gerade sind. Adaptive Seiten brauchen aber mehr Zeit und verursachen höhere Kosten und oft gehen die Nutzer in der Mitte dabei vergessen, weil man nur an die grössten und kleinsten Geräte denkt.


Ein Nachteil einer rein responsiven Seite liegt in der Bildgrösse. Desktop-Seiten brauchen schöne grosse Bilder, die jedoch die Ladegeschwindigkeit der mobile Seite meist beeinträchtigen – was wiederum schlecht für SEO ist. Adaptive Seiten sind dagegen schneller, weil sie ihr Layout ja nicht anpassen, sondern einfach ein fixfertiges passendes Layout anzeigen, inkl. den für das betreffende Layout optimierten Bildern.


Welches Design sollten Sie wählen? Ich denke, für die meisten KMU- und Hotelwebseiten ist ein responsives Design völlig ausreichend. Ein CMS mit html5 erlaubt heute den Upload von unterschiedlichen Bildgrössen für unterschiedliche Geräte und hebelt den Geschwindigkeits-Nachteil zum Grossteil aus (auch wenn es den Aufwand der Bildbearbeitung natürlich vergrössert). Für komplexe Webseiten im eCommerce-Bereich kann eine adaptive Seite jedoch die sehr viel bessere Lösung sein. Lassen Sie es uns anschauen.



Bild von 200 Degrees auf Pixabay