Auf einer Firmenwebsite müssen Smartphone-Nutzer Leistungen verstehen, wichtige Informationen finden und gewünschte Aktionen ausführen können. Ein responsives Layout passt die Website an verschiedene Bildschirmgrößen an und ist für viele Unternehmen ein guter Ausgangspunkt.
Legen Sie fest, was Besucher mobil erledigen sollen: anrufen, einen Standort finden, einen Termin buchen oder eine Anfrage senden. Gestalten Sie Navigation, Inhalte, Ladezeit und Formulare passend zu diesen Zielen und testen Sie Änderungen auf echten Mobilgeräten.
Mobile Hauptaufgaben festlegen
Legen Sie zuerst fest, welche Handlung auf jeder wichtigen Seite im Vordergrund steht. Auf einer Leistungsseite kann das eine Anfrage sein, auf einer Kontaktseite ein Anruf oder eine Wegbeschreibung. So können Sie Inhalte und Bedienelemente passend anordnen.
Ein responsives Layout ordnet Texte, Bilder und Bedienelemente passend zur verfügbaren Bildschirmbreite an. Auf Seiten mit normalem Fließtext sollte der Inhalt auf schmalen Displays in einer lesbaren Spalte stehen. Besucher müssen dann überwiegend nach unten scrollen und nicht seitwärts, um Text zu lesen. Tabellen und andere Inhalte, die in zwei Richtungen gelesen werden müssen, sind Ausnahmen.
Google empfiehlt responsive Gestaltung als gut wartbare Lösung. Getrennte Mobil- und Desktopversionen sind ebenfalls möglich, erfordern aber mehr Pflege. Unabhängig von der technischen Umsetzung sollten die zentralen Inhalte und Funktionen auf beiden Geräten verfügbar bleiben.
Navigation auf kleinen Displays
Ein kompaktes Menü spart Platz, darf wichtige Bereiche aber nicht schwer auffindbar machen. Zeigen Sie die wichtigsten Seiten klar an und halten Sie Suche und Kontaktmöglichkeiten leicht erreichbar. Prüfen Sie besonders, wie viele Schritte Besucher vom Einstieg bis zur gewünschten Aktion benötigen.
Bedienelemente müssen sich mit dem Finger zuverlässig treffen lassen. Die WCAG 2.2, die internationalen Richtlinien für barrierefreie Webinhalte, verlangt für anklickbare Bereiche grundsätzlich mindestens 24 × 24 CSS-Pixel oder ausreichend Abstand zu anderen Bereichen. Für wichtige Aktionen wie „Anrufen“ oder „Anfrage senden“ ist eine größere Fläche, etwa 44 × 44 CSS-Pixel, ein nützliches Gestaltungsziel. Diese größere Größe entspricht einem strengeren WCAG-Kriterium und ist nicht die allgemeine Mindestanforderung.
Testen Sie das Menü auch bei vergrößerter Schrift und auf schmalen Displays. Wenn Beschriftungen abgeschnitten werden oder Schaltflächen zu dicht beieinanderliegen, passen Sie Abstände und Anordnung an.
Inhalte lesbar halten
Stellen Sie die Kernaussage einer Seite früh dar. Besucher sollten schnell erkennen, was das Unternehmen anbietet und welcher nächste Schritt möglich ist. Überschriften, kurze Absätze und passende Listen helfen dabei, längere Inhalte auf kleinen Bildschirmen zu erfassen.
Kürzen Sie die mobile Version nicht um wichtige Informationen. Google nutzt bei der Indexierung mobiler Websites die mobile Version als Grundlage. Fehlen dort zentrale Inhalte, stehen sie auch für die Indexierung nicht in derselben Weise zur Verfügung. Ordnen Sie Informationen bei Bedarf neu oder zeigen Sie sie in Bereichen an, die Besucher öffnen können. Solche Bereiche müssen klar beschriftet und bedienbar sein.
Bilder sollten zur tatsächlich angezeigten Größe passen. Beschreibende Alternativtexte, also kurze Bildbeschreibungen, helfen Menschen, die Bilder nicht sehen können, den Inhalt zu verstehen. Bei Formularen sollten sichtbare Beschriftungen erklären, welche Angaben in jedes Feld gehören. Ein bloßer Platzhalter im Eingabefeld ersetzt eine dauerhafte Beschriftung nicht.
Ladezeit gezielt verbessern
Eine langsame oder unruhige Seite erschwert den Zugriff auf Inhalte und Funktionen. Prüfen Sie die Ladezeit mit mehreren Tests und beobachten Sie, wie Besucher die Website tatsächlich nutzen. Die Core Web Vitals messen drei Aspekte der Seitenerfahrung:
| Messwert | Was er misst | Guter Richtwert |
|---|---|---|
| LCP | Wie schnell der wichtigste sichtbare Inhalt erscheint | höchstens 2,5 Sekunden |
| INP | Wie schnell die Seite auf Interaktionen reagiert | höchstens 200 Millisekunden |
| CLS | Wie stark sich Inhalte unerwartet verschieben | höchstens 0,1 |
Diese Richtwerte beziehen sich auf das 75. Perzentil. Das bedeutet: Mindestens drei Viertel der gemessenen Besuche sollen den jeweiligen Wert einhalten. Betrachten Sie Mobil- und Desktopdaten getrennt, denn eine schnelle Desktopverbindung sagt wenig über die Erfahrung auf einem Smartphone aus.
Für die Fehlersuche helfen zwei Arten von Messungen. Labortests prüfen die Seite unter festgelegten Bedingungen und erleichtern die Fehlersuche. Daten aus echten Besuchen zeigen, wie die Website dabei abschneidet. PageSpeed Insights stellt beide Perspektiven bereit.
Beginnen Sie bei der Optimierung mit großen Bildern, die sich komprimieren oder passend dimensionieren lassen. Prüfen Sie außerdem externe Skripte und Widgets, etwa für Werbung oder Buchungen. Reservieren Sie für Bilder und nachladende Inhalte ausreichend Platz, damit der Text beim Laden nicht springt. Ein besserer Messwert ist ein technisches Ziel. Ob dadurch mehr Anfragen oder Umsatz entstehen, lässt sich daraus allein nicht ableiten.
Kontakt und Formulare vereinfachen
Machen Sie die nächste Aktion eindeutig. Die Schaltfläche „Rückruf anfordern“ beschreibt genauer, was nach dem Antippen passiert, als ein allgemeines „Weiter“. Telefonnummern sollten auf Mobilgeräten direkt antippbar sein. Bei einem Dienstleistungsunternehmen gehören außerdem Informationen zum Leistungsumfang und zum Ablauf an eine Stelle, an der Besucher sie vor der Anfrage finden.
Fragen Sie in einem Formular nur Angaben ab, die Sie für den nächsten Schritt benötigen. Klare Beschriftungen, hilfreiche Hinweise und verständliche Fehlermeldungen erleichtern die Eingabe. Zeigen Sie eine Fehlermeldung direkt beim betroffenen Feld an und erklären Sie, wie sich der Fehler beheben lässt.
Welche Zielaktion zählt, hängt vom Geschäftsmodell ab. Ein Onlineshop misst Käufe, ein Beratungsunternehmen vielleicht Terminbuchungen oder qualifizierte Anfragen. Befunde aus Tests mobiler Onlineshops geben Hinweise zu Navigation und Formularen, lassen sich aber nicht ohne Weiteres auf jede Firmenwebsite übertragen. Testen Sie Änderungen deshalb mit den eigenen Besuchern und Zielen.
Mobile Website auf Smartphones testen
Prüfen Sie die Website nach der Überarbeitung mit typischen Aufgaben. Öffnen Sie eine Leistungsseite auf einem Smartphone, suchen Sie die Telefonnummer und senden Sie eine Anfrage ab. Wiederholen Sie den Test auf mehreren Bildschirmgrößen und achten Sie darauf, ob Menüs, Bilder und Formulare ohne seitliches Scrollen funktionieren.
Messen Sie neben Seitenaufrufen auch die Aktionen, die für das Geschäft zählen. Dazu gehören etwa Klicks auf Telefonnummern. Erfassen Sie auch, wie oft Besucher ein Formular starten und absenden und wie oft sie eine Buchung abschließen. Vergleichen Sie diese Werte vor und nach einer Änderung. So sehen Sie, ob Besucher den gewünschten Weg tatsächlich häufiger abschließen.
Gehen Sie bei der Überarbeitung am besten so vor:
- Legen Sie mobile Hauptaufgaben und die wichtigsten Seiten fest.
- Prüfen Sie Navigation, Lesbarkeit und Bedienbarkeit auf kleinen Bildschirmen.
- Erhalten Sie zentrale Inhalte und ordnen Sie sie sinnvoll neu an.
- Untersuchen Sie die Ladezeit mit Labortests und Felddaten.
- Spielen Sie Formulare und Kontaktwege auf echten Geräten durch.
- Bewerten Sie Änderungen anhand der passenden Zielaktionen.
