Responsive Design: erst fürs Handy, dann für den Rechner

Die meisten Menschen halten das Handy mit einer Hand und tippen mit dem Daumen. Der Daumen erreicht bequem die untere Hälfte und die Seite, auf der die Hand liegt; die obere Ecke gegenüber ist schwer erreichbar. Das hat Folgen für Gestaltung.

• Wichtige Aktionen unten oder in der Mitte. Eine feste Leiste am unteren Rand mit „Anrufen“ und „Anfragen“ ist leichter zu erreichen als ein Knopf oben rechts.
• Tippflächen groß genug. Als Richtgröße gelten etwa 44 mal 44 Pixel; die WCAG 2.2 verlangt als Mindestmaß 24 mal 24 Pixel mit Abständen. Je größer die Fläche, desto weniger Fehltipps.
• Abstand zwischen Links. Zwei Links dicht untereinander, ohne Abstand, führen zu falschen Klicks. Eine Zeile Luft zwischen Einträgen in Listen und Menüs genügt oft.
• Keine Hover-Effekte als einziger Weg. Auf dem Handy gibt es kein Darüberfahren. Untermenüs, die nur beim Überfahren aufklappen, sind dort unbedienbar.
• Gesten nicht erzwingen. Wischen, Zoomen und Ziehen sind für manche Menschen schwierig. Jede Funktion braucht eine Alternative mit einfachem Antippen.
• Tastatur passend zur Eingabe. Für Telefonnummern erscheint das Zahlenfeld, für Mailadressen die Tastatur mit At-Zeichen. Das spart Eingabefehler.

Diese Regeln gelten auch für Menschen am Rechner mit Touchscreen und für Besucher mit motorischen Einschränkungen. Wer sie umsetzt, verbessert die Seite für alle.

Auf dem Handy steht alles untereinander. Deshalb muss eine Rangfolge her. Gehen Sie für jede Seite diese Fragen durch:

1. Was braucht jemand, der nur 20 Sekunden hat? Das steht oben: Aussage, Hauptaktion, Kontakt.
2. Was braucht jemand, der entscheiden will? Das kommt danach: Nutzen, Ablauf, Belege, Preise oder Preisfaktoren.
3. Was braucht jemand, der alles wissen will? Das steht weiter unten oder in aufklappbaren Bereichen: Details, technische Angaben, Fragen.
4. Was ist Zierde? Alles, was weder hilft noch belegt, verlässt die mobile Fassung. Dekorative Bilder und lange Einleitungstexte kosten Platz und Zeit.

Aufklappbare Bereiche (Akkordeons) sind ein guter Weg, Tiefe zu bieten, ohne die Seite zu überladen. Sie funktionieren am besten, wenn die Überschrift verrät, was darunter steht, und wenn die wichtigsten Inhalte nicht dahinter versteckt werden. Wer Inhalte nur in zugeklappten Bereichen versteckt, riskiert, dass sie weder gesehen noch gelesen werden.

Ein kleines Café (frei erfunden) hat eine Website mit hübschen Fotos, einer langen Geschichte der Gründer und einer Speisekarte als PDF. Wer am Handy nach Öffnungszeiten sucht, sieht ein Vollbild-Foto, scrollt an drei Absätzen Geschichte vorbei und findet die Zeiten im PDF der Speisekarte. Der Anruf geht an dieser Stelle verloren.

Mobiler Neuentwurf

• Oben: Name, ein Satz zur Lage („Kaffeerösterei und Frühstück, Innenstadt“), darunter die heutigen Öffnungszeiten, automatisch nach Wochentag hervorgehoben.
• Direkt darunter zwei Schaltflächen: „Route öffnen“ (Link zur Karten-App des Geräts) und „Anrufen“.
• Die Speisekarte als Text mit Zwischenüberschriften (Frühstück, Kaffee, Kuchen), nicht als PDF. Preise sind durchsuchbar und lesbar ohne Zoomen.
• Die Geschichte der Gründer bleibt, rückt aber an das Ende der Startseite.
• Fotos in passender Größe, das erste als Blickfang, die übrigen nachgeladen.

Der Aufbau ist am Rechner nicht schlechter: Dort stehen Öffnungszeiten und Karte nebeneinander, die Speisekarte in zwei Spalten. Der Neuentwurf zeigt, wie Mobile First auch die Rechner-Fassung verbessert, weil die Prioritäten geklärt sind.

Formulare

Setzen Sie auf eine Spalte, volle Breite und sichtbare Beschriftungen. Nutzen Sie die passenden Feldtypen, damit das Handy die richtige Tastatur zeigt: Zahlenblock für Telefon, Mailtastatur für Adressen, Datumsauswahl für Termine. Automatisches Ausfüllen des Browsers für Name und Adresse spart Eingaben und senkt Fehler, solange die Felder richtig ausgezeichnet sind.

Tabellen

Breite Tabellen passen nicht auf ein Handy. Drei Wege helfen: Die Tabelle wird horizontal scrollbar gemacht (mit sichtbarem Hinweis, dass es mehr gibt), die Zeilen werden zu Karten umgebaut (jede Zeile ein Block mit Beschriftungen) oder die Tabelle wird auf die wichtigsten Spalten reduziert. Welcher Weg passt, hängt davon ab, ob Besucher Zeilen vergleichen oder einzelne Einträge nachschlagen wollen.

Karten und Anfahrt

Eine eingebettete Karte ist am Handy oft mehr Hindernis als Hilfe, weil Wischen die Karte statt die Seite bewegt. Besser sind eine klare Adresse als Text, ein Link „Route öffnen“, der die Karten-App des Geräts startet, und gegebenenfalls ein statisches Bild der Umgebung.

Dokumente

PDF-Dateien sind am Handy mühsam: Sie öffnen sich in einem eigenen Betrachter, lassen sich schwer lesen und sind für Suchmaschinen schlechter nutzbar. Wichtige Inhalte wie Preise, Speisekarten oder Leistungsbeschreibungen gehören als Text auf die Seite, das PDF kann zusätzlich zum Herunterladen bereitliegen.

Vor dem Livegang einer Seite sollte jemand systematisch durch die wichtigsten Kombinationen aus Gerät, Browser und Ausrichtung gehen. Es müssen nicht hundert Geräte sein; eine überlegte Auswahl deckt den größten Teil der Probleme auf. Die Tabelle zeigt ein Beispiel für eine Prüfliste, die Sie an Ihre Besucherzahlen anpassen.

Wählen Sie mindestens einen Browser auf Apple-Geräten und einen auf Android-Geräten, dazu Chrome oder Edge und Firefox am Rechner. Die Browser unterscheiden sich bei Formularen, Videos und Schriftdarstellung in Kleinigkeiten, die in Summe ärgern können. Tragen Sie Funde mit Gerät, Browser-Version und Screenshot in eine Liste ein, damit sie nachvollziehbar behoben werden.

Wer wissen will, ob die mobile Seite ihre Aufgabe erfüllt, sollte nicht nur Seitenaufrufe zählen, sondern Handlungen. Bei vielen lokalen Unternehmen ist der Anruf die wichtigste mobile Handlung. Sie lässt sich auf einfache Weise festhalten: Ein Telefon-Link kann ein Ereignis auslösen, das in einer datenschutzfreundlichen Statistik als „Anruf angetippt“ erscheint. Ähnliches gilt für „Route öffnen“ und für das Absenden des Formulars.

Vergleichen Sie danach die Wege von Handy und Rechner. Zeigt sich, dass am Handy viele die Kontaktseite erreichen, aber kaum jemand absendet, liegt das Problem im Formular. Kommen mobil auffällig wenige zur Kontaktseite, ist die Menüführung zu prüfen. Das Zusammenspiel mit Auswertung und Datenschutz ist unter Datenschutz auf Websites beschrieben.

Wichtig: Messen Sie über mehrere Wochen und vergleichen Sie gleiche Zeiträume. Gerade bei kleinen Seiten bewegen sich Zahlen in einem Bereich, in dem Zufall eine große Rolle spielt. Aus einer Handvoll Besuchen Schlüsse zu ziehen, führt in die Irre.