Profitipp: Responsive Webdesign oder mobile Version?

Wie gehen Sie am liebsten online? Mit Ihrem Laptop, mit dem Smartphone oder zuhause am PC? Wahrscheinlich nutzen Sie all diese Möglichkeiten, je nachdem, wo Sie gerade sind. Natürlich erwarten Sie, dass die Inhalte auf jedem Gerät gut lesbar sind und schnell geladen werden – egal, mit welchem Bildschirm Sie sie aufrufen. Gute Webseiten leisten das entweder durch ein Responsive Webdesign oder mit einer mobilen Version. Welcher Weg ist der bessere?

1. 1 Was ist eine mobile Website?

Eine mobile Website ist quasi die kleine Schwester eines Internetauftritts. Sie ist unter einer separaten URL erreichbar und wird automatisch immer dann aufgerufen, wenn ein Nutzer auf einem mobilen Gerät wie einem Smartphone die Haupt-URL der betreffenden Seite eingibt. Manchmal wird der User auch vorher gefragt, welche Version er lieber nutzen möchte. Dahinter steckt einerseits eine simple Weiterleitung, andererseits ein intelligentes System, das den abrufenden Gerätetyp erkennt. Man kann noch einen Schritt weiter gehen und über programmierseitige Parameter bestimmen, dass bereits in der Google-Suchanfrage die optimierte URL anstatt der Hauptdomain angezeigt wird.

Mobile Webseiten werden speziell für kleinere Geräte wie Smartphones oder Tablets entworfen. Deshalb unterscheiden sie sich weitgehend von der Desktopvariante. Sie beschränken sich auf das Wesentliche, legen einen Schwerpunkt auf eine übersichtliche und intuitive Nutzerführung und beinhalten die Merkmale und Content-Elemente, die sich für mobile Versionen besonders eignen. Ein Beispiel ist der sogenannte Hamburger-Button, unter dem sich das Hauptmenü verbirgt. Dieses Element ist so beliebt, dass es mittlerweile auch in vielen Desktopvarianten eingesetzt wird.

1. 2 Was ist Responsive Webdesign?

Responsive bedeutet „reagierend“, „antwortend“ oder im weitesten Sinne „sich anpassend“. Eine Webseite im Responsive Webdesign passt sich in Inhalt und Layout automatisch dem Gerät an, von dem aus sie abgerufen wird. Im Unterschied zur mobilen Website handelt es sich hierbei aber nicht um eine von der Desktopversion unabhängige, sondern um ein und dieselbe Seite, die lediglich für verschiedene Anzeigeszenarien optimiert wurde. 

Responsive Websites reagieren also auf die Eigenschaften des jeweils benutzten Endgerätes. Ähnlich wie mobile Webseiten werden responsive Websites grafisch und programmierseitig so gestaltet, dass sie den Anforderungen des anzeigenden Gerätes (z. B. Smartphone oder Tablet) bestmöglich entsprechen: Das betrifft insbesondere die Anordnung der einzelnen Contentelemente, die Schriftgröße der Texte, die Darstellung der Seitennavigation, die Aufteilung von Textspalten und Bildergalerien, aber auch die verschiedenen Eingabemethoden wie Klicken, Scrollen, Wischen oder Tippen. Technisch nutzt man zur Umsetzung eines Responsive Webdesigns HTML5, CSS3 (Media Queries) und JavaScript.

2. Responsive oder mobil – Vor- und Nachteile

Gleich vorab: Der Zweck der Webseite definiert die Umsetzung. Ob man sich für eine mobile Version oder eine Optimierung der Seite durch Responsive Webdesign unterscheidet, hängt vom Online-Verhalten der Zielgruppe und natürlich vom Ziel des Anbieters ab. Möchte man beispielsweise beim mobilen Abruf der Webseite den Fokus auf eine ganz bestimmte Leistung setzen und andere Dinge außen vor lassen, empfiehlt es sich, eine mobile Version erstellen zu lassen. Verfolgt man mobil wie auf dem Desktop das gleiche Ziel, ist ein Responsive Design empfehlenswert.

2. 1 Vorteile Responsive Webdesign 

• Einfache Inhaltspflege:Eine URL bedeutet ein Content – das spart Zeit, Kosten und minimiert die Fehleranfälligkeit.
• Hardwareunabhängiges Design: Responsive Websites sind nicht spezifisch für bestimmte Gerätetypen optimiert, sondern für verschiedene Bildschirmgrößen. Das erweitert die Nutzungsmöglichkeiten erheblich.
• Größere Ähnlichkeit: Ist ein Responsive Webdesign gut umgesetzt, ähneln sich die verschiedenen Darstellungen – der Nutzer muss sich nicht immer wieder neu auf der Webseite orientieren, wenn er das anzeigende Gerät wechselt.
• Präferenzen bei Google: Seiten im Responsive Webdesign werden von Google gut bewertet. Das wirkt sich positiv auf das Ranking aus.
• Einfaches Monitoring: Wartung, Pflege, Support – all das sind Dinge, die man nicht unterschätzen sollte. Mit nur einer Website bleibt der Aufwand überschaubar, Website-Statistiken lassen sich außerdem einfacher auswerten.

2. 2 Nachteile Responsive Webdesign 

• Mangelnde Übersichtlichkeit: Gerade bei sehr umfangreichen Seiten mit vielen Navigationspunkten und einer hohen Content-Dichte kann es auf kleineren Endgeräten trotz der technischen Optimierung schon mal unübersichtlich werden.
• Wenig Möglichkeiten bei Tabellen und mehrspaltigen Inhalten: Geht nicht, gibt’s nicht? Naja, bei so manchem Inhaltselement stößt auch ein Responsive Webdesign an seine Grenzen. Tabellen mit vielen Spalten oder mehrspaltige Texte fallen in kleineren Ansichten einem gnadenlosen "Stapelverhalten" zum Opfer. Die Folge: Ein heilloses Durcheinander und – wie der Programmierer sagt – zerschossene Layouts. Hat man viele solcher Content-Elemente, sollte man von vornherein (also auch in der Desktopversion) über alternative Darstellungsformen nachdenken.
• Längere Ladezeiten: Beim mobilen Aufruf wird in der Regel dasselbe geladen wie bei der Desktopversion. Die Ladezeit ist beim mobilen Aufrufen deshalb oft höher.
• Nervige Wisch-Monster: Je umfangreicher die Seite, desto mehr muss gewischt werden, bis der gewünschte Content ins Blickfeld rutscht. Das stört natürlich.
• Aufwendige Programmierung: Klar, der Entwickler muss sich so richtig reinhängen, damit die Optik am Ende überall stimmt. Er schraubt deshalb kräftig am CSS-Code. Dieser wird dadurch sehr umfangreich.

2. 3 Vorteile mobile Website 

• Einfacher Zugang: Nutzer müssen eine mobile Seite nicht erst herunterladen/installieren, um Zugang zu erhalten (was bei der Alternative zur mobilen Seite, der App, der Fall wäre).
• Optimale Nutzerorientierung: Mobile Versionen konzentrieren sich in Layout und Bedienbarkeit auf das wesentliche Ziel der Seite. Die Nutzerführung ist meist schlank, der Content übersichtlich.
• Flexibles Layout: Layout-Optimierungen oder größere inhaltliche Veränderungen an der Seite sind schnell erledigt und beeinflussen die Desktopversion nicht.
• Kürzere Ladezeit: In den meisten Fällen müssen beim Laden mobiler Webseiten weniger Daten gesendet werden, was Ladezeiten verkürzt.

2. 4 Nachteile mobile Website   

• Höherer Entwicklungsaufwand: Die Erstellung zweier Versionen einer Website erfordert mehr Gestaltungs- und Programmierarbeit.
• Höherer Pflegeaufwand: Für jede Version der Website muss separater Content erstellt und gepflegt werden. Doppelter Content wird von Google mit einem schlechteren Ranking abgestraft.
• Technische Fallstricke: Wird der Gerätetyp beim Abruf der Seite nicht erkannt, wird die mobile Version auch nicht angezeigt.

So weit, so gut. Aber was bedeutet das jetzt konkret für Sie als Websitebetreiber? Sollten Sie lieber responsive oder mobil ins Web gehen? Dazu eine kleine Entscheidungshilfe:

Fazit: Ob Sie sich als Websitebetreiber für ein Responsive Design oder eine mobile Version entscheiden, hängt, wie eingangs erwähnt, vom Ziel der Seite und dem Zielgruppenverhalten ab. Fragen Sie sich also vor der großen Entscheidung, was Sie in der mobilen Ansicht Ihrer Seite alles zeigen möchten, wem Sie es zeigen möchten und zu welchem Zweck. Sobald Sie Antworten auf diese Fragen haben, werden Sie schnell darauf kommen, welche Variante sich eher für Sie auszahlt. Im Zweifelsfall würde ich Ihnen immer zu einem Responsive Design raten, weil sich Gerätetypen (mobile Seiten = abgestimmt auf bestimmte Gerätetypen) schnell ändern können. Ist das der Fall, muss aufwendig angepasst werden. Außerdem ist der Pflegeaufwand bei responsiven Seiten auf lange Sicht deutlich geringer.

Profi der Woche: Andreas Kaufhold, Programmierer

Bildquelle: © geralt/pixabay.com