Responsive Design vs. Mobile Website

Responsive Design vs. Mobile Website
Bild Responsive Webdesign

Responsive Design ist letztem Jahr das neue Schlagwort im Webdesign Bereich – kein Wunder bei den rasant steigenden mobilen Zugriffen. Aber gab es da nicht auch noch den Begriff der mobilen Website?

Die Frage, ob eine neue Website für Smartphones und Tablets tauglich sein soll, wird sich heute keiner mehr stellen. Eine einfache und klare Antwort, wie dieses Ziel zu erreichen ist, gibt es aber nicht, zu unterschiedlich sind die Anforderungen.

Vielfach ist man der Ansicht, dass für die mobile Ansicht nur eine Teilmenge der auf dem Desktop zur Verfügung gestellten Information sichtbar sein soll. Diese Meinung vertritt im wesentlichen auch der Usability Experte Jacob Nielsen, der es auf seiner Website mit den Worten „Im Zweifelsfall lieber weglassen“ umschreibt. Dafür seien mobile Websites, die von der Desktop-Variante inhaltlich und möglicherweise auch technisch getrennt verwaltet werden, besser geeignet.

Responsive Webdesign der neue Trend

Der Trend geht aber Richtung „Responsive Webdesign“ und das hat vielerlei Gründe. Zum einen ist es die Tatasche, dass bei vielen, vor allem kleineren Websites, die Administratoren und Redakteure zeitlich schon mit einer einmaligen Erstellung und Pflege des Inhaltes zeitlich überfordert sind. Schließlich herrscht in vielen Unternehmensführungen die Meinung vor, dass die „Homepage“ ja eh vom Sekretariat nebenbei mitbetreut werden kann. Das führt zum Ergebnis, dass die Inhalte oft nur im Copy & Paste Verfahren auf den dazu vorgegebenen Platz kopiert werden. Rücksichtnahme auf optimale Textierung für den User aber auch die Suchmaschine ist dabei nicht gegeben, eine weitere Berücksichtigung der unterschiedlichen Gegenheiten von „klassischer“ Website und der mobilen Version noch weniger.

Hier hakt „Responsive Design“ ein: Für die optimale Textierung kann es natürlich nicht sorgen, aber wenigsten müssen die Inhalte nur einmal eingearbeitet werden, die Berücksichtigung auf die unterschiedlichen Ausgabegeräte erfolgt automatisch durch die Website.

HTML5 und CSS3 das Mittel zur Wahl

Der Begriff „Responsive Web Design“ ist von Ethan Marcote, einem amerikanischen Webdesigner und Entwickler, erstmals 2010 im Rahmen eines Beitrags verwendet worden und beschreibt eine Technik, die mit Hilfe von HTML5 und CSS3 die Erstellung von flexiblen Layouts ermöglicht. Dabei werden sowohl die Navigation, als auch die Inhalte automatisch auf die, für das jeweilige Gerät passende Größe optimiert.

Das ist vor allem so wichtig geworden, da die Vielfalt an Geräten mit unterschiedlichen Bildschirmgrößen und -auflösungen, aber auch Bedientechniken immer weiter zunimmt – Touch oder Mouse sei hier nur als Stichwort erwähnt.

Was spricht nun für eine Umsetzung mittels Responsive Design:

  • Passende Darstellung der Websites nicht nur auf allen aktuellen, sondern auch auf zukünftigen Displays und Geräten
  • Reduzierter Wartungsaufwand, da die Inhalte nur einmal erfasst werden müssen
  • Suchmaschinenfreundliche Seitenstruktur, da alle Links die gleiche URL haben. Und mit den neuen „Enhanced Campaign“ Funktionen von Google können Sie dennoch die mobilen Geräte explizit ansprechen.
  • Das klingt zwar jetzt nach Mehraufwand, dieser lohnt sich aber ala longe: Die für gutes Responsive Design auf das wesentliche reduzierte Struktur sowie optimierte Inhalte verbessern die Nutzerzufriedenheit

Wann sollte eine Mobile Website in die engere Wahl kommen:

  • Möglicherweise schlechtere Performance auf einem Endgerät im Vergleich zu einer Mobilen Website, dei auf dieses Gerät optimiert wurde
  • Inhalte, die von einer Desktop-Website übernommen werden, sind oft nicht in der idealen Reihenfolge. Folgen: Der User muss lange scrollen um zu seinem gewünschten Inhalt zu kommen. Im schlechtesten Fall bricht er ab, bevor zum eigentlich vorhandenen Inhalt kommt. Wichtig ist daher, schon bei der Konzeption das „Mobile First“ Prinzip zu beachten.
  • Erhöhter Aufwand bei der Konzeption und Umsetzung

Welche Lösung ist nun ideal?

Wie heißt es so schön: Es kommt darauf an. Klären Sie im Vorfeld die grundsätzliche Frage: Unterscheiden sich sinnvollerweise die Inhalte bei stationärer und mobiler Nutzung?

Zum Beispiel können bei einem Restaurant von einem Desktop-Rechner oder einem Smartphone gänzlich andere Informationen gewünscht sein. Bei der Destop-Website steht beipielsweise die Präsentation des Lokals im Vordergrund, wenn ich als User aber von unterwegs über mein Smartphone auf die Restaurantseite zugreife, interessiert mich wahrscheinlich mehr, ob das Lokal gerade geöffnet hat oder welches Mittagsmenü heute angeboten wird. Dieser unterschiedliche Zugang wäre über eine getrennte mobile Website besser zu lösen.

 
Comments

Hallo Christian, danke für den Artikel! Ich würde grundsätzlich davon ausgehen, dass User mobil dieselben Informationen suchen. Wobei „mobil“ auch schon kompliziert ist, da Tablets und Smartphones nicht dasselbe Screen-Erlebnis bieten. Nur wenn wirklich sehr unterschiedliche Nutzungsszenarien zwischen Mobilversion und Desktopversion angenommen werden, würde ich eine mobile Website machen. Und selbst dann ist zu hinterfragen ob der Rest der Website nicht trotzdem responsive sein sollte und die Mobilversion nur zusätzlich angeboten wird.

Hallo Philipp,
vielen Dank für deinen Kommentar!

Ich bin ganz deiner Meinung, dass im Regelfall die User sich die gleichen Inhalte mobil wie auch am Desktop erwarten. Jacob Nielsen, von vielen (früher) als Usability Guru gesehen (mhmm, ich war auch einer von denen), predigt ja fast schon seit Anbeginn des WWW, dass mehr auf die Usability und weniger auf das grafisch-gestalterische Wert gelegt werden soll und sieht auch den Content und dessen optimale Aufbereitung als Herzstück jeder Website. Umso überraschender war für mich sein Standpunkt zu diesem Thema.

Der Unterschied zwischen Responsive und Mobile Website ist für mich nicht die Menge der Inhalte, sondern dessen Aufbereitung. Auf einem Smartphone könnten mit einer speziellen Website z.B. Produkt-Abmessungen (Länge, Breite, Höhe etc) in einem Datenfeld zusammengefasst werden. Damit entfällt zwar, dass man bespielsweise die Produkte nach der Länge sortieren kann, die Wahrscheinlichkeit, dass dies auf einem kleinen Smartphone Display auch gemacht wird, ist aber gering – dennoch sind alle Daten vorhanden. Oder es werden weniger wichtige Daten nur zum „Ausklappen“ zur Verfügung gestellt.

Das sind dann aber schon Anwendungen, bei denen strukturierte Daten z.B. aus einer (Produkt)Datenbank kommen und damit stellt sich die Frage nach einer speziellen App. Eine App aber muss installiert werden und ich persönlich verzichte lieber darauf, ausser ich möchte genau von diesem Anbieter die Information und es bietet sich dazu keine andere Möglichkeit. Meine Amazon App hab ich wieder gelöscht, es geht auch ohne – die mobile Website ist wirklich fein gemacht. So gesehen würde ich die Mobile Website als funktionelles „Mittelding“ zwischen „normaler“ Website und einer speziellen App sehen, immer abhängig vom Verwendungsszenario. Und eventuell macht der Einsatz aller drei Möglichkeiten Sinn: Die (responsive) Website für den Desktop und die größeren Tablets, die Mobile Website für den einmaligen/seltenen Zugriff über Smartphone und kleine Tablets sowie eine App für den Heavy User.

Das heutzutage jede neue Website responsive sein sollte (und für Touch Bedienung geeignet), steht für mich außer Frage, auch dann, wenn, wie oben erwähnt, eine Mobile Website zusätzlich geplant ist. Dies gilt vor allem im Zusammenhang mit großen Tablets: Woher sollte die Website schließlich wissen, ob am Microsoft Surface gerade die Maus, das Touchpad oder der Zeigefinder zur Navigation verwendet wird.

Leave a Reply