Webdesign-Techniken im Überblick: Mobile vs responsive Webdesign

von | 29.08.2017 | Internet

Der Trend der mobilen Internetnutzung nimmt seit Jahren stetig zu und überholt langsam die stationäre Nutzung. Das ist kein Geheimnis. Daher ist es für jedes Unternehmen von elementarer Bedeutung, die mobilen Internetnutzer zu berücksichtigen und personalisierte Dienste anzubieten, die optimal auf die Anforderungen von mobilen Endgeräten wie beispielsweise Smartphones und Tablet-PCs ausgerichtet sind. Das muss bei Erstellung und Betreiben der Webpräsenz berücksichtigt werden.

Es gibt natürlich unzählige Wege und Methoden, wie man seine Webpräsenz erstellt. Selbst oder vollautomatisch, mit oder ohne Hilfe. Es gibt eine Menge zu beachten. Mobil-optimierte Webseiten lassen sich heute recht einfach unter https://www.websitebutler.de/de/mobile-website erstellen.

Entwicklung des mobilen Internets

Worüber heute heftige Diskussionen geführt werden, ist die Art der Umsetzung. Soll man den komplexen Weg des responsive Designs gehen oder soll man doch lieber seinen Nutzern eine eigenständige Version als mobile Webseite zur Verfügung stellen? Um den Unterschied zwischen diesen beiden Ansätzen auch wirklich zu verstehen, muss man etwas in die Vergangenheit blicken.

Bis vor einigen Jahren gab es lediglich Desktop-PCs, die mit immer größeren Monitoren ausgestattet wurde. So waren im Jahr 2007 Monitore mit 19 und 21 Zoll besonders beliebt. Diese waren mit einer üppigen Pixelanzahl ausgestattet, sodass es möglich war, sämtliche Webinhalte auf einem großzügigen Platz darzustellen. Obwohl zu dieser Zeit die ersten Handys auf den Markt kamen, mit denen man mobil im Netz surfen konnte, war der mobile Zugriff hierzulande lange Zeit vernachlässigt.

Dies lag in erster Linie an den erhältlichen mobilen Endgeräten, die mit Hilfe der WML-Technologie (Wireless Markup Language) Webinhalte darstellen konnte. Diese hatten aber mit dem eigentlichen Web wenig zu tun, weswegen sich die mobile Nutzung nicht durchsetzen konnte. Einen kleinen Fortschritt brachten die ersten Windows-Phones, die mit speziellen Browsern versehen waren, welche das Web einigermaßen gut darstellen konnten.

Erst mit dem Apple iPhone, dass seit 2007 erhältlich ist, wurde ein mobiles Gerät auf den Markt gebracht, welches zwei wichtige Kriterien in sich vereint:

  • identische Darstellung von Webseiten
  • Bedienung mittels Touchscreen

Das iPhone brachte den lang ersehnten Durchbruch für das mobile Internet, sodass kurze Zeit später führende Handy-Hersteller etliche neue Smartphone-Modelle und Geräteklassen auf den Markt brachten.

Mobile Webseiten

Aus der historischen Entwicklung heraus war es ein logischer Schritt, zunächst dedizierte mobile Versionen der Webseite anzubieten. Die einfach gemachten Webpräsenzen haben eine Browser-Weiche benutzt, um herauszufinden ob der Nutzer die Webseite von einem traditionellen Desktop-PC oder über ein Smartphone aufruft.

Das Problem blieb aber weiterhin bestehen, denn der Markt an erhältlichen Smartphones ändert sich zu schnell, um alle erhältlichen Geräte mit einer adäquaten mobilen Version versorgen zu können. Obwohl eine mobile Website zahlreiche Vorteile mit sich bringt, gibt es auch einige Nachteile, die sich insbesondere auf den Arbeitsaufwand beziehen.

Vorteile:

  • Individuelles Layout für die mobile Version
  • Änderungen, die in der mobilen Version vorgenommen werden, beeinflussen nicht die anderen Versionen
  • Die genutzten Webtechnologien können auf die speziellen Fähigkeiten des Geräts individuell angepasst werden
  • Der Datenstrom lässt sich äußerst effektiv minimieren, indem nur die Daten gesendet werden, die auch tatsächlich benötigt werden.

Nachteile:

  • Man muss zwei oder mehrere unterschiedliche Layouts regelmäßig pflegen und bei Änderungen alles mehrfach machen
  • Da sich der mobile Markt in einem ständigen Flux befindet, kommt es immer wieder vor, das neue Geräte nicht erkannt werden
  • In vielen Fällen ist der Inhalt nicht deckungsgleich, was zu diversen Problemen führen kann
  • Meistens wird eine eigene URL für die mobile Version verwendet, was aus SEO-Sicht nicht gerade optimal ist

Responsive Webseiten

Responsive Webdesign (RWD) stellt einen modernen Ansatz dar. RWD setzt sich aus unterschiedlichen Techniken zusammen, die es ermöglichen, dass die Webseite optimal auf das Endgerät angepasst wird. Dabei kommt nur ein Template zum Einsatz, welches über sogenannte „Media-Queries“ an das zur Verfügung stehende Screen-Real-Estate automatisch angepasst wird.

Technisch ist RWD deutlich komplexer, da man etliche weitere Kriterien wie beispielsweise Performance oder spezielle Smartphone-Features berücksichtigen muss. Obwohl der konzeptionelle Aufwand viel höher ist, zeigen die Ergebnisse, dass es durchaus sinnvoll ist. Mit der Erstellung Ihrer mobilen Webseite können Sie auch eine Agentur wie beispielsweise Websitebutler beauftragen, die schon etlichen zufriedenen Kunden zu einem optimalen Webauftritt verholfen haben.

Vorteile:

  • Optimale Darstellung auf allen Endgeräten
  • Ist in vielen Fällen deutlich günstiger als eine separate mobile Version
  • Zukunftssicher und geräteunabhängig, sodass sich auch zukünftige Geräte und Geräteklassen mit minimalen Aufwand unterstützen lassen
  • Da nur eine URL zum Einsatz kommt, ist RWD äußerst SEO-freundlich
  • Optimiertes Multi-Channel-Marketing

Nachteile:

  • Längere Ladezeiten, da ein Template geladen wird, welchen sämtliche Inhalte und Elemente für alle unterstützten Displaygrößen beinhaltet
  • Der Entwicklungs-Prozess muss komplett durchdacht werden
  • Es ist äußerst kompliziert, ein bestehendes Design im Nachhinein anzureichern
  • Eine schlecht gemachte responsive Webseite schafft es zwar, dass die Webseite mobil benutzbar ist, eine entsprechend minderwertige User-Experience wird jedoch den Gesamteindruck trügen

Fazit

Im direkten Vergleich gibt es einen eindeutigen Sieg für Responsive Webdesign (RWD). Neue Webseiten sollten daher nach dem Responsive-Design-Prinzip konzipiert und umgesetzt werden. Auch bei bestehenden Webauftritten kann es durchaus sinnvoll sein, einige RWD-Elemente einzusetzen, um eine einigermaßen geräteunabhängige Darstellung der Inhalte zu ermöglichen.

Schieb App