Allgemeine Mobilmachung: Warum Du JETZT responsives Design brauchst

von Enfo (Eigenes Werk) [CC-BY-SA-3.0-es], via Wikimedia Commons

Passt sich Deine Webseite an unterschiedliche Bildschirmgrößen an? Nein? Dann wird es höchste Zeit. Alle Gründe sprechen für schnelles Handeln.

Ist Deine Blog oder Deine Webpräsenz fit für mobile Geräte? Diese Frage kann man sich leicht selbst beantworten, ohne dafür sofort ein Tablet oder Smartphone zu zücken: Einfach die Seite aufrufen, mit der Maus auf dem Computerbildschirm an den rechten Rand des Browsers gehen und dessen Fenster dann nach links hin zuziehen, so dass die Seite darin immer schmaler wird.

Wenn sich Text, Bilder, Menüs und das Seitendesign dynamisch verändern, dann hat die Seite bereits ein sogenanntes responsives Design. Responsiv bedeutet, dass das Aussehen auf die Größe des jeweiligen Browserfensters angepasst „antwortet“. Das heißt auch, dass es sich auf einem schmalen Handy-Display lesbar zeigt.

Erscheint bei dem Test stattdessen unten ein Scrollbalken und Teile der Seite verschwinden rechts ins Nirvana, handelt es sich um ein starres Design.

Dann sollte der Betreiber der Seite dringend handeln.

Gründe dafür, warum JETZT ein mobiles Design her muss

Bisher war es ein Nice-to-have für Menschen mit Blick in die nahe Zukunft. Wer schon recht früh mit seiner Webseite angefangen hat, der scheute vielleicht den Umstieg auf das responsive Design. Es kostet schließlich Geld und Zeit. Doch jetzt ist es höchste Eisenbahn. Folgende Gründe sprechen dafür, den Umstieg jetzt anzugehen.

Dein Seiten-Besucher will es: Mehr als 30 Prozent Ipad, iPhone und Co.

Analytics Messung: So viele Traffic kommt von Mobile

Ich messe mit Google Analytics. Darin habe ich Einblicke in 14 unterschiedliche Webseiten, die kleinste Seite bekommt etwa 200 Besucher im Monat, die größte zirka zwei Millionen. Im Bereich „Zielgruppe – Übersicht – mobile“ kann man – aufgeschlüsselt nach Tablet und Smartphone – die mobile Nutzung in Prozent erfahren.

Ergebnis: Quer über diese völlig unterschiedlichen Seiten, kommt im Schnitt mehr als jeder Dritter Nutzer über ein mobiles Endgerät. Bei einigen Seiten waren es sogar mehr als 50 Prozent der Besucher.

Wie viele werden es wohl auf anderen Webseiten sein? Ich vermute es liegt auf jeden Fall im zweistelligen Prozentbereich. Und diese Nutzer brauchen ein optimales Leseerlebnis der Seiten.

Randbemerkung: Tablets liegen bei der Nutzung meist noch deutlich hinter Smartphones. Ein Theme sollte also immer „mobile first“ betrachtet werden – sprich immer auf dem Handy.

Google will es: Klare Ansagen des Suchmaschinen-Giganten

Man mag von Google halten, was man will. Wenn man allerdings einen guten Teil seiner Besucher über die Suchmaschine bezieht, gab Google den Seitenbetreibern deutliche Signale,  dringend fit für mobile Geräte zu werden.

Zunächst die Ankündigung, dass alle Webseitenbetreiber Google nun Einblicke in die Javascript und CSS-Dateien gewähren sollen. Im Text dazu wird der Schreiber sehr klar: „Disallowing crawling of Javascript or CSS files in your site’s robots.txt directly harms how well our algorithms render and index your content and can result in suboptimal rankings.“

Zu Deutsch: Wer Google nicht reinschauen lässt, kann in den Suchergebnissen abrutschen. Und das heißt weniger Besucher auf der Seite und auch weniger Geld im Beutel.

Hintergrund dieser Forderung ist, dass Google alle Webseiten wie ein moderner Browser sehen will. Bisher schaute sich die Suchmaschine nämlich nur das HTML einer Seite an, Design und Funktionen auf der Seite konnte sie kaum erkennen. Nun aber will Google auch Javascript und CSS einer Seite interpretieren. Und in diesen Dateitypen stehen die wesentlichen Anweisungen dafür, wie sich eine Seite in verschiedenen Größenansichten verhält.

Die Funktion „Nutzerfreundlichkeit auf Mobilgeräten“ in den Webmastertools

Direkt darauf kündigte Google an, dass nun in den Webmastertools eine neue Funktion eingebaut sei. Diese gibt eine Bewertung darüber ab, wie die Seite sich auf Mobilgeräten verhält – „mobile usability“ nennt Google das, oder auf Deutsch „Nutzerfreundlichkeit auf Mobilgeräten“. Das soll  Betreibern dabei helfen, ihre Seiten für Smartphones und Tablets zu optimieren.

Zählt man zwei und zwei zusammen, ist klar, dass Google in Zukunft bewerten wird, wie gut Seiten auf mobilen Geräten dargestellt wird.

HTML5 ist da: Mobile war noch nie so einfach

Eine Ankündigung der letzten Woche bekamen fast nur Seitendesigner und Programmierer mit: HTML5 ist nun offiziell verabschiedet. Diese fünfte Fassung der Auszeichnungssprache für Webinhalte kommt mit vielen Verbesserungen, die auch den Bereich der mobilen Endgeräte unterstützen.

Was tun? So wird WordPress mobil

Betreibt man ein WordPress-Blog, hilft es, sich ein modernes Theme zu suchen und es aufzuspielen. Dabei sollte man bei der Auswahl auf die Stichworte „responsive“ und „HTML5“ achten. Kostenlose Themes listet zum Beispiel die Theme-Directory auf WordPress.org auf.

Wird man dort nicht fündig, bietet Themeforest weitere kostenpflichtigen Designs an. Sie pendeln meist um die 50 Dollar einmalig.

Wer selbst programmieren kann, für den gibt es hilfreiche Vorlagen mit integrierten Funktionen, sogenannte Frameworks. Da wäre zum Beispiel Foundation Press (kostenlos) oder Genesis (knapp 60 Dollar) eine Möglichkeit.

Auch für Joomla und andere Content Management Systeme gibt natürlich ähnliche Lösungen. Wer eine Webseite ganz frei programmieren möchte, findet hier ein Tutorial für mobiles Design.