Warum responsive nicht gleich mobile-friendly ist

Im letzten Artikel habe ich über das neue Google Update, den mobile-friendly Faktor und die Konsequenzen für Webmaster geschrieben. Heute möchte ich einmal näher auf das Thema responsive Webdesign eingehen und zeigen wieso responsive nicht gleich mobile friendly bedeutet und welche Ansätze es für das mobile Web gibt.

Das Modewort „responsive“ trifft man seit dem Boom mobiler Endgeräte immer häufiger im Internet. Auch wir bieten sogenanntes „responsive Webdesign“ an und werben damit für die Anpassung für Smartphones, Tablets und andere tragbare Geräte.

Auch Google weist Webmaster seit einiger Zeit darauf hin, ihre Seiten mobile-friendly zu gestalten. Mobile-friendly? Ja genau! Doch steckt hinter diesem Begriff mehr als nur responsive Webdesign. Deshalb möchte ich jetzt in einem kurzen Beitrag einmal auf die unterschiedlichen Varianten von Webdesign für mobile Endgeräte eingehen.

Mobiles, adaptives und liquides Webdesign

adaptive-webdesign

Im Laufe der Zeit haben Webdesigner und Programmierer immer neue Möglichkeiten gefunden, Webseiten auf mobilen Geräten darzustellen. Alle Varianten haben das gleiche Ziel und lösen das gleiche Problem, jedoch auf unterschiedliche Art und Weise.

Mobile Webseiten

Unter mobilen Webseiten versteht man das Erstellen von zwei gleichen Seiten, von denen eine lediglich für die mobile Nutzung optimiert wird. Ihr kennt das sicherlich, wenn vor einer URL plötzlich ein „m.“ oder ein „mobile.“ auftaucht (m.dernamederseite.de/unterseite). Diese Art der Optimierung war eine Zeit lang sehr gängig, wurde mittlerweile aber schon fast komplett durch andere Methoden ersetzt. Das Problem, welches eine separate mobile Webseite mit sich bringt, ist die Gefahr des „duplicate Content“. Da sich die Inhalte der mobilen Seite nicht von der normalen Seite unterscheiden, kann es passieren, dass Google diese abstraft.

Adaptives Webdesign

Diese Technik zur mobilen Darstellung von Webseiten ist ein weiterer Schritt in der Evolution des mobile Web gewesen. Dabei wird eine Seite für bestimmte Bildschirmgrößen (Geräte) optimiert, welche dann aufgerufen wird, sobald der Besucher die Seite öffnet. Der offensichtliche Nachteil dieser Methode ist die Beschränkung auf gängige Geräte der Industrie wie IPhone, IPad, Galaxy Tab und Google Nexus Tablets.

Die anderen Geräte bekommen dann eine Version angezeigt, die der Größe recht nahe kommen oder manchmal auch einfach nur die Desktopversion. Der Vorteil besteht darin, dass man hier direkt für häufig verwendete Tablets und Smartphones optimiert und so das Meiste aus der mobilen Seite herausholt.

Liquides Webdesign

Das liquide Webdesign kommt dem responsive Design am nächsten. Hierbei passt sich das Layout der Seite, wie der Name es schon erahnen lässt, flüssig an das Geräte und seine Größe an. Auch wenn man lediglich das Browser-Fenster verkleinert, wird dir Seite automatisch skalliert. Diese Variante bietet jedem Nutzer auf jedem Gerät die optimale Größe und Form einer Webseite und nutzt den zur Verfügung stehenden Platz optimal.

Responsive Webdesign

mobile-friendly-webdesign

Webseiten, die über ein responsive Design verfügen, passen sich noch weiter an das Gerät des Besuchers an. Auch die Tatsache, ob eine Tastatur und vorhanden ist oder nicht, wird bei Formulareingaben und der weiteren Bedienung berücksichtigt.

Googles Algorithmus Update und Mobile-Friendliness

Google erwähnt in einem seiner Blogbeiträge, ab dem 21. April 2015 den „Mobile-Friendliness-Faktor“ zusätzlich zu verstärken. Klar ist, dass responsive Design die meisten Vorteile bietet und sich am Besten an die unterschiedlichen Geräte anpasst. Doch was hat es mit der Mobilen-Freundlichkeit in diesem Sinne noch auf sich?

Bilder, Ladezeiten und Quellcode

Man kann seine Webseite über die mobile Anpassung hinaus noch freundlicher für Smartphones, Tablets und andere Geräte gestalten. Die Bilder sollten entsprechende Auflösungen haben und möglichst wenig Ladezeit in Anspruch nehmen. Zudem sollte darauf geachtet werden, dass der Code keine Fehler enthält, die das Laden der Seite zusätzlich verlangsamen könnten. Auch Java-Skript sollte man sparsam einsetzen um die Seite auf mobilen Geräten noch schneller zu machen.

Schriftart/Größe, Links und Überschriften

Man muss nicht immer auf Codeebene arbeiten, um seine Seite benutzerfreundlicher für mobile Nutzer zu machen. Alleine schon mit der Schriftart und Schriftgröße kann man schon viel tun, um „mobile-friendly“ zu werden. Auch Links, Sprungmarken und Inhaltsverzeichnisse tragen enorm zur Usability einer Webseite auf Smartphones und Tablets bei. Das Inhaltsverzeichnis, was ihr ganz oben bei diesem Artikel seht, nimmt sich zum Beispiel die Überschriften, erstellt macht daraus Sprungmarken und stellt eine super Hilfe bei der Informations-Suche dar. Deshalb sollte man bei den Überschriften immer darauf achten, diese möglichst klar, aussagekräftig und kurz zu wählen.

Wie man sieht, gibt es Vieles worauf man im digitalen Zeitalter und den vielen unterschiedlichen mobilen Geräten achten muss. Sicherlich wird die Priorität, die Ladezeit, die Größe der Bilder und anderer Dateien spätestens mit der flächendeckenden Einführung des LTE-Netztes abnehmen.

Dennoch ist es wichtig seine Webseite an verschiedenen Stellen für mobile Suchanfragen zu optimieren. Ein Großteil der Internetnutzer werden in Zukunft Ihre mobilen Geräte nutzen um nach Produkten und Informationen zu suchen. Hierzu zum Schluss noch eine Prognose von Statista.

Statistik: Prognose zum monatlichen mobilen Datenverkehr weltweit von 2014 bis 2019 (in Exabyte pro Monat) | Statista
Mehr Statistiken finden Sie bei Statista

1 Antwort

Trackbacks & Pingbacks

  1. […] Blog: Diese Schritte helfen für seinen Erfolg [2] Content Marketing Strategie: Der Start. [3] responsive Webdesign | Stand 22.8.2015 [4] Content Marketing: Die enorme Vielfalt an Content [5] Kreative Inhalte […]

Dein Kommentar

Want to join the discussion?
Feel free to contribute!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.