Mobile Website optimieren für Betriebe, deren Kunden vom Handy kommen

Ein Rohr ist geplatzt, der Kunde steht im Keller und sucht mit einer Hand nach einem Betrieb, die andere hält einen Eimer. Er tippt eine Suche ein, öffnet das erste brauchbare Ergebnis und will eines wissen: Kommt jemand, und wie erreiche ich ihn? Er liest keine Firmengeschichte und scrollt keine drei Bildschirme. Er sucht den Anruf-Knopf.

Dieses Bild ist der Ausgangspunkt dieser Studie, und es ist ein Szenario, kein Bericht über ein bestimmtes Projekt. Es steht für Betriebe, deren Anfragen überwiegend vom Smartphone kommen: Notdienst, Reparatur, Terminwünsche aus der Mittagspause, Anfragen von der Baustelle des Kunden. Bei ihnen ist das Handy nicht der kleine Bruder des Desktops, sondern der Normalfall.

Viele Websites sind trotzdem am großen Bildschirm entstanden. Die Entwürfe wurden am Monitor abgenommen, am Handy wurde „kurz geprüft, ob es passt“. Das Ergebnis passt im Sinne von „nichts läuft über den Rand“, ist aber nicht für die Situation gebaut, in der es gebraucht wird.

Wer Betriebe dieser Art berät, hört denselben Satz in Varianten: Auf meinem Rechner sieht alles gut aus. Das stimmt, und es ist der Kern des Problems. Der Inhaber sitzt beim Prüfen im Büro, mit gutem Netz und zwei Händen. Seine Kunden sitzen es selten. Der Perspektivwechsel ist die erste Aufgabe, noch bevor irgendetwas gestaltet wird.

Die Fehlerbilder sind selten spektakulär, sie sind alltäglich. Die Telefonnummer steht als Text im Kopfbereich und lässt sich nicht antippen. Die Navigation hat Schaltflächen, die man erst nach dem zweiten Versuch trifft. Das Kontaktformular verlangt zwölf Felder, darunter zwei, die niemand mobil gern ausfüllt. Beim Antippen eines Feldes schiebt die Bildschirmtastatur den Absenden-Knopf aus dem Sichtfeld.

Hinzu kommt die Technik im Hintergrund. Ein Hero-Bild von mehreren Megabyte, drei Schriftschnitte, ein eingebettetes Video und ein Chat-Widget laden auch dann, wenn der Empfang schwach ist. Wer in einem Treppenhaus oder auf dem Land sucht, wartet. Mobilfunk ist kein konstanter Wert, sondern schwankt je nach Ort und Auslastung.

Das Tückische: Der Betrieb sieht den Verlust nicht. Wer abspringt, hinterlässt keine Nachricht. Die Anfragen, die ankommen, stammen von denen, die durchgehalten haben, und das erzeugt den falschen Eindruck, es laufe ordentlich. Ob und wie viel verloren geht, lässt sich nur aus dem Verhalten ablesen, nicht aus dem Postfach.

Bevor wir etwas gestalten, klären wir drei Dinge. Erstens: Welche Situationen führen auf die Seite? Notdienst, Terminwunsch, Preisvergleich und Recherche am Abend verlangen unterschiedliche Wege. Zweitens: Welchen Kontaktweg bevorzugt der Betrieb tatsächlich, denn ein Anruf-Button hilft nur, wenn jemand abhebt. Drittens: Was zeigt die Messung, etwa in der Search Console und in der Webanalyse, über den Anteil mobiler Zugriffe?

Die Daumenzone ist eine Faustregel zur Ergonomie. Bei Einhandbedienung erreicht der Daumen den unteren und mittleren Bildschirmbereich bequem, die obere Ecke gegenüber der Haltehand kaum. Das ist kein Naturgesetz, denn Menschen halten Telefone unterschiedlich, und Geräte werden größer. Als Gestaltungsprinzip taugt sie dennoch: Wichtige, häufige Handlungen gehören in den unteren Bereich, seltene in den oberen.

Daraus folgt eine Reihenfolge der Informationen. Am Handy steht über dem Falz, was den Besucher entscheidet, bleibt oder geht: Wer sind Sie, wo arbeiten Sie, wann sind Sie erreichbar, wie komme ich zu Ihnen. Alles Weitere folgt weiter unten, in der Reihenfolge, in der Zweifel entstehen. Ein Besucher, der nicht anruft, will meist erst eine Frage geklärt haben.

Dabei hilft ein einfacher Gedanke: Jede Seite hat eine Hauptaufgabe. Die Startseite eines Notdienstes soll Vertrauen herstellen und zum Anruf führen, die Leistungsseite für eine Wartung soll Fragen beantworten und einen Termin ermöglichen. Wenn eine Seite beides gleichzeitig versucht, verliert sie am kleinen Bildschirm, wo für Nebenwege schlicht kein Platz ist. Wir benennen die Hauptaufgabe vor dem ersten Entwurf.

Die gängige Lösung heißt responsives Design: Ein Raster, das sich verkleinert, Spalten, die sich stapeln. Das ist notwendig, aber nicht ausreichend. Wer nur stapelt, behält die Prioritäten des Desktops bei, nur untereinander. Aus einem breiten Seitenkopf mit Logo, Menü und Telefonnummer wird ein hoher Block, der den ersten Bildschirm füllt und das Wichtigste nach unten schiebt.

Mobile-first dreht die Arbeitsrichtung. Zuerst entsteht die Handy-Fassung mit dem, was dort zählt, dann erweitern wir für größere Bildschirme. Das zwingt zu Entscheidungen: Was ist wirklich wichtig, was kann wegfallen, was gehört ans Ende? Der Desktop profitiert davon, weil er kein überladenes Original ist, aus dem man mühsam streicht.

Eine Alternative wären eigene mobile Seiten oder eine separate App. Beides lehnen wir für kleine Betriebe ab. Zwei Fassungen doppeln die Pflege, und eine App würde eine Installation verlangen, wo jemand in der Not einfach tippt. Die dritte Option, eine Progressive Web App, lohnt für Wiederkehrer, selten für einmalige Anfragen. Für unser Szenario bleibt eine schlanke, schnelle Website der passendste Weg.

Ein Wort zu automatischen Mobil-Plugins, die eine Seite „handyfreundlich umbauen“. Sie behandeln Symptome, etwa durch zusätzliche Skripte, und lassen die Prioritäten unangetastet. Gelegentlich sind sie eine Übergangslösung, aber sie ersetzen nicht die Frage, was am kleinen Bildschirm zuerst stehen soll. Wo ein Baukasten oder CMS Vorlagen vorgibt, prüfen wir, wie weit sie sich anpassen lassen, bevor wir etwas zusagen.

Auch die Zahl der Mittel spricht dafür, sie klein zu halten. Je weniger Skripte und Widgets, desto weniger kann auf einem Gerät aus dem unteren Preissegment haken. Wir ersetzen deshalb Funktionen, wo es geht, durch Standardelemente des Browsers: Links statt Skripte, Formularfelder statt Eigenbau.

Der Kern der Konzeption ist ein Kontaktweg, der ohne Nachdenken funktioniert. Die Telefonnummer wird zum Link, der beim Antippen den Wählvorgang öffnet. Daneben kann ein WhatsApp-Button stehen, wenn der Betrieb Nachrichten dort tatsächlich beantwortet. Wer ihn anbietet, muss ihn auch betreuen, sonst weckt er eine Erwartung, die niemand erfüllt. Dazu gehört, Zeiten klar zu benennen.

Die Größe der Tap-Ziele ist ein häufig unterschätzter Hebel. Als Richtwert gelten rund 44 mal 44 Pixel, Apples Gestaltungsrichtlinien nennen 44 Punkte, Googles Material Design 48. Die Barrierefreiheitsrichtlinien WCAG 2.2 verlangen auf der Stufe AA mindestens 24 Pixel, mit Abstand zu Nachbarn. Wir planen für die größeren Werte, weil Daumen dicker sind als Mauszeiger und Besucher unterwegs oft mit einer Hand tippen.

Die sticky Kontaktleiste am unteren Rand hält den Anruf immer erreichbar. Sie hat Tücken, die wir vorab ausräumen: Sie darf Inhalt und Fußzeile nicht verdecken, deshalb bekommt die Seite unten einen entsprechenden Innenabstand. Sie muss sich vor die Bildschirmtastatur ordnen oder ausblenden, wenn ein Formularfeld aktiv ist. Und sie darf nicht höher werden als nötig, denn auf kleinen Geräten bleibt sonst kaum Lesefläche.

Beim Formular gilt: Jedes Feld kostet. Für einen Terminwunsch genügen oft Name, Telefonnummer oder E-Mail-Adresse, eine kurze Beschreibung und eine Zustimmung zur Datenverarbeitung. Alles Weitere lässt sich im Rückruf klären. Wo Zusatzangaben nützen, etwa Postleitzahl für das Einsatzgebiet, stehen sie als optionale Felder, nicht als Pflicht.

Technisch ist vieles einfacher, als es klingt, wenn man Standardelemente nutzt. Ein Anruf ist ein Link mit tel: und der Nummer im internationalen Format. Eine WhatsApp-Nachricht läuft über einen wa.me-Link mit optionalem Vorschlagstext. Beide funktionieren ohne Skript, ohne Plugin und ohne Ladezeit. Auf dem Desktop, wo kein Telefon zur Hand ist, kann derselbe Link als Textnummer mit Kopierhilfe erscheinen.

Im Formular steuern wenige Attribute den Komfort. Der Feldtyp tel öffnet die Zifferntastatur, email die Tastatur mit At-Zeichen, autocomplete lässt das Gerät Name und Adresse vorschlagen. Die Schriftgröße in Eingabefeldern sollte mindestens 16 Pixel betragen, sonst zoomt Safari auf dem iPhone beim Antippen hinein und zerstört das Layout. Fehlermeldungen erscheinen am Feld, nicht gesammelt oben, wo sie außer Sicht sind.

Für die sticky Leiste nutzen wir position: fixed am unteren Rand, den Sicherheitsabstand env(safe-area-inset-bottom) für Geräte mit Gestenleiste und ein entsprechendes padding-bottom am Seitenende. Höhen geben wir mit dvh statt vh an, weil auf mobilen Browsern die Adressleiste ein- und ausfährt und vh dadurch Inhalte hinter die Leiste schiebt. Anker-Sprünge erhalten scroll-margin, damit Überschriften nicht unter der Leiste landen.

Bei der Ladezeit zielen wir auf die Schwellenwerte der Core Web Vitals: LCP bis 2,5 Sekunden, INP bis 200 Millisekunden, CLS bis 0,1. Das größte sichtbare Element, meist das Hauptbild, laden wir früh und in angemessener Größe, mit srcset für unterschiedliche Breiten und modernen Formaten wie WebP oder AVIF. Bilder unterhalb des ersten Bildschirms laden verzögert, das Hauptbild nicht. Schriften beschränken wir auf das Nötige und liefern sie selbst aus.

Sonderfälle zeigen sich erst auf echten Geräten. Der häufigste: Das Formular ist am Desktop sauber, am Handy schiebt die Tastatur den Absenden-Knopf aus dem Bild, und der Besucher sucht danach, bis er aufgibt. Abhilfe schaffen ein Seitenaufbau, der beim Fokussieren eines Feldes das aktive Feld in den sichtbaren Bereich scrollt, und eine sticky Leiste, die sich während der Eingabe ausblendet.

Zweitens der schwache Empfang. Wenn die Seite beim Versenden abbricht, geht der Text verloren, den jemand gerade mühsam getippt hat. Wir halten deshalb die Eingaben im Formular vor, bis das Absenden bestätigt ist, und melden verständlich, wenn der Versand scheitert. Der Hinweis „Sie können uns auch direkt anrufen“ gehört neben die Fehlermeldung, nicht in den Fußbereich.

Drittens Cookie-Hinweise und Pop-ups. Ein Banner, das den halben Bildschirm bedeckt, verdeckt auch den Anruf-Button. Wir gestalten die Einwilligungsabfrage schlank und lassen sie so erscheinen, dass die Kontaktwege erreichbar bleiben, soweit es die gewählte Lösung zulässt. Eine rechtliche Bewertung bleibt Sache der Datenschutzprüfung, ein Hinweis auf diese Spannung gehört aber ins Konzept.

Viertens das Zusammenspiel mit der lokalen Suche. Wer aus dem Google-Unternehmensprofil auf die Website kommt, hat oft schon Öffnungszeiten und Nummer gesehen. Die Seite sollte diese Angaben konsistent führen und den Weg zur Anfahrt oder zum Anruf nicht verlängern. Widersprüchliche Zeiten zwischen Profil und Website kosten Vertrauen und Anrufe zu ungünstiger Zeit.

Und schließlich die Vielfalt der Geräte. Ein älteres Android-Gerät mit kleinem Speicher, ein iPhone mit großer Schrift in den Systemeinstellungen, ein Gerät im Dunkelmodus: Jedes davon kann das Layout anders belasten. Wir testen deshalb mit vergrößerter Systemschrift und mit gedrosselter Verbindung, nicht nur mit dem neuesten Gerät im WLAN.

Ein verbessertes mobiles Erlebnis lässt sich nicht pauschal beziffern, und wir nennen deshalb keine Prozentzahlen. Realistisch ist die Erwartung, dass weniger Besucher an Hürden scheitern: Mehr Antippen des Anruf-Buttons, mehr abgeschlossene Formulare, weniger Abbrüche bei Eingabefeldern. Wie groß der Effekt ausfällt, hängt vom Ausgangszustand, vom Angebot und von der Nachfrage ab.

Gemessen wird mit Ereignissen. Ein Klick auf den tel:-Link, auf den WhatsApp-Button und auf das Absenden des Formulars werden als Ziele erfasst, getrennt nach Gerätetyp. Wer eine Webanalyse einsetzt, sollte vorher klären, ob dafür eine Einwilligung nötig ist, und datensparsame Lösungen prüfen. Ergänzend zeigt die Search Console im Bericht zur Nutzererfahrung, ob die Seiten die Schwellenwerte der Core Web Vitals erreichen.

Ein Anruf-Klick ist nicht dasselbe wie ein Anruf. Wer den Button tippt und auflegt, hat ihn gedrückt, aber nichts bewirkt. Deshalb lohnt der Abgleich mit dem Betrieb: Wie viele Anrufe kommen tatsächlich an, wie viele werden verpasst, und zu welchen Zeiten? Manchmal liegt der größte Hebel nicht auf der Website, sondern darin, dass abends niemand abhebt.

Planen Sie für die Auswertung einige Wochen ein, bei saisonalen Gewerken auch den Vergleich mit dem Vorjahr. Einzelne Tage sagen wenig, weil Wetter, Ferien und Aktionen das Aufkommen verschieben. Was sich nicht versprechen lässt: eine bestimmte Zahl von Anfragen oder eine bessere Position in der Suche. Die Verbesserung der Bedienbarkeit schafft Voraussetzungen, die Nachfrage selbst steuert sie nicht.

Erstens: Testen Sie auf echten Geräten, nicht nur im Browser-Emulator. Die Geräteansicht in den Entwicklerwerkzeugen zeigt Größen, aber weder die Haptik der Tap-Ziele noch das Verhalten der Tastatur, noch die Gestenleiste. Zwei bis drei reale Geräte mit unterschiedlichem Alter und Betriebssystem decken den Großteil der Fehler auf. Dazu gehört ein Test unterwegs, mit Mobilfunk statt WLAN.

Zweitens: Drosseln Sie die Verbindung beim Testen. Lighthouse und PageSpeed Insights simulieren ein langsames Mobilfunknetz und ein schwächeres Gerät. Die Laborwerte sind nur ein Anhaltspunkt, die Felddaten im Bericht der Search Console zeigen die Wirklichkeit. Weichen beide stark ab, lohnt der Blick auf Drittanbieter-Skripte, die im Labor nicht laden, aber bei echten Besuchern Zeit kosten.

Drittens: Weniger Elemente, dafür größere. Ein Menü mit vier klaren Einträgen schlägt eines mit neun. Ein Button mit der Beschriftung „Jetzt anrufen“ schlägt ein Symbol ohne Text. Kontraste sollten auch bei Sonnenlicht lesbar sein, weil ein Handy im Freien oft unter schlechten Bedingungen benutzt wird. Diese Entscheidungen sind kaum teuer, aber sie müssen getroffen werden.

Viertens: Pflegen Sie die Seite mit Blick auf das Handy. Neue Bilder, die ein Mitarbeiter hochlädt, sollten automatisch auf passende Größe gebracht werden, sonst wächst die Ladezeit mit jeder Aktualisierung. Das gehört in den Redaktionsablauf, nicht nur in die Erstellung. Eine einfache Checkliste nach jeder größeren Änderung genügt.

Wenn Ihre Kunden vom Handy kommen, ist die mobile Website Ihr Auftritt, nicht ein Zusatz. Das heißt nicht, dass sie aufwendig sein muss. Ein klarer erster Bildschirm, ein Anruf-Button in Daumenreichweite, ausreichend große Tap-Ziele, ein kurzes Formular und eine schlanke Auslieferung leisten mehr als eine Fülle an Animationen und Widgets, die am Gerät hängen bleiben.

Die Verbesserungen sind messbar, aber nicht zusagbar. Sie beseitigen Hürden auf dem Weg zur Anfrage, sie erzeugen keine Nachfrage. Wer das weiß, kann nüchtern planen: erst die Kontaktwege, dann die Geschwindigkeit, dann den Feinschliff. Und wer den Betrieb im Blick behält, erkennt, dass auch die beste Seite nichts nützt, wenn niemand ans Telefon geht.

Zur Einordnung des Aufwands: Bei einer kleinen Website mit wenigen Seiten ist eine Überarbeitung nach diesem Muster in überschaubarer Zeit machbar, weil es um Prioritäten und Kontaktwege geht, nicht um neue Inhalte. Größer wird es bei vielen Vorlagen, eigener Software oder Anbindungen an Terminsysteme. Den Rahmen nennen wir nach einer ersten Durchsicht, nicht vorher.

Der nächste Schritt ist klein. Nehmen Sie Ihr Handy, gehen Sie in einen Raum mit schwachem Empfang und versuchen Sie, Ihren eigenen Betrieb zu kontaktieren. Zählen Sie, wie viele Tipps und Sekunden es dauert, bis das Telefon klingelt. Wenn das zäh ist, lohnt ein Blick auf die Seite. Wir schauen uns das gern gemeinsam an und sagen ehrlich, was sich lohnt.