Responsive Design heißt nicht mobil optimiert

Immer und immer wieder hören wir von Kontakten, dass sie jetzt auch eine Responsive Website haben oder sich diese entwickeln lassen wollen. Dadurch soll einerseits eine  Suchmaschinenoptimierung für “mobile Ergebnisse” erreicht werden, andererseits sollen Nutzer mit dem Smartphone die Seite besser bedienen können. Überprüft wird der Erfolg des Responsive Design aber wenn überhaupt oftmals nur mit dem Mobile Friendly Tests von Google überprüfen.

Google's Mobile Friendly Test untersucht nur einfache mobile Anforderungen, keine mobile Optimierung
Google’s Mobile Friendly Test untersucht nur einfache mobile Anforderungen, keine mobile Optimierung

Doch Google’s Tool interpretiert und Responsive Design bedeutet nur, dass sich das Design bzw. die Elemente der Website auf die Browsergröße anpassen und die Homepage, der Blog oder Shop auf dem Smartphone oder Tablet PC auch bedienbar ist.
Das bedeutet aber nicht zwingend, dass sich die Informationsdichte auf das jeweilige Endgerät anpasst. Denn wer mobil surft, hat meist deutlich weniger Zeit und benötigt viel “knackigere” Inhalte als ein Desktop-Nutzer. Somit besteht die echte mobile Optimierung einer Website aus zwei Haupt-Elementen: Die Konzeption und Anpassung der Inhalte sowie die Optimierung des Designs und der Technik.

Konzeption und Inhalte

Ziel der “Mobile Konzeption” ist es, alle wichtigen Inhalte schnellstmöglich (d.h. idealerweise im Above the Fold-Bereich) zugänglich zu machen. Idealerweise findet dies schon mit der klassischen Konzeption einer Website statt – wie bezeichnen das als “Mobile First”-Konzept, oder man zieht die mobile Optimierung nach.

Beim “Mobile First”-Konzept (dt. “Mobil Zuerst”) wird eine Website oder Web-Anwendung zunächst für die mobile Anwendung konzipiert und ist damit deutlich reduzierter. Erst nachdem das mobile Konzept steht, werden für Desktop Nutzer weiterführende Informationen hinzugefügt.

Da es aber nicht immer Sinn macht, gleich ein völlig neues Konzept zu entwickeln, kann man auch bestehende Konzepte auf “Mobile” auszurichten. Dabei werden die einzelnen Elemente jeder (wichtigen) Seite je nach Relevanz für das jeweilige Publikum klassifiziert: ich prüfe also, welcher Button und Absatz für das jeweilige Surfverhalten Sinn macht, und markiere dann auszublendende Elemente für mobile Nutzer.

In beiden Fällen sollte auch die unterschiedliche Lead-Generierung und Conversion-Optimierung für das jeweilige Endgerät berücksichtigt werden. Das beinhaltet auch, dass man sich auf Besonderheiten des Endgerätes einstellt. Beispiele dafür:

  • Mobile Browser haben oft schon die wichtigsten Sharing-Buttons (“Teilen”-Buttons) für Facebook und Twitter und E-Mail-Empfehlungen mit an Board. Immer wichtiger auf mobilen Endgeräten wird dagegen Whatsapp. Wer als den Platz der Sharing Buttons nicht mit überflüssigen Funktionen verschwenden will, sollte hier dringend die klassischen Sharing-Buttons ausblenden, dafür aber andere (exotischere) Funktionen einblenden. Btw: Unser SEO Plugin hat so eine Steuerung mit integriert.
  • Telefonnummern und sollten mindestens auf mobilen Endgeräten mit Anruf-Links versehen werden. Dazu reicht es aus die internationale Rufnummer ohne Leerzeichen und Klammern in den Link mit aufzunehmen. Das schaut dann so aus: 
    <a href="+498951617071">Jetzt anrufen</a>

    Da heute aber schon immer mehr Computer mit Skype, iCloud-Telefonie und Telefonanlagen-Software ausgestattet sind, macht diese Funktion aber auch für Desktop-Geräte Sinn.

Design und Technik

Das Design durch Responsive Programmierung auf die Auflösung unterschiedlicher mobiler Endgeräte anzupassen ist eine ziemlich einfache Sache: Man definiert Buttons, Links und Funktion, die einfach mit den Touch-Gesten mobiler Endgeräte zu bedienen sind.

Einzelne Abschnitte der eigenen Texte lassen sich dann mit ziemlich einfachen Code-Schnipseln (engl. Shortcodes) markieren und für mobile Endgeräte ausblenden. In WordPress funktioniert das in drei einfachen Schritten:

  1. Erweitere die Shortcodes deines Themes in der functions.php-Datei um eine Markierung,  mit der du dann Informationen, die für mobile Endgeräte nicht relevant sind, markieren und ausblenden kannst: 
    /** * NoMobile Shortcode */ function nomobile_shortcode( $atts, $content = null ) { return '<div class="nomobile">' . $content . '</div>'; } add_shortcode( 'nomobile', 'nomobile_shortcode' );
  2. Ergänze dann die style.css-Datei deines Themes um die Ausblende-Funktion bei mobiler Auflösugn: 
    @media (max-width: 750px) { .nomobile {display: none;} }
  3. Markiere dann diejenigen Elemente, die du auf mobilen Endgeräten ausblenden möchtest mit der Klasse .nomobile. Die Text-Passagen, die für mobile Nutzer nicht relevant sind, kannst du dann durch das Eingeben des Shortcodes
    • NoMobile Shortcode Open vor dem Text und mit einem
    • NoMobile Shortcode Close nach dem Text ausblenden (Achtung, beide Shortcodes hier sind Bilder, da ich die selber in unserer Website einsetze).

Wirklich wichtig ist die Website auch in Punkto Performance für die mobile Nutzung zu optimieren. Das beginnt beim programmierten Design (Theme bzw. Template genannt) und endet bei Einstellungen für Bilder und Zwischenspeicher, "Cache" genannt. Den konkreten Optimierungsprozess eines Themes zu erläutern würde hier die Zeilenzahl sprengen, deswegen rate ich hier zu einem ordentlichen Setup von WordPress und einen Blick auf Google's PageSpeed Tool, welches Geschwindigkeitsinformationen und Optimierungsvorschläge für die mobile Website ausgibt.

Fazit

Responsive Design ist sprichwörtlich ein äußerst dehnbarer Begriff. Man sollte sich damit aber nicht zufrieden geben, sondern konkret Maßnahmen unternehmen um eine Website wirklich mobil zu optimieren.

Um den Aufwand einer inhaltlichen mobilen Optimierung nicht zu sprengen, optimiere ich selbst nur die statischen Seiten. Blogbeiträge bleiben von so einer inhaltlichen Optimierung unberührt, da dies enorm aufwändig wäre, einzelne Informationen aus dem Kontext zu nehmen.