webzavas.czblogKostenlosen Entwurf ansehen

Ihre Website am Smartphone: klein, aber entscheidend

Eine verkleinerte Desktopansicht reicht nicht. Prüfen Sie, ob Menschen am Smartphone das Angebot lesen, das Menü bedienen und ein Formular abschließen können.

Stellen Sie sich jemanden vor, der vor einem Termin Ihre Nummer sucht oder unterwegs Ihr Angebot liest. Ein großer Bildschirm und eine Maus fehlen ebenso wie Geduld für einen unbrauchbaren Button. Die Person möchte eine konkrete Aufgabe erledigen.

Mobil ändern sich Platz, Bedienung und Nutzungssituation. Die folgenden Prüfungen helfen, aus „Am Handy stimmt etwas nicht“ eine nachvollziehbare Liste von Verbesserungen für Ihren Dienstleister zu machen.

Zeigen Sie das Angebot vor unnötiger Dekoration

Auf einem kleinen Bildschirm ist nicht alles gleichzeitig sichtbar. Vorrang haben Leistung, Zielgruppe und nächster Schritt. Eine große Desktopgrafik kann mobil sämtliche hilfreichen Informationen mehrere Bildschirme nach unten schieben.

Ändern Sie Reihenfolge, Größe und Abstände, statt wesentliche Angaben auszublenden. Wenn Einsatzgebiet oder Leistungsumfang die Entscheidung beeinflussen, brauchen mobile Besucher diese Informationen ebenfalls.

Lesen Sie ohne Zoomen und verlorene Zeilen

Öffnen Sie einen längeren Absatz und lesen Sie ihn gewöhnlich. Kleine Schrift, schwacher Kontrast und ein dichter Textblock können anstrengend werden. Kurze Absätze und klare Zwischenüberschriften erleichtern die Orientierung.

Vergrößern Sie die Schrift im Browser. Überschriften dürfen umbrechen, aber nicht über den Bildschirm ragen oder Bedienelemente verdecken. Lange E-Mail-Adressen und zusammengesetzte Wörter zeigen häufig Probleme, die bei einem kurzen Titel verborgen bleiben.

Geben Sie dem Menü einen klaren Ein- und Ausgang

Ein Vollbildmenü schafft Platz für gut erreichbare Links. Trotzdem braucht es eine deutliche Schließen-Funktion und eine vorhersehbare Rückkehr zur Seite. Ein gewählter Link muss zum richtigen Ziel führen.

Auf niedrigen oder quer gehaltenen Bildschirmen passen möglicherweise nicht alle Einträge gleichzeitig. Der Rest muss durch Scrollen erreichbar sein. Prüfen Sie, ob Bedienelemente an Rändern verschwinden oder sich überlagern.

  • Menü öffnen, letzten Eintrag erreichen und wieder schließen.
  • Einen Link wählen und das tatsächliche Ziel prüfen.
  • Tastatur, Escape und den zurückkehrenden Fokus ausprobieren.
  • Sicherstellen, dass sich die Seite dahinter nicht versehentlich bedienen lässt.

Füllen Sie Formulare mit geöffneter Tastatur aus

Die Bildschirmtastatur zeigt oft Probleme, die eine Desktopvorschau übersieht. Tippen Sie ins letzte Feld, schreiben Sie eine längere Nachricht und versuchen Sie, den Senden-Button zu erreichen. Die Seite muss auch bei aktivem Eingabefeld bedienbar bleiben.

W3C empfiehlt verständliche Beschriftungen, Anweisungen und Fehlerrückmeldungen. Ein Platzhalter im leeren Feld ersetzt keine bleibende Beschriftung während der Eingabe.

Prüfen Sie passende Tastaturtypen für E-Mail und Telefon. Senden Sie fehlerhafte Angaben, korrigieren Sie sie und schließen Sie den Vorgang ab. Die Korrektur eines Feldes sollte andere Eingaben nicht unnötig löschen.

W3C: verständliche und zugängliche Formulare

Beobachten Sie die Seite schon während des Ladens

Große Fotos und nachträglich verschobene Inhalte erschweren selbst eine schöne Seite. Bewegt sich ein Button beim Laden eines Bildes, trifft der Finger möglicherweise ein anderes Element. Testen Sie auch über eine mobile Verbindung.

Core Web Vitals betrachten Laden, Reaktionsfähigkeit und visuelle Stabilität. Sie helfen bei technischen Fragen, ersetzen jedoch keine vollständige Aufgabenprüfung. Ein einzelner Labortest beschreibt nicht die Erfahrung aller tatsächlichen Besucher.

Web.dev: was Core Web Vitals messen

Benutzen Sie Tabellen, Bilder und Kontaktlinks

Eine Preistabelle kann am Monitor übersichtlich und am Smartphone kaum lesbar sein. Einfache Vergleiche kommen manchmal mit weniger Spalten aus; komplexere Daten brauchen eine passende Darstellung. Preis und zugehörige Leistung müssen erkennbar bleiben.

Kontrollieren Sie Bildausschnitte, damit Gesichter oder wichtige Projektdetails nicht verschwinden. Tippen Sie Telefon- und E-Mail-Links an. Kennzeichnen Sie Downloads und prüfen Sie Abstände benachbarter Links. Dass alles auf den Bildschirm passt, reicht allein nicht.

Gehen Sie einen vollständigen Ablauf durch

Wählen Sie eine wichtige Aufgabe, etwa eine Leistungsanfrage. Beginnen Sie auf der Startseite und nehmen Sie den normalen Weg ohne Abkürzung. Eine Hürde kann zwischen Menü und Formular liegen, obwohl beide einzeln richtig aussehen.

  • Auf schmalem Bildschirm und im Querformat wiederholen.
  • Geöffnete Tastatur und einen Formularfehler einbeziehen.
  • Größere Schrift und sichtbaren Tastaturfokus prüfen.
  • Wenn möglich, iPhone und Android-Gerät vergleichen.

Ordnen Sie Korrekturen nach ihrem Kundennutzen

Beheben Sie zuerst blockierte Aufgaben: gescheiterten Versand, unerreichbares Menü oder verdeckte Buttons. Danach folgen Lesbarkeit, überlaufende Inhalte und missverständliche Hinweise. Dekorative Details können anschließend verbessert werden.

Nennen Sie Gerät, Browser, Seite und die Schritte zum Fehler. „Mit geöffneter Tastatur erreiche ich Senden nicht“ hilft mehr als „Mobil kaputt“. Wiederholen Sie denselben Ablauf nach der Korrektur.

Diese Prüfungen in die laufende Pflege aufnehmen

Quellen und weiterführende Inhalte

Zurück zum Blog