Die 3 Schritte zur mobilen Optimierung der Website

Bereits im November 2014 hat Google im offiziellen Webmaster-Blog darauf hingewiesen, dass es ab sofort in den Suchergebnissen anzeigt, wenn Websites „mobile friendly“ sind. Am 21. April wird es dann richtig ernst: die Mobiltauglichkeit der Website wird ab diesem Stichpunkt nicht nur angezeigt, sondern hat auch nachhaltige Auswirkungen auf die Platzierung der Seite in den Suchergebnissen – zumindest wenn von einem mobilen Endgerät gesucht wird.

Die Vorgaben von Google, was dort unter einer „mobile friendly“ Website verstanden wird sind klar:

  • Keine Software, die nicht auf allen Endgeräten verfügbar ist, z.B. Flash
  • Texte müssen ohne Zoomen lesbar dargestellt werden
  • Die Seitengröße passt sich an die Gerätegröße an, sodass nicht horizontal gescrolled oder gezoomt werden muss
  • Links müssen weit genug auseinander liegen, um gut tap-bar zu sein

Wir besprechen nachfolgend die 3 wichtigsten Schritte für die mobile Optimierung der Website, um diesen Anforderungen gerecht zu werden.

1. META Angaben zur mobilen Optimierung

META Viewport

Der Viewport sagt dem Endgerät, wie die Seitenbreite gehandhabt werden und wie diese skaliert werden soll. Die Viewport-Angabe ist das einfachste und effektivste Methode, um den Browser daran zu hindern, eine Website auf Smartphonegröße zusammenzuquetschen.


<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Gut zu wissen: 1 Pixel != 1 Pixel

Mit der Einführung der hochauflösenden Retina-Displays durch Apple, die mittlerweile in allen Smartphones und Tablets Standard sind, ist ein Pixel nicht mehr wirklich ein Pixel. FireFox, Chrome und selbst der Internet Explorer, man glaubt es kaum, verwenden auf solchen Displays 1.5 Pixel zur Darstellung eines „echten“ Pixels. Damit wird der Text auf hochauflösenden Displays trotz der höheren Pixeldichte in etwa der gleichen Größe angezeigt, wie auf regulären Monitoren.

Quelle: Pixels in the Viewport

META web-app-capable

Wenn wir schon die Meta-Daten der Website bearbeiten, sollten wir die Gelegenheit nutzen, auch ein Icon für den Homescreen einzubauen. Fügt der User die Website dem Desktop (bzw. Homescreen) hinzu, für das so eingebundene Icon als „App“ Icon angezeigt:


  <meta name="mobile-web-app-capable" content="yes">
     <link rel="icon" sizes="192x192" href="/icon.png">

2. Flexible Seitenbreiten

Als man noch für den Desktop entwickelt hat, konnte man wunderschön einen Wrapper mit 980 Pixeln Breite anlegen und darin die Website darstellen. Ganz so einfach ist es heute nicht mehr: Smartphones haben eine deutlich kleinere Breite und die Angabe solcher starrer Seitenbreiten erfordert hässliches Querscrollen.

Der zweite Schritt bei der mobilen Optimierung einer Website muss also sein, alle fixen Breitenangaben von Containern, Wrapper usw. zu eliminieren.

Da man aber die Angabe der Seitenbreite auf Desktops durchaus benötigt (wir wollen ja nicht, dass die Website auf die 1900+ Pixel unseres 21 Zoll-Monitors zerläuft), müssen wir an dieser Stelle dem Browser mitteilen, dass er mobile Geräte gezielt anders behandeln soll. Dafür gibt es zwei brauchbare Methoden, die wir nachfolgend kurz vorstellen möchten: das CSS media-query, wenn man sehr differenziert verschiedene Seitenbreiten behandeln will und die serverseitige Feststellung des User Agents mit Einbindung eines passenden Stylesheets.

CSS Media-Queries mit max-width

Ein einfaches Mittel, die verfügbare Seitenbreite herauszufinden, um den Content entsprechend anzupassen, ist der Einsatz von Media Queries. Da uns bei der mobilen Optimierung insbesondere die Geräte interssieren, die eine bestimmte Breite nicht überschreiten, dient uns der folgende Codeschnipsel am besten:


@media (min-width: 370px) {
    .myClass{}
}

Auf diese Weise lässt sich für alle Medien, die eine Mindestbreite von 370 Pixeln haben, die benannte Klasse entsprechend formatiert wird. Quelle: selfhtml MediaQueries

User Agent Switch mit mobilem CSS

Serverseitig lässt sich in PHP durch den folgenden Code feststellen, ob der Besucher einen mobilen Browser verwendet:


$useragent = $_SERVER['HTTP_USER_AGENT'];
            if (preg_match('/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i', $useragent) || preg_match('/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i', substr($useragent, 0, 4)) ) 
{ // code for mobile here }

Dieser Code erlaubt z.B. die Einbdinung eines mobile.css, dass gezielt alle Klassen des „normalen“ CSS überschreibt, die mobil anders gehandhabt werden müssen. Auf diese Weise lässt sich etwas übersichtlicher und schneller ein mobiles CSS anfertigen, als mit Media Querries, aber dafür nicht so feingliedrig.

Wie groß ist groß genug, damit Links als „tappable“, also mit dem Finger bedienbar gelten?

In den Richtlinien für Android-Benutzeroberflächen wird für Links oder Schaltflächen auf Mobilgeräten eine Mindestgröße von etwa 7 mm bzw. 48 CSS-Pixeln auf einer Website mit korrekt festgelegtem Darstellungsbereich für Mobilgeräte empfohlen.

3. Geschwindigkeitsoptimierung für Mobile

Google und nicht zuletzt auch der User, erwarten auf mobilen Endgeräten mehr noch als bei schnellen Desktop-Verbindungen, dass der Seiteninhalt schnell lädt, sprich möglichst wenig Daten übertragen werden.

Wurde im Zuge steigender Datenraten diese Problematik für einige Zeit etwas laxer gehandhabt, so hat das Thema jetzt mit der sprunghaften Verbreitung mobiler Endgeräte wieder eine größere Bedeutung erhalten.

Die Menge und Art der von der Website übertragenen Daten ermittelt man am einfachsten mit dem Web-Developer Tool (in fast jedem Browser per F12 zu öffnen) und findet dort im Menupunkt „Netzwerk“ beim Refresh der Seite (Achtung: Cache vorher leeren), eine erschöpfende Auskunft, welche Files übertragen wurden. Hier gilt es zu prüfen, wo das meiste Einsparpotenzial liegt. Einige Möglichkeiten, das Datenvolumen zu reduzieren sind:

  • CSS und JS Files minimieren (Zeilenumbrüche und Spaces entfernen) – dafür gibt es online zahlreiche Tools
  • Komprimierung der Website-Daten per GZIP
  • Serverseitiges Caching der Website, wie es die meisten Frameworks anbieten (z.B. in Joomla)
  • Einsatz eines Content Delivery Networks wie z.B. Cloudflare

Letzte Schritte der mobilen Optimierung

Nach der ganzen Optimierung kann man sich dann entsprannt zurücklehnen und die folgenden praktischen Google-Tools nutzen, um prüfen zu lassen, ob die Website nun den Vorstellungen des Suchmaschinen-Weltherrschers entspricht:

Dieser Beitrag wurde unter HTML5 abgelegt und mit verschlagwortet. Setze ein Lesezeichen auf den Permalink.

5 Antworten auf Die 3 Schritte zur mobilen Optimierung der Website

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert