Mobile Endgeräte werden immer beliebter, und spielen deshalb auch bei der Webentwicklung eine immer wichtigere Rolle. Die Größe des Bildschirms und die Umgebung, in der man sie nutzt, erfordern andere Ansprüche an die Darstellung der Inhalte. Wie kann der Content für Smartphone, Tablet & Co. optimiert werden, damit der User Spaß am mobilen Surfen hat? Wir haben Tipps und Hintergründe zusammengestellt!
   •   13 März 2019

Inhalte für Smartphone, Tablet & Co. fit machen

Mobile Endgeräte werden immer beliebter, und spielen deshalb auch bei der Webentwicklung eine immer wichtigere Rolle. Die Größe des Bildschirms und die Umgebung, in der man sie nutzt, erfordern andere Ansprüche an die Darstellung der Inhalte. Wie kann der Content für Smartphone, Tablet & Co. optimiert werden, damit der User Spaß am mobilen Surfen hat?

Mobile vs. Desktop

Die Nutzung von Smartphone und Tablet hat in Deutschland in den vergangenen Jahren kontinuierlich zugenommen. So haben im Jahr 2018 57 Millionen Menschen in der Bundesrepublik ein Smartphone verwendet. Damit einhergehend hat auch die Internetnutzung an mobilen Geräten zugenommen. Mittlerweile gehen weltweit mehr User via Smartphone und Tablet ins Internet als über den stationären PC. Wer seine Screen Time bei iPhone & Co. trackt, wird das eine oder andere Mal mit Erschrecken feststellen, wie oft er oder sie mit seinem Gerät im Internet surft.

Mobiloptimierung: Pflicht statt Kür

Deshalb lohnt es sich für Webmaster und Online-Shop-Betreiber umso mehr, ihre Websites zu optimieren und die mobile Usability zu maximieren – ein Ende der Zunahme von mobilen Internetusern ist nämlich nicht in Sicht.

Die Optimierung von Websites für diese Geräte ist schon lange nicht mehr Kür, sondern Pflicht. Google straft beim Ranking nicht mobil optimierte Inhalte sogar ab. Und seien wir mal ehrlich: Nicht optimierte Inhalte sind nervig, schmälern den Spaß beim mobilen Surfen und führen dazu, dass man die Webseite ganz schnell wieder verlässt.

Umfrage unter Kollegen: Was nervt bei nicht optimierten mobilen Seiten am meisten?

Das können die Kollegen nur bestätigen, wie eine interne Umfrage ergab: Als störend wird empfunden, wenn das Layout nicht angepasst ist und man ewig scrollen muss oder die Bilder, Tabellen und Grafiken nicht richtig dargestellt werden.

Was sonst noch nervt? Seiten, die lange laden, überdimensionierte Werbe-Overlay und riesige Cookie-Warnungen, die die halbe Seite einnehmen.

In einer perfekten, „mobile optimierten Content“-Welt werden die Webinhalte auf mobilen Endgeräten optimal dargestellt. Unter „mobile Optimierung“ versteht man somit die Maßnahmen, die darauf abzielen, dass Content auf Smartphone und Co. ideal angezeigt wird – ohne langes Scrollen, Zoomen und Wegklicken von Werbebannern.

Auf dem Smartphone surft man anders

Wenn man über Smartphone oder Tablet ins Internet geht, gelten andere Voraussetzungen als am Desktop PC. Der User hat keine Maus, sondern navigiert mit dem Finger auf dem Touchscreen – Menschen, die nicht zur Generation Touch gehören, mag das präzise Arbeiten am Smartphone auch mal vor eine Herausforderung stellen.

Darüber hinaus ist das Display viel kleiner als bei einem stationären Computer oder Notebook. Das heißt, man hat weniger Platz für Inhalte und muss sie stärker vertikal ordnen. Was zudem beachtet werden sollte: Die Umgebung. Unterwegs ist die Verbindung langsamer und man ruft Seiten nur für eine kurze Zeit auf während man am Desktop Bildschirm länger arbeitet.

So klappt‘s mit mobil-optimiertem Content

Was muss nun beachtet werden, damit mobile Webseiten gut aussehen? Wir haben fünf Tipps zusammengestellt:

1. Mobiler Nutzungskontext ist zu berücksichtigen

Wer unterwegs online ist, hat andere Ansprüche als ein User am Desktop-PC. Wenn ich in den Supermarkt gehe und im Internet nach den Zutaten für eine Lasagne suche, brauche ich nicht zuerst leckere Lasagne-Bilder. Wer ein Ticket für Bus oder Bahn auf seinem Handy kaufen möchte, will das mit wenigen Klicks erledigen und sich nicht durch eine Vielzahl von Seiten durchklicken.

Die Interaction Design Foundation bringt es auf den Punkt: Don’t Shrink the Screen, Focus on the Tasks. Es geht darum, die Funktionen in den Fokus zu rücken und nicht einfach den Bildschirm zu schrumpfen.

2. Weniger ist mehr: Information Overload vermeiden

Auf einen kleinen Bildschirm passt weniger Inhalt als auf einen großen – das ist klar! Aus diesem Grund macht es Sinn, die Informationen „in Häppchen“ anzuzeigen und dem User die Möglichkeit zu geben, weiteren Content durch einen Klick auf einer anderen Seite abzurufen. Außerdem sind mobile User in der Regel in Eile und haben keine Zeit, alles durchzulesen. Deshalb gilt: Nur die nötigsten Inhalte mobiler Seiten anzeigen.

3. Jede Sekunde zählt: Lange Ladezeiten sind ein No Go

Ist man in Eile, ärgert es umso mehr, wenn eine Seite ewig lädt. Ein großer Teil der User verlässt die Seite, wenn sich nach drei Sekunden nichts aufgebaut hat. Jede zusätzliche Sekunde führt zu weiteren Absprüngen. Wie sich das vermeiden lässt? Indem die mobile Version der Webseite schlanker wird und beispielsweise Bilder optimiert und komprimiert werden.

4. Darstellungsbereich festlegen

Das hat schon jeder einmal erlebt: Die Webseite sieht auf dem Smartphone genauso aus wie auf dem Desktop-Bildschirm – Schrift zu klein, man muss nach rechts, links, oben, unten wischen, um die gesamte Seite betrachten zu können. So etwas passiert nicht, wenn der Darstellungsbereich korrekt konfiguriert und an die Gerätebreite angepasst wird.

5. Auf die Größe kommt es an: Schrift, Buttons, Links

Ein ordentlich konfigurierter Darstellungsbereich bringt allerdings nichts, wenn die Schriftgröße nicht passt. Werden Buchstaben zu klein dargestellt, kann der User den Text nur schwer lesen. Auch ist davon abzuraten, verschiedene Schriftgrößen und -arten auf einer Seite zu verwenden, damit das Layout nicht zu komplex wird.

Neben der Schriftgröße sollten auch die Buttons und Links an die Bedürfnisse der User von mobilen Endgeräten angepasst werden. Die Fingerspitze eines Erwachsenen ist durchschnittlich 1 cm breit – Schaltflächen oder Links dürfen nicht zu klein dargestellt oder zu nah beieinanderliegen sonst hat man sich schnell verklickt und landet nicht dort, wo man eigentlich hinwollte.

Noch ein paar Tipps

Wer nun überprüfen möchte, ob seine Webseite mobile optimiert ist, kann mit dem Mobile-Friendly Test feststellen, ob die Seite die grundlegenden Anforderungen der Mobiloptimierung erfüllt. Google PageSpeed Insights analysiert den Inhalt einer Webseite und gibt Vorschläge, wie die Geschwindigkeit der Seite verbessert werden kann.