Mobil optimierte Webseiten werden immer wichtiger

Die riesige Anzahl von über 44 Millionen Besitzern von Smartphones in Deutschland, ist ein klarer Beleg dafür, dass die Bedeutung von mobilen Endgeräten im Internet extrem zugenommen hat. Die tragbaren Computer werden immer leistungsstärker und werden immer weniger für den Versand von SMS und zum Telefonieren genutzt. Stattdessen nimmt die Anzahl an Nutzern, die mit ihren Smartphones von unterwegs aus Surfen immer weiter zu. Technik-Experten gehen davon aus, dass sich der mobile Datenverkehr in naher Zukunft, weltweit verfünffachen wird. Anhand dieser Entwicklungen lässt sich schnell die Wichtigkeit von mobil optimierten Webseiten erkennen.

Webentwickler stehen hier vor einer sehr aufwändigen Aufgabe, da sie die Desktopvariante, in ihrem Design, für alle gängigen Smartphone und Tablet-Modelle anpassen müssen. Hierzu gibt es allerdings einige Tools, die es dem Entwickler einer Webseite einfacher machen, Webseiten für mobile Geräte so anzupassen, dass sie gegenüber der Desktopvariante nichts an ihrer Funktionalität einbüßen. Einige dieser Tools und Plugins sollen in diesem Artikel mit ihren Vor und Nachteilen erläutert werden.

Warum ist eine mobil-freundliche Webseite so relevant?

Google hat durch die Änderung seines Suchalgorithmuses dafür gesorgt hat, dass Webseitenbetreiber, die ihren Besuchern keine mobil optimierten Inhalte bieten, bei der mobilen Suchanfrage abgestraft werden. Diese Änderungen haben auf der einen Seite dazu geführt, dass immer mehr Webseitenbetreiber ihre Webinhalte mobil optimiert haben und auf der anderen Seite dazu, dass der Anteil an mobil surfenden Nutzern extrem zugenommen hat. Unternehmen, die sich diesem Trend bis jetzt noch nicht angepasst haben, werden es in Zukunft schwer haben.

Da die Displays mobiler Endgeräte deutlich kleiner sind als die von PCs und Laptops, ist die Interaktion auf Webseiten in ihrer Handhabung ganz unterschiedlich. So lassen sich auf dem Smartphone, beispielsweise Slider mit Bildern, nur durch Wischen durchblättern. Auch Hoverfunktionen, welche auf dem Desktop mit der Maus ausgelöst werden und das Laden komplexer Datensätze macht mobilen Endgeräten oft Schwierigkeiten. Google durchsucht mobile Webseiten nach solchen nutzerunfreundlichen Elementen und straft sie, falls vorhanden, dafür ab.

So bekommt man raus ob eine Webseite „mobile friendly“ ist

Zum Prüfen der mobilen Nutzerfreundlichkeit von Webseiten, gibt einige kostenfreie Analysetools im Netz. Der bekannteste, weil auch relevanteste Test zur Feststellung der mobilen Nutzerfreundlichkeit von Webseiten ist der „Google Mobile Friendly Test„. Der Test wird durchgeführt, sobald man nach dem einfügen des Webseiten-Links auf analysieren klickt, Innerhalb weniger Sekunden führt Google dann eine Prüfung der gesamten Webseite durch. Am Ende wird ein Bericht erstellt, welcher mögliche Probleme im Zusammenhang mit der mobilen Optimierung aufführt und mit entsprechenden Handlungsanweisungen verknüpft. Die Webseite wird zudem über eine Vorschaufunktion, so dargestellt, wie sie auf einem mobilen Endgerät zu sehen wäre.

Weiterführende Links führen zu Lösungen für die im Bericht aufgeführten Probleme:

• Für deutlich fortgeschrittenere Webentwickler lohnt sich der W3C Mobile-Checker, des World Wide Web Consortiums. Der Analyseprozess wird hier, wie bei dem Tool von Google nach erfolgter Eingabe der URL durchgeführt. Der W3C Mobile Checker bietet die Möglichkeit, die Webseitendarstellung für drei unterschiedliche Auflösungsformate mobiler Endgeräte zu überprüfen. Leider gibt es den W3C Mobile Checker nur in englischer Sprachausgabe.
• Unterschiedliche Ansätze für eine mobile Webseite
  Zur mobilen Optimierung gibt es ein paar unterschiedliche Methoden mit denen gearbeitet wird. Die Entwicklung einer neuen Webseite stellt sich, egal bei welcher verwendeten Methode, deutlich einfacher dar, als der mobile Umbau eines bereits bestehenden Webprojekts. Die Möglichkeiten zur mobilen Optimierungen sind Mobile-Website-Templates im responsiven oder auch adaptiven Layout und auch Plugin-Lösungen, die sich in ein CMS integrieren lassen.
• Responsives Layout – z.B. mit Magento
  Um eine möglichst große Anzahl an Geräten mit ihren unterschiedlichen Displaygrößen, bei der mobilen Optimierung bestmöglich zu berücksichtigen, ist das Arbeiten mit einem responsiven Layout das sinnvollste. Genau wie beim Adaptiven Layout, wird auch bei der responsiven Variante mit CSS3 Media Queries gearbeitet und nur eine HTML Seite ausgegeben. Der Unterschied bei der Methode ist jedoch die fließende Anpassung der Darstellung an unterschiedliche Bildschirmgrößen.
  Wer beispielsweise einen Magento Shop besitzt ist gut damit beraten seinen Shop in einem responiven Design darzustellen. Eine zertifizierte Magento Agentur bietet hierfür professionelle Unterstützung.
• Mobile Webseiten
  Mobile Webseiten sind HTML-Dokumente, welche separat vom Server abgerufen werden und unabhängig von der Desktop Variante erstellt wurden. Jede Desktopseite sollte bestenfalls also eine mobile Variante bekommen. Es ist jedoch nicht erforderlich jede Desktopseite auf einem mobilen Endgerät genau so darzustellen und alle Funktionen zu übernehmen. So gibt es Webprojekte mit Services und Funktionen, welche die Webseitenbesucher im Regelfall eher von unterwegs über ihr Smartphone nutzen und welche die eher zu Hause auf dem Desktop PC genutzt werden.
• Adaptives Layout
  Ein adaptives Layout richtet sich nach festen Breakpoints exakt beschriebener Viewports, die bei der Entwicklung eingebaut werden müssen. Die Webseite wird also in fest definierten Layout Versionen unterschiedlich dargestellt. Im Regelfall ist das die Desktop, Smartphone und Tablet Variante. Vor allem die mobile Versionen werden dabei oftmals besonders Geschwindigkeitsoptimiert, etwa mittels Cloudhosting-Technologien. Eine stufenlose Anpassung, welche sich nicht an festen Breakpoints orientiert ist nicht möglich.