Responsives Webdesign: Ihre Unternehmenswebsite auf dem Handy prüfen

Responsives Webdesign bedeutet, dass sich Aufbau und Bedienung einer Website an den verfügbaren Platz anpassen. Aus mehreren Spalten kann eine werden, die Navigation verändert ihre Darstellung und Bilder erhalten einen passenden Ausschnitt. Die Seite wird also nicht einfach wie ein Plakat verkleinert. Texte und Funktionen müssen auf dem schmalen Bildschirm weiterhin brauchbar sein.

Ob das gelingt, lässt sich an Aufgaben prüfen, die Ihre Kunden tatsächlich erledigen möchten. Für eine Unternehmenswebsite sind das beispielsweise eine Leistung finden, anrufen, eine Anfrage schreiben und eine Arbeitsprobe ansehen. An diesen vier Wegen erkennen Sie mehr als an einem schönen Bild der mobilen Startseite.

Ein Beispiel: Fenster austauschen lassen

Angenommen, jemand möchte einige ältere Fenster erneuern lassen und öffnet Ihre Website auf dem Handy. Er kennt Ihren Betrieb noch nicht. Zuerst sucht er die passende Leistung, anschließend möchte er einen Ausführungstermin besprechen. Vorher sieht er sich eine Referenz an. Vielleicht entscheidet er sich dann für einen Anruf, vielleicht für eine schriftliche Anfrage.

Diese kleine Geschichte dient als Testauftrag. Die Person, die prüft, bekommt das Ziel, aber keine Anleitung zum Menü. Notieren Sie, wo sie stockt. Wenn der Fensterbau nur hinter einem unverständlichen Sammelbegriff zu finden ist, liegt das Problem in der Navigation und nicht unbedingt in der Bildschirmgröße.

Das Menü muss sich auch wieder schließen lassen

Öffnen Sie die mobile Navigation und wechseln Sie zu einer Unterseite. Prüfen Sie anschließend den Rückweg. Bleibt der Seiteninhalt nach dem Schließen des Menüs normal verschiebbar? Ist der Schließen-Knopf auch bei einer langen Liste erreichbar? Kann eine Leistungsgruppe aufgeklappt werden, ohne versehentlich auf ihre Übersichtsseite zu springen?

Ein ständig sichtbarer Seitenkopf kann die Orientierung erleichtern. Er benötigt aber Platz. Wenn Logo, Menü und Kontaktknopf gemeinsam einen großen Teil des Displays belegen, bleibt für den Inhalt wenig übrig. Lassen Sie deshalb nicht nur den ersten Bildschirm zeigen, sondern auch eine weit nach unten gescrollte Unterseite.

Anrufen und schreiben sind zwei eigene Wege

Tippen Sie die Telefonnummer an und kontrollieren Sie die im Gerät angezeigte Nummer. Für diese Prüfung muss kein tatsächliches Gespräch gestartet werden. Die Beschriftung sollte erkennen lassen, ob ein Telefonanruf oder etwa ein Nachrichtendienst geöffnet wird. Ein Symbol ohne verständlichen Zusammenhang ist dafür unnötig schwer zu beurteilen.

Beim Formular verändert die Bildschirmtastatur den verfügbaren Platz. Schreiben Sie deshalb eine echte Beispielnachricht mit mehreren Sätzen. Wechseln Sie zwischen Feldern, korrigieren Sie einen Fehler und prüfen Sie, ob feststehende Elemente die Eingabe oder den Absende-Knopf verdecken. Für einen abgestimmten Versandtest kennzeichnen Sie die Nachricht als Test und kontrollieren den tatsächlichen Eingang.

Vier Aufgaben für die mobile Prüfung

Ergänzen Sie zu jedem Befund Seitenadresse, Gerät, Browser und die Schritte bis zum Problem. „Das Menü bleibt nach dem Antippen von Leistungen geöffnet und verdeckt den Text“ ist eine umsetzbare Fehlermeldung. „Mobil irgendwie komisch“ lässt dagegen offen, was korrigiert werden soll.

Bilder brauchen auf dem Handy einen anderen Blick

Im Beispiel könnte ein breites Referenzfoto eine ganze Fassade zeigen. Wird es in einen hohen Ausschnitt gezwängt, bleibt womöglich nur die Wand zwischen den Fenstern sichtbar. Der wichtigste Bildinhalt muss daher im tatsächlichen mobilen Zuschnitt geprüft werden. Eine kleinere Datei und ein anderer Ausschnitt lösen unterschiedliche Aufgaben.

Die Einführung zu responsiven Bildern auf web.dev beschreibt, wie passende Bildvarianten für unterschiedliche Darstellungen bereitgestellt werden können. Für den Auftrag ist entscheidend, dass das Motiv erkennbar bleibt und nicht unnötig die große Desktopdatei übertragen wird. Welche Aufnahmen Sie dafür benötigen, behandelt die Planung Ihrer Website-Fotos.

Nicht nur eine Handybreite freigeben

Prüfen Sie schmale und breitere Ansichten sowie vergrößerte Texte. Ein langes Wort wie „Wärmeschutzverglasung“ kann anders umbrechen als die kurze Beispielüberschrift im Entwurf. Auch eine geöffnete Browserleiste verändert die nutzbare Höhe. Eine schmale Vorschau am Computer hilft bei der Arbeit, ersetzt aber nicht alle Prüfungen am echten Gerät.

Das W3C beschreibt mit Reflow, dass Inhalte bei veränderter Darstellung nutzbar bleiben sollen, ohne für gewöhnliche Textinhalte in zwei Richtungen scrollen zu müssen. Für Inhalte wie bestimmte Tabellen bestehen Ausnahmen. Dieser einzelne Prüfpunkt bestätigt noch keine vollständige Barrierefreiheit.

Wenn Sie Ihre Unternehmenswebsite für Handy und Computer gestalten lassen möchten, senden Sie PEMKO die betroffenen Seiten und ein bis zwei solcher Aufgaben. Über die Projektanfrage lässt sich klären, ob einzelne mobile Komponenten oder der gesamte Aufbau überarbeitet werden müssen.