Die perfekte mobile Webseite

Seit dem 21. April 2015 gilt die mobile Nutzerfreundlichkeit einer Webseite als Google-Rankingfaktor. Webseiten, die bis zu diesem Datum noch nicht für mobile Endgeräte (in erster Linie Smartphones) optimiert wurden, werden auf diesen Geräten in den Suchergebnissen herabgestuft. Beachtet man die Tatsache, dass in vielen Bereichen der Mobile- den Desktop-Traffic prozentual bereits überholt hat, dürften die Auswirkungen des Updates schnell klar werden. Dieser Artikel erklärt die wichtigsten Grundlagen einer perfekten mobilen Website und zeigt gelungene Beispiele.

Symbolfoto Mobile Website

(Foto: © stokkete – Fotolia.com)

Starting April 21, we will be expanding our use of mobile-friendliness as a ranking signal. This change will affect mobile searches in all languages worldwide and will have a significant impact in our search results. Consequently, users will find it easier to get relevant, high quality search results that are optimized for their devices. (Quelle: Google Webmaster Central Blog, 26.02.2015)

Diese Entwicklung seitens Google kam alles andere als unerwartet. Bereits seit gefühlten Ewigkeiten finden sich in den offiziellen Hilfeartikeln umfangreiche Anleitungen um eine Webseite „mobile-friendly“ im Sinne von Google zu gestalten. Auch anhand des PageSpeed Insights Tools können Webentwickler seit langem sehen, wie ernst Google das Thema nimmt: Nach Klick auf den „Analysieren“-Button landet man nicht auf dem Desktop-, sondern dem Mobile-Reiter. Wer bis dahin dennoch nicht an die mobile Revolution geglaubt hat, wurde spätestens mit der Einführung der „Für Mobilgeräte“-Anzeige in den Suchergebnissen eines besseren belehrt.

In diesem Artikel soll es nun aber nicht darum gehen, die eigene Website schnell und hektisch mobilfreundlich zu bekommen. Nur durch das Bestehen von Googles „Test auf Optimierung für Mobilgeräte“ wird ein Internetauftritt nämlich nicht automatisch perfekt. Die dort ausgeführte Analyse bezieht sich nur auf rudimentäre Grundlagen. So wird einem das Prädikat „mobile-friendly“ beinahe schon verliehen, wenn überhaupt ein mobiler Darstellungsbereich (Viewport) definiert wurde.

Auch wenn zu hoffen ist, dass Googles Algorithmen hier in Zukunft noch feiner werden und reale Nutzerdaten in die Analyse der Mobilfreundlichkeit mit einbeziehen, soll es in diesem Artikel eher um gelungene Umsetzungen und Best Practices realer Webseiten gehen. Da es die eine perfekte mobile Webseite kaum geben kann, konzentrieren wir uns eher auf einzelne Teilaspekte eines Internetauftritts.

Alle Artikel bequem via E-Mail lesen

Alle Artikel bequem via E-Mail lesen

Jeden Montag veröffentlichen wir einen ausführlichen Beitrag, geschrieben von namhaften Expertinnen und Experten. Sie erklären, geben Tipps und ordnen ein. Wer diese und weitere Artikel nicht verpassen will, bekommt sie mit dem UPLOAD Newsletter bequem zugeschickt – in voller Länge! In diesem Monat dreht sich der Schwerpunkt um Künstliche Intelligenz

Mehr über die aktuelle AusgabeJetzt den Newsletter bestellen

Responsive Webdesign und Mobile First

Angenommen man hätte die Möglichkeit, von Null zu starten beziehungsweise einen kompletten Relaunch des Frontends durchzuführen. Wie sollte man im Jahr 2015 starten?

Viele Webseiten-Betreiber entscheiden sich leider noch immer für jeweils eine Desktop- und eine Mobile-Variante. Dadurch stehen prinzipiell zwei verschiedene HTML-Dokumente unter zwei verschiedenen URLs bereit. Dieses Vorgehen stellt zwar weiterhin eine valide Möglichkeit dar, wird aber weder von Webentwickler-Experten noch von Google empfohlen. Beide lancieren eher Responsive Webdesign unter dem Mobile-First-Ansatz.

In den offiziellen Google Hilfeartikeln heißt es hierzu beispielsweise:

Responsive Webdesign: Stellt unabhängig vom verwendeten Gerät – Desktop, Tablet, Mobilgerät oder nicht-visueller Browser – denselben HTML-Code bereit, kann den Inhalt jedoch auf Grundlage der Bildschirmgröße variieren. Responsive Webdesign ist der von Google empfohlene Ansatz.

Mobile First stellt dabei einen noch immer recht wenig verwendeten Ansatz vor, Webseiten sowohl logisch, inhaltlich als auch technisch von klein nach groß aufzubauen. Also beim Smartphone (vielleicht sogar der Smartwatch?) beginnen und beim Desktop (oder doch dem 60-Zoll-Wohnzimmer-TV?) aufhören. Ein großer Vorteil dieser Methode ist, dass man sich wesentlich intensiver mit seinen Inhalten und Nutzungsstrukturen auseinander setzen muss. So muss im Vorfeld beispielsweise eine klare Linearisierung sämtlicher Elemente folgen.

Für Webentwickler ist es anfangs in der Regel sehr schwierig, sich auf den Mobile-First-Ansatz einzustellen. Viele gelernte Denkmuster wollen gebrochen und neue Best Practices müssen erst noch erarbeitet werden. Trotz aller Einstiegshürden sollte man sich zwingend mit dieser neuen Methodik vertraut machen. Wer einmal Mobile First gearbeitet hat, wird die Vorzüge nicht mehr missen wollen.

Currys

Dass selbst sehr große Online-Shops responsive umgesetzt werden können, zeigt beispielsweise der englische Anbieter Currys. Hier entsteht eine gute geräteübergreifende User Experience, ohne die Nachteile einer eigenständigen Mobile-Site in Kauf nehmen zu müssen.

Im weiteren Artikelverlauf soll es um mobile Best Practices gehen. Man sollte dabei im Hinterkopf behalten, dass der Rahmen durch die Techniken Responsive Webdesign und Mobile First gebildet wird. Viele Beispiele lassen sich dennoch ebenso oder ähnlich auf eigenständige mobile Webseiten anwenden.

Alles auf einen Blick: Die Hauptnavigation

Seit jeher eines der wichtigsten Elemente einer Seite ist die Hauptnavigation. Auch im mobilen Kontext ist dieser Baustein nicht unwichtiger geworden – im Gegenteil. Zugleich könnte man allerdings den Eindruck gewinnen, viele Webentwickler gäben sich bei der Umsetzung einer responsiven Navigation wenig bis gar keine Mühe.

Die häufigste Methode, eine komplexe Desktop-Navigation auf dem Smartphone dazustellen, ist wohl immer noch das klassische HTML-Auswahlfeld. Hierbei werden alle Menüpunkte als <option>-Elemente in ein <select->Element geschrieben. Das Auswahlfeld wird anschließend optisch ausgeblendet und durch ein Icon (z.B. „Hamburger-Symbol“) überblendet. Nach einem Klick auf einen Seitentitel erfolgt die Weiterleitung via JavaScript.

Der große Vorteil dieser Methode ist, dass das Menü auf allen Geräten funktioniert und vom Browser nativ ausgespielt wird. Beim konkreten betrachten ergeben sich allerdings auch einige Nachteile:

  • Ohne JavaScript funktioniert die Hauptnavigation nicht
  • Bei vielen Navigationspunkten wird der Quelltext durch ein riesiges <select>-Element aufgebläht
  • Generell müssen für die selbe Funktionalität je nach Endgerät unterschiedliche HTML-Knoten hinterlegt werden
  • Beispielsweise auf iOS-Geräten lassen sich Leerzeichen nicht ohne weiteres einfügen, wodurch keine Strukturierung nach Unterpunkten möglich ist
  • Häufig wird das Auswahlfeld vom Browser in der Höhe stark beschränkt, wodurch auf den ersten Blick nur wenige Seitentitel sichtbar sind

Einen besseren Ansatz für eine mobile Navigation, bei der das HTML grundsätzlich nur einmal definiert werden muss, bietet ein Off Canvas Menü (auch bekannt als Flyout Navigation). Klickt man im Kopfbereich auf ein bestimmtes Icon (z.B. wieder das Hamburger-Symbol) schiebt sich von links ein neues Fenster mit eigenem Scrollbereich in den Viewport.

Leser mit Android-Smartphone werden diese Art der Benutzerführung von fast sämtlichen Apps kennen. Seit Android 5.0 sollten Apps laut Google nämlich nach den Richtlinien des „Material Designs“ gestaltet werden. Dort wird das Off Canvas Menü ebenfalls als Best Practice für Hauptnavigationen angesehen.

Aber auch im Web lässt sich dieses Modell mit etwas CSS und JavaScript gut umsetzen. Als Beispiel sei hier die mobile Variante von Google Drive genannt. In der oberen Kopfzeile findet sich ein Hamburger-Icon, über das sich die Off Canvas Hauptnavigation öffnet. Hier findet man nun sauber aufgelistet sämtliche Navigationspunkte. Falls die Höhe des Menüs größer ist als die Bildschirmhöhe, lässt sich im Canvas scrollen ohne dass sich der eigentliche Inhalt verschiebt. Besonders gelungen: Auch via Touch-Geste lässt sich die Navigation auf dem Smartphone öffnen oder schließen.

Google Drive

Die mobile Google Drive Webseite macht es vor. Nach dem Klick auf das „Hamburger-Symbol“ schiebt sich von links ein Flyout-Menü ein und präsentiert gut nutzbar die Hauptnavigation.

Hilfe! Wo ist meine Seitenleiste?

In Gesprächen mit Kunden ergibt sich teilweise das Bild, als sei ihnen die Seitenleiste wichtiger als der eigentliche Inhalt ihrer Unterseite. Auch wenn man in dem Fall eventuell ein Problem mit der Ausrichtung seines Contents hat, so können in der Seitenleiste selbstverständlich wichtige Elemente vorhanden sein, die auf dem Smartphone auch eine hohe Relevanz haben.

Als Beispiel seien hier die Öffnungszeiten, die Adresse und vor allem die Telefonnummer auf einer KMU-Webseite genannt. Gerade letztere besitzt bei einem Seitenaufruf via Smartphone in der Regel einen noch höheren Stellenwert als auf dem Desktop. Schließlich muss man sich immer vor Augen führen, unter welchen Vorraussetzungen und mit welcher Erwartungshaltung ein Besucher auf die eigene Webseite kommt.

Nun ist es die Regel, dass Seitenleisten im Responsive Webdesign entweder komplett versteckt oder einfach unter den Hauptinhalt verschoben werden. Somit sind wichtige Inhalte beziehungsweise einfach nur relevante Daten wie Telefonnummer oder Adresse erst nach mehreren Scroll-Vorgängen sichtbar. Um dies zu verhindern, könnte man sich an einer der folgenden drei Techniken orientieren.

1. Off Canvas Sidebar

Ähnlich wie beim vorherigen Punkt mit der Hauptnavigation, ließe sich natürlich auch die komplette Seitenleiste in einen Flyout-Bereich verwandeln. So könnte man im Kopfbereich beispielsweise einen kleinen Button mit der Aufschrift “Kontakt & Anreise” platzieren, der nach einem Klick von rechts einen Layer in den Viewport schiebt. Dort hätte man dann sowohl für Telefonnummer, Adresse und Öffnungszeiten als auch eine kleine Google Maps – Karte ausreichend Platz.

The Next Web

Die englischsprachige Webseite The Next Web hat das Prinzip der Off Canvas Sidebar sehr schön umgesetzt. Aktuelle und beliebte Artikel, die sonst in der linken Seitenleiste Platz finden, werden in der mobilen Variante erst nach Klick über eine Off Canvas Fläche eingeblendet. Übrigens ist auch hier der komplette Webauftritt vollständig responsive.

2. Inhalte via JavaScript tauschen

Eine andere Möglichkeit wäre, zwar die komplette Seitenleiste unter den Hauptinhalt zu schieben, dafür allerdings wichtige Elemente via JavaScript zu extrahieren und über dem Inhalt wieder einzufügen. So wäre zumindest sichergestellt, dass die wichtigsten Informationen sofort sichtbar sind. Nachteilig bei dieser Variante ist allerdings, dass der Hauptinhalt dadurch weniger Platz im sofort sichtbaren Bereich erhält.

3. Responsive Content

Die eleganteste, aber gleichzeitig auch redaktionell aufwändigste Methode ist der Responsive Content. Hierbei wird versucht, je nach Endgerät oder anderen Nutzereigenschaften die Intention des Besuchs herauszufinden und dahingehend den Inhalt zu verändern. So könnte man in unserem Beispiel der KMU-Website die Seitenleiste komplett ausblenden und deren Informationen im Hauptinhalt unterbringen. Aus der Einleitung “Willkommen bei XY. Wir sind ein Tradtionsunternehmen seit […]” könnte auf dem Smartphone beispielsweise “Willkommen bei XY. Sie erreichen uns unter der Telefon-Nr. […] oder vor Ort […]. Wir sind ein Tradtionsunternehmen seit […]”.

Camperco

Die deutsche Webseite camperco.de zeigt sehr schön, wie man durch den sinnvollen Einsatz von Responsive Content Inhalte auf mobilen Geräten mit begrenztem Platz kürzen kann. Oben findet man die Variante, welche auf Smartphones angezeigt wird; unten hingegen die Desktop-Version.

Ein Bild sagt mehr als tausend Worte

Natürlich sind Smartphones nicht die erste Wahl, um Bilder und Grafiken zu betrachten. Dennoch sind die Möglichkeiten alles andere als begrenzt. Moderne Geräte mit ihren immer größer werdenen Bildschirmen und physischen Auflösungen, die so manchen 24-Zoll-PC-Monitor übertrumpfen, bieten meist genügend Raum, um sogar informative Grafiken hinreichend darzustellen.

Allerdings gibt es gerade bei diesem Thema viele Fallstricke zu beachten und Herausforderungen zu meistern. Vermutlich sind es sogar die Bilder, die so manchen Webseiten-Betreiber gegen ein Responsive Webdesign und für eine eigenständige mobile Webseite entscheiden lassen. Dennoch gibt es Stand April 2015 hinrechend Möglichkeiten, auch dieses Thema technisch zu meistern.

Das <picture>-Element

<picture> ist ein noch sehr junges HTML-Element, welches Stand heute nur im aktuellen Chrome (ab Version 38) und der Firefox Beta (auch ab Version 38) integriert ist. Im Zusammenspiel mit dem ebenfalls neuen <source>-Element und srcset-Attribut erlaubt es Webentwicklern, Grafiken auf Basis von Media Queries und Browsereigenschaften auszuspielen. Die Möglichkeiten sind dabei quasi unbegrenzt:

  • Bilder können in verschiedenen Größen ausgespielt werden.
  • Es können auf Smartphones sogar komplett andere Bilder als auf dem Desktop angezeigt werden.
  • Bei hochauflösenden Bildschirmen (Retina) können entsprechend Bild-Varianten geladen werden.
  • Alternative Dateitypen (z.B. WebP) werden geladen, sofern der Browser sie unterstützt.

Ein vollständige Einbettung könnten wie folgt aussehen:

<picture>

<source media="(min-width: 980px)" srcset="desktop.webp 1x, desktop@2x.webp 2x" type="image/webp">

<source media="(min-width: 980px)" srcset="desktop.jpg 1x, desktop@2x.jpg 2x">

<source media="(min-width: 600px)" srcset="tablet.webp 1x, tablet@2x.webp 2x" type="image/webp">

<source media="(min-width: 600px)" srcset="tablet.jpg 1x, tablet@2x.jpg 2x">

<source srcset="smartphone.webp 1x, smartphone@2x.webp 2x" type="image/webp">

<source srcset="smartphone.jpg 1x, smartphone@2x.jpg 2x">

<img src="desktop.jpg" alt="Fallback für ältere Browser">

</picture>

Hier wird bei Bildschirmen, die größer als 980 Pixel sind, das Bild desktop.jpg geladen. Zwischen 600 und 979 Pixeln wird tablet.jpg verwendet, darunter smartphone.jpg. Für aktuelle Chrome-Browser steht zudem das alternative Bildformat webp zur Verfügung. Außerdem werden Retina-Geräte mit einer höherauflösenden Bildvariante beliefert.

Startuplove

Die Webseite startuplove.de nutzt das <picture>-Element beispielsweise für ihren Haupt-Slider. So wird sichergestellt, dass auf Geräten mit kleinen Bildschirmen keine zu großen Grafiken geladen werden müssen. Zudem verändert sich das Bildformat und die Schrift wird größer, um auch skaliert weiterhin lesbar zu bleiben.

Lazy Loading

Unter Lazy Loading versteht man das asynchrone Nachladen von Inhalten, wobei in der Regel Bilder gemeint sind. So werden Grafiken beispielsweise erst vom Server angefordert, sobald sie nach dem Scrollen in den sichtbaren Bereich rutschen.

Dies kommt natürlich sehr stark der Ladegeschwindigkeit einer Webseite zu Gute, da beim initialen Aufruf wesentlich weniger Ressourcen geladen werden müssen. Gerade auf Smartphones wird dieser Effekt noch verstärkt, da ohne Scrollen auf Grund des begrenzten Platzes nur wenige Bilder sofort angezeigt werden können.

Otto

Der Online-Shop otto.de nutzt Lazy Loading unter anderem in den Kategorie-Übersichten. So kann auf eine Paginierung der Seiten verzichtet und direkt hunderte Treffer angezeigt werden, ohne eine längere Ladezeit zu befürchten.

Wer nicht wirbt, stirbt

Werbung auf der eigenen Webseite zu platzieren ist immer eine heikle Sache. Es ist nicht einfach, einen guten Kompromiss zwischen hoher Klickrate und unaufdringlicher Platzierung zu finden. Da der sofort sichtbare Bereich einer Webseite auf mobilen Geräten natürlich noch wesentlich kleiner ist als auf dem Desktop, ist eine gute Platzierung hier sogar noch schwieriger. Zudem kommt erschwerend hinzu, dass viele Vermarkter auch im Jahr 2015 das Thema Mobile noch viel zu stiefmütterlich behandeln und Werbebanner nur in den unmöglichsten Varianten anbieten.

Handelt es sich um einen ganz einfachen klassischen Werbebanner, könnte vielleicht der Einsatz des gerade eben erwähnten <picture>-Elements Sinn machen. So ließen sich zumindest auf dem Smartphone andere Werbebanner einblenden als auf dem Desktop. In Kombination mit Lazy Loading könnte man sogar noch einen Schritt weiter gehen und Werbung Mobile an anderer Stelle einblenden.

Darüber hinaus sollte man auf jeden Fall austesten, ob ein klassischer Werbebanner auf dem Smartphone überhaupt das richtige Medium ist. Häufig erreichen ganz einfache Textlinks oder Infotexte mit anschließendem Call-To-Action-Button mobil wesentlich bessere Klickraten. Gerade bei Affiliate-Werbeformen sind hier der eigenen Kreativität keine Grenzen gesetzt.

Publisher des Google Adsense-Werbeprogramms haben beim Thema Mobile weniger Probleme: Seit einiger Zeit gibt es nämlich die Möglichkeit, responsive Werbeblöcke zu erstellen. Diese haben dann keine festen Größen mehr, sondern die jeweiligen Werbebanner werden maximal so groß ausgespielt, dass sie auf jeden Fall noch in ihr Elternelement passen. Gerade wenn man mit reinen Text-Adsense-Anzeigen arbeitet, funktioniert diese Technik in der Regel sehr gut.

Wasgucken

Die Webseite wasgucken.com nutzt unter anderem den responsiven Adsense Anzeigen-Code. So werden die Werbeflächen selbst auf dem kleinsten Smartphone perfekt ausgenutzt.

Keine Zauberer, aber viel Arbeit

Zusammenfassend ist zu sagen, dass die Umsetzung der perfekten mobilen Webseite definitiv möglich ist. Um diese zu entwickeln ist allerdings sehr viel technisches Verständnis und eine große Portion Herzblut nötig. Betrachtet man die stetig wachsenden Zugriffszahlen mit mobilen Geräten, Googles Strategie das Thema Mobile weiter zu forcieren und vor allem auch den Umgang junger Leute mit mobilen Geräten, ist man mit Sicherheit gut beraten, der eigenen mobilen Webseite genügend Aufmerksamkeit zu schenken.

Artikel vom 04. Mai 2015