Machen Sie ihre Webseite mobile-friendly

Vor einiger Zeit hat Google sein Prädikat mobile-friendly eingeführt für Webseiten, die für die Verwendung auf mobilen Geräten optimiert sind. Ab 21. April wird die mobile-friendliness ein wichtiges Kriterium bei der Positionierung Ihrer Webseite in den Such­ergebnissen.

Google empfielt, sich auf die Suche nach einem Entwickler mit Responsive Webdesign Erfahrung zu machen.

Um vom neuen Ranking zu profitieren, sollten Sie Ihre Webseite also Responsive machen. Die vollständige und lang­fristige Option hierfür ist auf jeden Fall ein Responsive Relaunch Ihrer Webseite.

Dies ist je nach Umfang Ihrer Webseite natürlich ein größeres und länger dauerndes Projekt. Viele Maßnahmen im Responsive Relaunch sind aber schritt­weise umsetzbar, um stetig das Google-Ranking über die mobile-friendliness zu verbessern

Performance-Einstellungen am CMS oder Web­server vornehmen

Mobile-friendly heißt die Nutzer nicht warten zu lassen.

Für Performance-Optimierungen gibt es Best-Practices, wie lange Cach­zeiten für Bilder in Kombination mit Cache-Busting, gzip-Komprimierung und das Minifizieren des Quellcodes.

Viele CMS verfügen über die nötigen Ein­stellungen, die mit der nötigen Expertise schnell vorgenommen werden können.

Für die Konfiguration des Webservers gibt es gute freie Grundlagen, darunter die .htaccess-Datei von html5boilerplate.Diese muss auf dem Webserver eingespielt werden.

Diese Einstellungen haben oft Neben­effekte, die bei schlecht geschriebenen Code dann zu Fehlern führen. Deshalb ist es spätestens hier unbedingt nötig, mit einer Testumgebung zu arbeiten.

Bilder optimieren

Bilder sind die größte Last einer Webseite. Werden diese redaktionell gepflegt, fehlt es oft an der nötigen Erfahrung, um das optimale Bild­format (PNG vs. JPEG) und die nötigen Einstellungen (8-bit, indiziert, 24-bit, Transparenz) zu wählen.

Hier sollten Ihre Redakteure geschult werden und gemeinsam mit dem Entwickler eine Richtlinie erarbeiten. Ihr Redakteurs­team kann anschließend bestehende Bilder überprüfen.

In einem weiteren (parallelen) Schritt lässt sich je nach CMS auch eine Lösung umsetzen, die je nach verwendetem Gerät und Verbindung passende Bild­dateien lädt (Responsive Images).

Flexibles Layout bis Tablet

Rein­zoomen ist nicht mobile-friendly!

Wenn Ihre Webseite bisher eine feste Breite hat, sich also überhaupt nicht an das Browser­fenster oder den Geräte­bildschirm anpasst, kann ein erster Schritt sein, das Layout flexibel zu machen. Das bedeutet, dass Spalten, Zeilen­längen und Weiß­räume pro­por­tional wachsen oder schrumpfen, aber die Schrift­größe die gleiche bleibt.

Dies ist natürlich je nach Layout (Anzahl Spalten etc.) bis zu einer Minimal­breite möglich. Damit erreicht man aber immerhin eine 1:1 Ansicht auf diversen Tablets, so dass die Inhalte ohne Zoom noch groß genug erscheinen. Auf kleineren Bild­schirmen behält das Layout dann diese Größe und es muss gezoomt und geschoben werden.

Ist Ihre Webseite bisher auf eine Breite von 1.024 Pixel optimiert, ist sie zum Beispiel am iPad nur in Landscape ohne Zoom zu betrachten: das iPad hat in Portrait eine Breite von 768 px.

Größere Touch Targets

Mobile-friendly = Touch-friendly

Für eine gute Nutzer­erfahrung müssen Links und Menü­einträge groß genug sein, ≥ 1 cm² ist ein üblicher Richtwert.

Das bedeutet aber nicht unbedingt dass sie optisch größer sein müssten – die klickbare (touchbare) Fläche ist aus­schlag­gebend.

Von dieser Optimierung profitieren nicht nur mobile, sondern auch Maus­benutzer, schließlich sind größere Ziele auch mit der Maus leichter, schneller, fehler­freier zu treffen.

Bild­elemente durch CSS ersetzen

Oft wurden für ein ein­heit­liches Aussehen grafischer Elemente auf allen (älteren) Browsern Bilder verwendet, die besonders auf Mobile zu langen Lade­zeiten führen.

Beispiele sind

• Schlagschatten
• Runde Ecken
• Farbverläufe

Mittlerweile sind aber ungemein viele dieser grafischen Effekte direkt im Browser mit CSS möglich, und obendrein ist doch ein Aussehen passend zu den Fähigkeiten des Browsers genau der Gedanke einer Responsive Webseite.

Man kann also schritt­weise diese Grafiken durch CSS Code ersetzten, und ein guter Web­designer wird auch gute Fallbacks für Browser finden, die nicht über die nötigen Fähig­keiten verfügen.

Mobile Browser sind in der Regel sehr aktuell und unter­stützen diese performanten Methoden.

Am Beispiel Runder Ecken

Für abgerundete Ecken benötigt ein Element 4 Grafiken, die meist je 2 kB, also zusammen 8 kB schwer sind. Der CSS-Code für runde Ecken lautet border-radius: .2 em und ist damit 19 Byte lang.

Symbole durch Icon-Fonts ersetzen

Nicht nur grafische Effekte, sondern auch Symbole wurden oft als Bilder realisiert – im Ideal­fall immerhin in einem Sprite, das viele kleine Bilder in einer Datei enthält.

Über Dienste wie IcoMoon lassen sich Symbole in eine Schriftart (Webfont) packen, die oft nur wenige kB groß ist – also so groß wie vorher nur ein einziges Symbol-Bild – und auf jedem Bildschirm scharf erscheinen.

Hierführ müssen die Symbole als Pfade vorliegen. Wenn ihr Gestalter ordentlich gearbeitet hat, ist die Icon­font also schnell gemacht. Der Entwickler muss diese dann in die Webseite einbinden und die Bilder ersetzen.

Ausblick

Wenn Sie Ihre Webseite bereits für Such­maschinen On-Site optimiert haben, sind wahr­scheinlich einige dieser Schritte schon gemacht worden, und Sie sollten eine gute Basis haben, um das Layout sogar vollständig Responsive zu machen.

Während diese Arbeiten schrittweise erledigt werden, können Sie mit der richtigen Beratung auch bereits an Inhalten arbeiten. So ist in Einzel­schritten über z.B. ein halbes oder ganzes Jahr verteilt ein Responsive Relaunch möglich.

Mobile-friendly bedeutet natürlich noch mehr, als Google über standardisierte Checks prüfen kann. Bei­spiels­weise lassen sich auch Touch-Gesten für Slider recht einfach nachrüsten, oder die Auflösung Ihres Favorite-Icons verbessern, dass dann auf hoch­auf­lösenden Geräten toll aussieht.