php-homepage.com

Responsive Layout - Mobile Ready und Responsive Design -
Wozu der Aufwand?

Schon lange keine "Modeerscheinung" mehr, wie von vielen Skeptikern des responsiven Designs anfangs gemeint,
ist ein modernes, flexibles Webdesign.
Zu lange haben sich viele Blogger/Seitenbetreiber auf templates und Content Managment Systeme verlassen,
wer aber seit dem Aufschwung der Mobilgeräte noch vernünftig ranken und Besucher über Google bekommen will,
kommt um responsive Design nicht herum!

Mobile Ready als Ranking Faktor

Schon im Frühjahr 2015 hat Google angegkündigt, dass die "mobile usability" ein Ranking Faktor sein wird.
Auch in den Webmaster tools (Search Console) findet sich die Option für Geräte, sprich Desktop bzw. Tablet und Mobil,
wo man durchaus unterschiedliche Positionen eines keywords für verschiedene Geräte erkennen kann:

mobiles ranking google

Wie man sieht, sind die Impressionen (seit etwa Herbst 2016) von Mobilgeräten je nach Domain/Keyword schon
doppelt so hoch wie der potentielle Traffic von Desktop-Usern.
Auch die Positionen sind bei der Domain auf meinem Screenshot viel besser als auf klassischen Desktops. --> Dank konsequent eingehaltenem Responsive Design, im Gegensatz zu vielen Mitbewerbern!
Der Abfall in den letzten Wochen rührt von kürzlich erfolgter Umstellung auf https,
einer weiteren SEO-Maßnahme, die ich zurzeit auf allen Domains durchführe.

Mobiltauglichkeit und mobile Ranking überprüfen

Erste Anlaufstelle ist wie oben erwähnt die Search Console, sprich Webmaster Tools von Google, wo man seine Seite eintragen sollte.
Auch wenn die Daten oft etwas veraltet und manchmal widersprüchlich sind,
liefern die tools viele Hinweise in Hinblick auf Mobiltauglichkeit einer Webseite:

mobile webseiten in er search console

Ist meine Seite mobile ready? Werkzeuge zum Testen:

Zu den Webmaster Tools möchte ich noch erwähnen, dass man neben "Nutzerfreundlichkeit auf Mobilgeräten" noch die "Crawling Fehler" anschauen sollte!
Findet man dort unter dem Tab "Mobil" 404 Seiten mit /mobile/ oder /m/ in der Url,
obwohl man gar kein seperates Verzeichnis für mobile pages hat, so hat der Googlebot wohl verzweifelt
nach einer mobilfreundlichen Version der betroffenen Seite (Url ohne /mobile /m/) gesucht!

Hiervon waren einige unserer alten Joomla Seiten betroffen, die noch kein responsives template hatten.
Eine eigenwillige Logik vom Googlebot, zum Glück fand ich im Stackoverflow-Forum einen entsprechenden thread dazu. Das heißt, auch wenn eine Page vermeintlich "mobile ready" ist, kann es vorkommen, dass Google denkt,
die betreffende Seite wäre es nicht.
Selbst der "Mobile Friendly Test" von big G ist nicht immer zuverlässig. Weshalb man auch visuelle Tests des eigenen Layouts vornehmen sollte!

Findet ihr unter dem Menüpunkt "Crawling Fehler nur einen Tab "Desktop" und die durchaus üblichen 404, besteht wohl kein Grund zur Sorge!

Natürlich möchte man lieber vorher wissen, ob das Projekt Mobiltauglich ist, Tools zum Vorabcheck:

Ist meine Seite Responsive bzw. Mobile Ready?

Indizien, aber allein keine eindeutigen Beweise liefern folgende Schnelltests

Wie macht man eine Webseite responsive?

Hier hängt es davon ab, ob und welches CMS man benutzt. Für alle bekannteren CMS gibt es mittlerweile responsive templates zu Hauf.
Ich persönlich bin jedoch wieder von Joomla und Konsorten abgekehrt, da mir der Aufwand für permante Anpassungen unserer Templates an die unzähligen Versionssprünge, zu aufwändig wurde. Auch permanente Backubs/Updates von Files und Datenbanken und andere Unzulänglichkeiten in Sachen Suchmaschinenoptimierung
haben mich wieder "back to the roots" gebracht.
Die links am Ende der Seite liefern Beispiele und Hilfe zum Erstellen eigener Templates für Responsive Design.

Responsive Templates und Mobiltauglichkeit von CMS

Bei Content Managment Systemen kann man oft auf eine Vielzahl von Templates zurückgreifen,
aber was mit "mobile ready" bzw. "responsive" beworben wird, sollte genau geprüft werden!
Oftmals wird auf komplexe Frameworks zurückgegegriffen und was der Mobiltauglichkeit dienen sollte,
entpuppt sich als überladener Code, der zwar das Layout responsive macht,
aber gleichzeitig die Ladezeit erhöht und Performance vermindert.

Diese zwei Faktoren aber sind neben dem Layout und der Usability das Wichtigste für Mobiles Ranking!

Was hat Mobiles Design mit Responsive Design/Layout zu tun?

Es gibt verschiedene Ansätze, seine Seiten mobile ready zu machen:

Mobile Pages haben sich bis heute nicht durchgesetzt und sind kaum verbreitet,
der Aufwand wie auch die möglichen SEO-technischen Probleme sind kein gutes Argument.
Sind sozusagen seperate "Kopien" der Seite, die für Mobilgeräte optimiert sind.
AMP wird mittlerweile auch von Google empfohlen, aber noch kaum verbreitet, obwohl sich hier in Sachen Performance einiges optimieren lässt. Momentan ist der Aufwand noch zu hoch, meiner Meinung nach. Außerdem hoste ich meine Seiten lieber selbst und nicht bei Google:-)Auch bin ich kein Freund von Frameworks...
Responsive Design damals wie heute auch von Google empfohlen.
ist leicht umzusetzen, man muss nur einiges beachten,
wie ich in den links am Ende der Seite schon vor längerem beschrieben habe.
Ladezeiten beachten, Bilder optimieren usw.

Einfaches Responsive Design selbst erstellen

Hat man noch alte Webseiten oder Blogs, die noch nicht auf ein CMS umgestellt wurden,
oder schreibt man seine Seiten lieber in einem Texteditor oder Entwicklungsumgebung, wie ich hier,
kann man mit aktuellen Technologien wie CSS3 und HTML5 relativ einfach ein responsives, sprich mobiles Design selbst erstellen. Die Grundlagen hierfür habe ich schon in älteren Artikeln beschrieben:
Responsives Design Grundlagen und Beispiele
Was bedeuted "mobile ready Design"?
Bilder für Mobilgeräte optimal einbinden