Websites für mobile Geräte: mobil, responsiv, adaptiv oder Desktop-Seite?

Alle Vorgehensweisen zur Implementierung von mobilen Websites haben ihre Vorteile und Nachteile. Die Grundlagen für das mobile Nutzererlebnis gelten aber unabhängig von der Art der Implementierung.

by Raluca Budiu (deutsche Übersetzung) – 14. Februar 2016

Im Internet sind nicht alle Websites gleich. Auf einem mobilen Gerät sehen Nutzer immer eine der folgenden Arten von Websites:

Mobile Websites wurden eigens für mobile Geräte gestaltet.
Web-Apps sind eine spezielle Art von mobiler Website, die wie eine App aussieht und sich auch so anfühlt.
Responsive Design Sites sind Websites, die für eine Vielzahl von Geräten mit verschiedenen Bildschirmgrössen gestaltet wurden. Das Layout der Inhalte wird automatisch an die jeweilige Bildschirmgrösse angepasst.
Volle (Desktop-) Websites wurden für Desktop-Computer gestaltet und nicht für mobile Geräte optimiert.

Mobile Websites

Mobile Websites wurden speziell für Smartphones designt. Sie sind oft unter einer separaten URL (z.B. m.Website.com) erreichbar und unterscheiden sich grundlegend von der vollen Desktop-Website. Sie enthalten Funktionen oder Inhalte, die als für mobile Geräte geeignet eingestuft wurden, wobei es sich oft nur um einen Teil der Inhalte der Desktop-Seite handelt. Sie werden häufig mit responsiven Websites verglichen, welche auf mobilen Geräten und Desktop-Computern dieselben Inhalte und Funktionen anzeigen, die Funktionen aber auf mobilen Geräten neu anordnen.

Web-Apps

Web-Apps sind keine echten Apps. Sie sind in Wirklichkeit Websites, die wie Apps aussehen und auch so funktionieren – sie wurden aber nicht auf diese Weise implementiert. (In unserem Artikel über die verschiedenen Arten von Apps erfahren Sie mehr über den Unterschied zwischen Web-Apps, nativen Apps und hybriden Apps.)

Responsive Design

Das responsive Design ist eine Entwicklungstechnik, die den Gerätetyp erfasst und das Layout der Website dynamisch an die Grösse des Bildschirms, auf dem sie angezeigt wird, anpasst. Dieselben Inhalte könnten daher auf einem Desktop in drei Spalten, auf einem Tablet in zwei Spalten und auf einem Smartphone in einer Spalte angezeigt werden.

Transport for London (tfl.co.uk) ist eine responsive Website. Am Desktop-Computer wird der Inhalt in 3 Spalten angezeigt.

Am Tablet (links) und Smartphone (rechts) wird der Desktop-Inhalt von tfl.co.uk in zwei Spalten bzw. einer Spalte angezeigt.

Einer der Kritikpunkte an mobilen Websites ist, dass häufig Inhalte und Funktionen fehlen, die zumindest gelegentlich für einige Nutzer relevant wären. Responsive Designs versuchen dieses Problem zu lösen, da alle Versionen einer Website dieselben Inhalte und Funktionen enthalten.

In der Praxis ist das responsive Design häufig ein Kontinuum: viele responsive Websites sind nicht „komplett“ responsive und enthalten nicht zu 100% dieselben Funktionen und Inhalte. Normalerweise werden Funktionen entfernt, die auf mobilen Geräten nur selten benötigt werden.

Die responsive Website von Authenticjobs.com: in der Desktop-Version können neue Jobangebote veröffentlicht werden, was in der mobilen Version nicht möglich ist.

Die mobile Version von Authenticjobs.com: obwohl die Website responsiv ist, enthält die mobile Version nicht alle Funktionen, die auf einem Desktop-Computer zur Verfügung stehen.

Mobile Websites vs. responsive Websites

Hier sind einige der Vor- und Nachteile dieser beiden Vorgehensweisen.

Responsive Websites unterstützen eine Vielzahl von Geräten und Bildschirmgrössen über eine einzige Implementierung. Mobile Websites sind gerätespezifisch: Unternehmen müssen separate Websites für mobile Geräte und Desktop-Computer erstellen. Im Gegensatz dazu, funktioniert eine responsive Website auf verschiedenen Geräten und Bildschirmgrössen – von Smartphones über Tablets bis hin zu Desktop-Computern.
Responsive Websites enthalten dieselben Inhalte und Funktionen (bis zu einem gewissen Grad). Im Gegensatz zu mobilen Websites, stehen in allen Versionen der responsiven Website – zumindest theoretisch – dieselben Inhalte und Funktionen zur Verfügung. (In der Praxis werden für Smartphones einige Inhalte und Funktionen der responsiven Websites entfernt – allerdings wesentlich weniger als auf mobilen Websites.) Sie müssen somit nicht entscheiden, welche Funktionen auf mobilen Geräten wichtig sind und welche entfernt werden sollten. Sie müssen Funktionen aber dennoch mit Prioritäten versehen und entscheiden, wo Sie diese auf den kleineren Bildschirmen platzieren.
Responsive Websites wurden früher von Suchmaschinen besser gefunden. Mobile Websites haben eine anderen URL als die Desktop-Website – und früher wurden die guten Suchresultate der zugehörigen Desktop-Website nicht auf die mobile Version übertragen. Das Resultat war, dass mobile Websites weiter unten in den Suchresultaten angezeigt wurden. Auch wenn die Desktop-Website das mobile Gerät erkennt und die Nutzer auf die entsprechende mobile Website weiterleitet, nimmt die Weiterleitung etwas Zeit in Anspruch und beeinträchtigt das Erlebnis des mobilen Benutzers (ausserdem könnte auch die Suchmaschinenoptimierung darunter leiden). Da für alle Versionen einer responsiven Website dieselbe URL verwendet wird, müssen sich responsive Websites keine Sorgen über die Suchmaschinenoptimierung oder Weiterleitungen machen. Moderne Suchmaschinen haben inzwischen allerdings gelernt, mit mobilen Websites umzugehen, und leiten Nutzer auf die mobile Version der Website weiter, falls diese vorhanden ist.
Responsive Websites setzen weniger Wartung von Inhalten und Funktionen voraus. Eine einzelne Website und eine einzelne Content-Quelle sind einfacher zu warten, als mehrere separate Websites. Jede Änderung der Benutzeroberfläche muss allerdings auf allen Geräten getestet werden. Die Entwicklung von responsiven Websites ist tendenziell teuer. Unsere Kunden berichten, dass der Aufbau einer ganzen responsiven Website teurer sein kann, als die Erstellung einer separaten mobilen Website. Ausserdem setzt die Erstellung von responsiven Websites fortgeschrittene Kenntnisse im Bereich der Entwicklung voraus.
Responsive Websites sind tendenziell langsamer. Obwohl es Techniken gibt, um die Leistung von responsiven Websites zu verbessern, können die Ladezeiten einer responsiven Website länger sein, als jene von mobilen Websites, da alle Arten von Geräten dieselben Inhalte empfangen.
Responsive Websites eignen sich gut für komplexe Aufgaben und Inhalte. Es ist schwierig, komplexe Aufgaben auf allen Geräten gleich gut darzustellen. Vor allem komplexe Arbeitsblätter, Vergleichstabellen und Visualisierungen können auf den Bildschirmen mobiler Geräte nur mit Mühe verkleinert präsentiert werden. Auf mobilen Websites können solche Inhalte entfernt werden – vor allem, da Nutzer derartige Aufgaben normalerweise nicht über Smartphones erledigen.
Responsive Websites erschweren die Integration der bestehenden Services von Drittanbietern. Falls Sie eine Website designen, die einen separaten, unabhängigen Backend-Service nutzt (z.B. das Buchungssystem einer Hotel-Website), ist es oft schwierig, die Benutzeroberfläche dieser Services in eine responsive Website zu integrieren.

Ein weiterer Nachteil von responsive Websites ist, dass einige Unternehmen hoffen, sich mit dieser Implementierungstechnik die Überprüfung der Usability des mobilen Designs und des Desktop-Designs zu ersparen. Nur weil es die Implementierung ermöglicht, einen einzigen Code anzupassen und auf Geräten mit unterschiedlich grossen Bildschirmen anzuzeigen, bedeutet das nicht, dass die Benutzeroberflächen ansprechend – geschweige denn für die Nutzung über eine Gerätekategorie optimiert – sind.

Adaptives Design

Das adaptive Design ist eine Variante des responsiven Designs, bei dem der Server die Eigenschaften des Geräts erfasst und nur jene Inhalte und Funktionen anzeigt, die auf diesen Gerät richtig präsentiert werden können. Leistungsstärkere Geräte empfangen komplexere Inhalte mit CSS und JavaScript-Funktionen. Weniger leistungsstarke Geräte mit schlechten Internetverbindungen empfangen abgespeckte, leichtere Versionen der Website, die nur mehr die Kernfunktionen umfassen. Diese Technik wird manchmal progressive Verbesserung genannt.

Der Hauptvorteil des adaptiven Designs ist, dass es das Problem der langsamen Antwortzeiten löst, mit dem sich das responsive Design häufig konfrontiert sieht.

Volle Desktop-Websites für mobile Geräte?

Nutzer sagen manchmal, dass sie lieber eine Desktop-Seite öffnen, anstatt die mobile Seite zu verwenden. Grund dafür sind meistens ihre früheren Erfahrungen mit mobilen Inhalten: beim Versuch, ihre Inhalte übersichtlicher zu machen, inkludierten einige mobile Websites nur einen winzigen Teil des Angebots der vollen Website. Manchmal kannten Nutzer die volle Website aber so gut, dass dieses Vorwissen genügte, um sich auf dem kleinen Bildschirm zurechtzufinden.

Ausserdem sagen Nutzer manchmal, dass mobile Websites stark vereinfacht sind: sie ist zu einfach und dürftig. Eine unserer Teilnehmerinnen versuchte, über die mobile Website eines Hotels ein Zimmer zu reservieren. Als sie die Seite sah, sagte sie sofort, dass sie sehr minimalistisch sei und sie sich von diesem Unternehmen (einem grossen Casinohotel in Las Vegas) eine auffälligere Website erwartet hätte. Sie konnte die Reservierung allerdings schnell tätigen. Am Ende wusste sie die Einfachheit der Website zu schätzen und war angenehm überrascht, wie einfach es für sie war, die Aufgabe zu erledigen.

Zusammenfassend gilt: Sie sollten nicht darauf hören, was Ihre Nutzer sagen, sondern sich ansehen, was sie tun. Wenn Menschen mobile Website über ihre mobilen Geräte verwenden, sind sie normalerweise effizient und erfolgreicher. Wenn sie gefragt werden, ob sie die mobile Website bevorzugen, werden sie ihnen vielleicht etwas anderes sagen.

Eine Anmerkung zu Phablets

In unseren Studien mit Phablets – also Smartphones mit Bildschirmen, die grösser als 5,3 Zoll sind – vereinfachte der grössere Bildschirm den Teilnehmern das Lesen und ermöglichte es einigen von ihnen, öfter – und etwas erfolgreicher – Desktop-Websites zu nutzen, als auf Smartphones. Obwohl einige Phablet-Teilnehmer immer Desktop-Websites bevorzugten, ist die Usability dieser Websites auf dem (immer noch relativ kleinen) Bildschirm alles andere als gut – und die Nutzer hatten Probleme mit kleinen Symbolen und der winzige Schrift.

Während volle Websites auf grossen Tablets (wie dem iPad) relativ gut funktionieren und durch einige kleinere Anpassungen gut nutzbar gemacht werden können, sind sie auf Phablets immer noch eine Belastung. Aus diesem Grund empfehlen wir Ihnen nicht, Ihre Phablet-Nutzer auf Ihre Desktop-Website weiterzuleiten.

Schlussfolgerung

Mobile Website, responsive Designs oder adaptive Designs sind Methoden, um mobile Nutzererlebnisse zu implementieren. (Die Desktop-Website auf mobilen Geräten anzuzeigen, ist ebenfalls eine Möglichkeit – diese empfehlen wir allerdings nicht.) Jede Methode hat Vor- und Nachteile, ausserdem beeinflussen sie sich sogar gegenseitig. Nutzer können nicht zwischen den einzelnen Varianten unterscheiden. Normale Menschen sehen nicht, dass responsive oder adaptive Websites anders funktionieren als mobile Websites, weshalb sie sie auch nicht anders behandeln. (Als EndNutzer einer Website erkennt man das responsive Design nur, wenn man das Browserfenster am Desktop-Computer verkleinert und kontrolliert, ob sich die Inhalte anpassen. Das tun Nutzer eher nicht, ausser sie nehmen gerade an unserem Seminar über die Skalierung von Nutzeroberflächen teil.)

Obwohl sich ihre Implementierung stark unterscheidet, müssen responsive, adaptive oder mobile Websites dieselben Grundlagen und Richtlinien der mobilen Usability befolgen, um gut nutzbar zu sein.