Kuratierte Linksammlung für Webdesigner und -entwickler.
Tipps für mobiles Webdesign

Website Optimierung für Mobilgeräte – Die Basisregeln

Das mobile Web hat seine ganz eigenen Spielregeln. Es wird auf relativ kleinen Screens betrachtet, bisweilen in anderen Situationen als das klassische Internet und es verabschiedet sich erst ganz langsam von langsamen Datentransfer-Geschwindigkeiten. Als Webdesigner fürs mobile Internet musst Du das berücksichtigen, um erfolgreiche mobile Websites zu kreieren, die – wenn sie einen kommerziellen Charakter haben – auch hohe Conversion-Raten vorweisen können. Wie man das berücksichtigt, ist eine Kunst für sich und vielleicht keine immer ganz einfache. Die Basis dieser Kunst sind jedoch einige Grundregeln. Und die sind durchaus nicht allzu kompliziert. Aber wichtig.

Basisregeln für mobiles Webdesign

Mit den folgenden Basisregeln für mobiles Webdesign bewegst Du dich auf relativ sicheren Bahnen. Du arbeitest innerhalb eines Rahmens, in dem sich benutzerfreundliche und ansprechende Websites fürs mobile Internet erstellen lassen. Aber bitte vergiss nicht, auch den letzten Absatz dieses Artikels zu lesen: den über Tests. Letztlich gilt vielleicht selbst manch eine Basisregel bisweilen nur so lange, bis sie kunstvoll gebrochen wird.

Anzeige

Geschwindigkeiten und Datengrößen

Das mobile Internet ist noch immer relativ langsam. Die LTE Technologie führt es zwar in die Moderne mit Geschwindigkeiten im Bereich von MB/sec. Aber LTE ist noch immer neu und kein Standard, der alle Vorgänger verdrängt hat. Die LTE Vorgänger sind Standards des mobilen Datentransfers wie UMTS. Und hier bewegt man sich, zumindest bei der klassischen UMTS – Variante, nach wie vor in einem Bereich, in dem die Geschwindigkeit des Datentransfers mit Kilobyte pro Sekunde gemessen wird. Für heutige Verhältnisse ist das sehr langsam.

Die Herausforderung des Webdesigners heißt deshalb in diesem Fall: Sorge dafür, dass die mobile Website trotz bisweilen geringer Datentransfer-Geschwindigkeiten im mobilen Internet schnell geladen wird.

Das wiederum bedeutet: Manch ein Bild oder Video, das beim Webdesign fürs klassische Internet völlig in Ordnung wäre, eignet sich für mobile Websites eher nicht.

Die Website muss überschaubar bleiben

Fast immer gilt beim mobilen Internet: Reduziere die Anzahl der Elemente auf der Website im Vergleich zur klassischen Website.

Websites, die für große Bildschirme konzipiert wurden, wirken bisweilen auf kleineren Displays völlig überladen. Der „leere“ Raum zwischen den Elementen der Website verkleinert sich schließlich ebenso wie die Elemente selbst. „Abspecken“ heißt deshalb oft die Devise oder „Weniger ist mehr!“

Ähnlichkeit zwischen klassischer und mobiler Website

Das klingt ein bisschen wie ein Widerspruch zum vorigen Tipp. Dieser scheinbare Widerspruch lässt sich allerdings auflösen. Man sollte einfach keineswegs jedes Element einer vorhandenen klassischen Website für eine mobile Website übernehmen, ohne zu hinterfragen, ob das auch wirklich sinnvoll ist. Andererseits sollten sich die Websites ein- und desselben Anbieters im klassischen und im mobilen Internet auch nicht komplett im Design und in der Funktionalität unterscheiden.

Es ist ja keineswegs so, dass die meisten Menschen NUR mobil oder NUR über PC ins Internet gehen. Über den Tag verteilt, sind sie mit verschiedenen Geräten unterwegs und steuern dabei vielleicht den Webauftritt eines Onlinehändlers an. Und dann gilt:

Internetnutzer möchten dieselben gewohnten Funktionen nutzen können, unabhängig vom Gerät, mit dem sie im Internet surfen.

Zudem sollte das Corporate Design des Händlers dafür sorgen, dass alle Websites des Händlers schnell ihm zugeordnet werden können.

Vergrößere die Buttons und den Text

In der Regel sollten Buttons auf mobilen Websites im Verhältnis zu anderen Elementen der Website größer sein als auf Websites fürs klassische Internet.

Mit dem Mauszeiger lässt sich ein Punkt auf dem Bildschirm viel genauer ansteuern als mit dem Daumen ein Punkt auf dem Display des Smartphones. Beim Text kann gelten: Lieber weniger, dafür aber mit einer etwas größeren Schrift, damit Lesen keine Mühe bereitet.

Webtechnologien prüfen

Falls Du eine Website fürs klassische Internet und optimierte Varianten fürs mobile Internet planst, ist Responsive Webdesign eine gute Möglichkeit, Deine Pläne zu realisieren. Beim responsive Webdesign passt sich ein- und dieselbe Website verschiedenen Displaygrößen an.

Oftmals ist Responsive Webdesign deshalb die effektivste Art, eine Website zu kreieren, die auf allen Arten von Displays ästhetisch und benutzerfreundlich ist.

In jedem Fall sollte man optimierte Versionen der Website für Displays bereitstellen, die breiter als hoch sind, und daneben für andere, die höher als breit sind.

Webtechnologien und -standards, die Du vielleicht im Webdesign für klassisches Internet kennst und schätzt, gehören bei der Optimierung für das mobile Internet ebenfalls auf den Prüfstand. So funktioniert etwa Flash nicht auf allen mobilen Endgeräten, sodass HTML5 oftmals die bessere Wahl für interaktive Elemente Deiner mobilen Website ist.

Tests bringen die besten Antworten

Achtung: Jetzt kommt vielleicht der wichtigste Tipp von allen. Alle bisherigen Tipps in diesem Artikel beruhen auf Erfahrungen. Das bedeutet nicht, dass diese Tipps eine exakte (!) Bauanleitung für Websites sind, die für optimale Geschäftserfolge im mobilen Internet sorgen. Aus der Conversion-Optimierung stammt der Leitsatz: „Glaube nicht, teste!“ Er gilt auch in der mobilen Welt.

Instrumente der Conversion-Optimierung wie A/B-Tests und multivariate Tests sind daher auch bei der Gestaltung von Websites fürs mobile Internet sehr wertvoll.

Mit solchen Instrumenten kann man in Echtzeit testen, mit welchen Design- und/oder Layoutvarianten bei Websites sich Marketingziele im mobilen Internet am ehesten realisieren lassen. Auch sehr erfahrene Marketer und Webdesigner werden durch Ergebnisse von A/B- und multivariaten Tests immer wieder überrascht.

Genau aus diesem Grund soll dieser Artikel mit dem folgenden abschließenden Tipp enden: Glaube nie, bereits alles zu wissen, was es über Mobile Webdesign zu wissen gibt. Rechne immer wieder mit Überraschungen und bleibe ein Lernender.

(Artikelbild von Johan Larsson, CC-Lizenz)

Frischer Input für Designer. Jeder Abonnent erhält das kostenlose Bundle aus 50 Photoshop Device-Mockups und 40 Responsive WordPress-Themes.

1x pro Woche. Kein Spam. Jederzeit kündbar.
Christian Arno
Christian Arno

Christian Arno ist der Gründer von Lingo24, einem Übersetzungsunternehmen, das sich auf Website-Übersetzung spezialisiert. Lingo24 wurde im Jahr 2001 von Christian Arno unmittelbar nach dessen Universitätsabschluss an der britischen Oxford University gegründet.

Mit der Erstellung von Online-Übersetzungen während seines Studiums konnte Christian damals zwar nur ein kleines Taschengeld verdienen, doch er erkannte, dass Online-Übersetzungen ein bedeutendes Geschäftspotenzial in sich tragen und dass die damals tätigen Übersetzungsbüros ihre Dienstleistungen nicht proaktiv im Internet vermarkteten.

Mittlerweile ist das Unternehmen zu ein der größten Übersetzungsbüros Europas angewachsen und bietet heute einen 24-Stunden-Service auf vier Kontinenten in unterschiedlichen Zeitzonen.

Folge Christian und Lingo24 auf Twitter:


8 Antworten auf "Website Optimierung für Mobilgeräte – Die Basisregeln"
  • Avatar

    Inhaltlich abspecken finde ich schlecht, weil ein mobiler Kontext nicht immer „on-the-go“ ist. Mobile geräte werden auch zuhause auf der Couch benutzt, wo man viel Zeit hat und i.d.R. eine gute Anbindung.

    Leider gleitest du inhaltlich auf der Oberfläche, der größte Unterschied geht dir verloren: Es sind in erster Linie TOUCH Geräte, werden also mit dem Finger bedient.

  • Avatar

    Danke erst mal für den guten Artikel.
    Für mich stellt sich allerdings immer die Frage, wie kann ich die Website optimal testen? Denn ich hab z.b.nur ein mobiles Endgerät, aber wie teste ich es für andere am besten? Hättest du da evtl nen Tipp oder Tools, welche du empfehlen kannst?

  • Avatar

    Hi Jonathan.
    Ein Punkt scheint mir noch wichtig zu sein:

    Kommerzielle Webseiten können auf Werbung nicht verzichten. Genau dies jedoch verhindert eine klare Strukturierung und die Beschränkung auf relevanten Content.
    Ich vergleiche immer gerne beliebige Webseiten mit der Webseite von Apple.

    Apple wirbt nur für die eigenen Produkte und kann so der Webseite eine konsistente Struktur geben. Jeder Besucher kann auf das fokussiert werden, was seine Intention beim Aufruf der Seite war.

    Da Apple nun einmal das Tablet erfunden hat, ist es irgendwo selbstverständlich, dass auch alle Funktionalitäten ohne Probleme ausführbar sind, während andere Webseiten z. B. Flash voraussetzen oder Webseitenobjekte unvollständig darstellen oder sie z.B. auf einem Smartphone fehlerhaft verschoben weden, wenn Wischgesten eingesetzt werden.

    Da i.d.R. auf Werbung nicht verzichtet werden kann sehe ich auf absehbare Zeit keine wirklichen Fortschritte in der Darstellung von relevanten Inhalten. Was wohl in absehbarer Zeit gelöst werden wird, sind die vielen technischen Unzulänglichkeiten der mobilen Browser.

    Danke für den Artikel.

  • Avatar

    “Mobile-first” bedeutet, dass man ein responsive Webdesign nicht vom großen Desktop-Layout Schritt für Schritt verkleinert, sondern dass man die mobile Webseiten-Ansicht als Ausgangsbasis nimmt, und das mobile Webseiten-Design dann schrittweise für größere Bildschirmformate optimiert.

  • Avatar

    Wer in erster Linie große Monitore bedienen möchte, arbeitet nach dem Prinzip „Graceful Degradation“. Dabei wird die Site zunächst für die große Ansicht konzipiert, gestaltet und programmiert sowie mit allen visuellen Feinheiten, technischen Spielereien und Skripten ausgestattet. Anschließend optimiert man diese Site für die mobile Ansicht. Die Site wird, so gut es geht, „abgespeckt“.

Schreibe einen Kommentar

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

Diese Website steht zum Verkauf!
Kontakt aufnehmen unter kontakt@pixeltuner.de

Verpasse keine News!

Du erhältst ein kostenloses Bundle aus 50+ WordPress-Themes und PSD Device-Mockups.

1x pro Woche. Jederzeit kündbar.
Anzeige