Mobile First für Optiker: Warum responsive Websites nicht genügen

Die Situation, in der gesucht wird

Stellen Sie sich die Person vor, die Ihre Website als Nächstes öffnet. Sie sitzt nicht am Schreibtisch. Sie steht in der Fußgängerzone, sitzt in der Bahn oder gerade beim Augenarzt im Wartezimmer. Ihre Brille ist kaputt, das Rezept abgelaufen, oder sie hat eben eine Diagnose bekommen.

Sie hat ein Smartphone in der Hand, wenig Geduld und eine konkrete Frage: Habt ihr heute offen? Wie weit ist das? Kann ich einen Termin bekommen?

Für diese Situation muss eine Optiker-Website gebaut sein. Nicht für den Desktop, auf dem sie später im Angebot vorgeführt wird.

Mobile First ist nicht Responsive Design

Die beiden Begriffe werden oft synonym verwendet. Sie bezeichnen aber Unterschiedliches:

Responsive ist heute jede halbwegs aktuelle Website. Mobile First sind deutlich weniger – weil es eine Entscheidung darüber erzwingt, was wirklich wichtig ist. Auf einem 1440 Pixel breiten Bildschirm passt alles nebeneinander. Auf 390 Pixel muss etwas nach oben und etwas nach unten.

Navigation auf kleinem Schirm

Hinter dem Hamburger-Menü verschwindet auf dem Handy die gesamte Struktur Ihrer Seite. Was dort verschwindet, wird deutlich seltener angesehen. Deshalb gehören die zwei bis drei wichtigsten Aktionen nicht ins Menü, sondern dauerhaft sichtbar in die Kopfleiste:

• Termin vereinbaren – als abgesetzte Schaltfläche
• Anrufen – als Telefonsymbol mit Telefon-Link

Alles Weitere darf ins Menü. Halten Sie es dort kurz: sechs Punkte, Bezeichnungen aus der Sprache Ihrer Kundschaft, keine Untermenüs, die sich beim Antippen wegdrehen.

Touch-Ziele und die Daumenzone

Ein Mauszeiger ist ein Pixel groß, eine Fingerkuppe rund 45. Bedienbare Elemente sollten deshalb mindestens 44 mal 44 Pixel messen und ausreichend Abstand zueinander haben – das ist zugleich eine Anforderung aus WCAG 2.1.

Genauso wichtig ist die Position. Ein Telefon wird mit einer Hand gehalten; bequem erreichbar ist das untere und mittlere Drittel des Bildschirms. Die obere linke Ecke ist der unbequemste Punkt – dort stehen auf vielen Websites die wichtigsten Schaltflächen.

Terminbuchung am Handy

Die Buchungsstrecke ist die Stelle, an der sich mobile Nachlässigkeit am teuersten rächt. Was hier regelmäßig schiefgeht:

• Der Kalender braucht Querformat. Eine Monatsübersicht mit sieben Spalten wird auf 390 Pixel unbedienbar. Besser: eine Liste der nächsten freien Zeiten.
• Falsche Tastatur. Ein E-Mail-Feld muss die E-Mail-Tastatur öffnen, ein Telefonfeld den Ziffernblock. Das ist eine Zeile Code und spart jedem Nutzer zehn Sekunden.
• Automatische Großschreibung im E-Mail-Feld. Führt zuverlässig zu Tippfehlern und fehlgeschlagenen Bestätigungen.
• Die Absende-Schaltfläche unter der Tastatur. Sie muss sichtbar bleiben, wenn die Tastatur aufgeht.
• Fehlermeldungen ganz oben. Wer unten tippt und die Meldung oben steht, sieht sie nicht.

Mehr zu dem, was zwischen Website-Besuch und gebuchtem Termin passiert, steht im Beitrag Wie eine moderne Optiker-Website mehr Terminbuchungen bringt.

Ladezeit im Mobilfunknetz

Websites werden am Schreibtisch gebaut, mit Glasfaser und einem schnellen Rechner. Genutzt werden sie unterwegs, mit schwankendem Netz und einem drei Jahre alten Telefon. Diese Lücke ist der Grund, warum so viele Seiten „bei uns schnell“ sind und in der Realität nicht.

Die typischen Bremsen, in der Reihenfolge ihrer Wirkung:

• Unkomprimierte Bilder. Der mit Abstand größte Posten.
• Externe Schriften. Blockieren das erste Rendern und übertragen nebenbei die IP-Adresse an Dritte.
• Plugin-Stapel. Slider, Cookie-Werkzeuge, Bewertungs-Widgets, Chat – jedes bringt eigenen Code mit.
• Eingebettete Karten und Videos. Laden mitunter mehr Daten als die gesamte restliche Seite.

Ein brauchbarer Maßstab: Auf einem Mittelklasse-Telefon im Mobilfunknetz sollte nach spätestens zwei Sekunden etwas Lesbares auf dem Bildschirm stehen – und der Inhalt danach nicht mehr springen.

Bilder: der größte Hebel

Für einen Optiker sind Bilder unverzichtbar. Fassungen, Verkaufsraum, Team – das lässt sich nicht in Text ersetzen. Gleichzeitig sind sie der größte Posten in der Ladezeit. Beides ist auflösbar:

• Moderne Formate. WebP oder AVIF statt JPEG spart bei gleicher Bildqualität die Hälfte bis zwei Drittel.
• Mehrere Größen ausliefern. Ein Telefon braucht keine 2000 Pixel breite Datei für einen 390 Pixel breiten Platz.
• Feste Maße im Markup. Sonst springt das Layout beim Nachladen – der Punkt, an dem man versehentlich auf das Falsche tippt.
• Verzögertes Laden. Alles unterhalb des Sichtfelds lädt erst, wenn es gebraucht wird.
• Aussagekräftige Alternativtexte. Für Screenreader, für die Bildersuche, und für den Fall, dass ein Bild nicht lädt.

Weglassen ist nicht die Lösung

Ein verbreitetes Missverständnis: Mobil bedeute, Inhalte zu streichen. Das Gegenteil ist richtig. Wer unterwegs sucht, braucht dieselben Informationen – oft dringender als am Schreibtisch.

Die Aufgabe ist nicht Kürzen, sondern Sortieren. Auf dem Handy zählt die Reihenfolge stärker als auf jedem anderen Gerät: Was zuerst kommt, wird gelesen. Was nach dem fünften Bildschirm kommt, praktisch nicht mehr.

Ganz nach oben gehören deshalb:

• Wer Sie sind und wo Sie sind
• Ob gerade geöffnet ist
• Anrufen und Route – mit je einem Tipp
• Termin vereinbaren

Mobil und barrierefrei greifen ineinander

Fast alles, was eine Website mobil besser macht, macht sie auch barrierefreier: ausreichend große Bedienelemente, klare Kontraste, lesbare Schriftgrößen, eine sinnvolle Reihenfolge, beschriftete Formularfelder.

Das ist praktisch, weil beides ohnehin ansteht: Seit dem 28. Juni 2025 verpflichtet das Barrierefreiheitsstärkungsgesetz Websites mit Terminbuchung oder Shop auf WCAG 2.1 Stufe AA. Ein sauber gebauter mobiler Auftritt erfüllt einen erheblichen Teil davon nebenbei.

Ein einfacher Test: Vergrößern Sie die Schrift im Browser auf 200 Prozent. Bleibt alles lesbar und bedienbar, ohne dass Text abgeschnitten wird oder waagerecht gescrollt werden muss?

Mobile-First-Indexierung und Core Web Vitals

Google bewertet ausschließlich die mobile Fassung Ihrer Seite. Inhalte, die nur in der Desktop-Ansicht stehen, existieren für die Suche nicht. Wer Texte mobil ausblendet, um Platz zu sparen, entfernt sie damit faktisch aus dem Index.

Dazu kommen die Core Web Vitals – Messwerte für Ladezeit, Reaktionszeit und Layoutstabilität, die Google auf echten Nutzergeräten erhebt. Sie sind kein Allheilmittel für Rankings, aber sie sind messbar, mobil besonders kritisch und lassen sich gezielt verbessern.

Wie das mit lokaler Sichtbarkeit zusammenspielt, steht im Beitrag SEO für Optiker.

Warum „responsive Vorlage“ nicht reicht

Jeder Baukasten wirbt mit responsiven Vorlagen. Das stimmt auch – die Seite bricht nicht. Was eine Vorlage nicht leisten kann, ist die Entscheidung, was in Ihrem Geschäft zuerst kommt.

Eine Vorlage weiß nicht, dass bei Ihnen die Kontaktlinsenanpassung das wichtigste Thema ist, dass Ihr Einzugsgebiet ländlich ist und die Route deshalb weiter oben stehen sollte als die Fassungsauswahl, oder dass Ihre Terminsoftware eine bestimmte Schnittstelle hat. Diese Entscheidungen sind der Unterschied zwischen „funktioniert auf dem Handy“ und „funktioniert für Ihre Kundschaft“.

Selbsttest in zehn Minuten

Nehmen Sie Ihr eigenes Smartphone, schalten Sie das WLAN aus und gehen Sie diese Punkte durch. Jedes „nein“ ist ein konkreter Auftrag.

1. Steht nach zwei Sekunden etwas Lesbares auf dem Bildschirm?
2. Ist ohne Scrollen erkennbar, was Sie anbieten und wo Sie sind?
3. Können Sie mit einem Tipp anrufen, ohne die Nummer abzuschreiben?
4. Öffnet ein Tipp auf die Adresse die Route?
5. Ist heute erkennbar, ob geöffnet ist – ohne die Öffnungszeiten selbst auszurechnen?
6. Schaffen Sie eine Terminbuchung mit einer Hand, im Gehen, in unter einer Minute?
7. Springt das Layout beim Nachladen der Bilder?
8. Bleibt alles lesbar, wenn Sie die Schrift auf 200 Prozent stellen?

Fazit

Mobile First ist kein Designtrend, sondern die Anerkennung einer Tatsache: Der Erstkontakt mit Ihrem Geschäft findet auf einem kleinen Bildschirm statt, unterwegs, mit wenig Geduld. Eine Website, die dort überzeugt, überzeugt auf dem Desktop ohnehin – umgekehrt gilt das nicht.

Welche weiteren Bausteine eine Optiker-Website braucht, steht im Beitrag zu den wichtigsten Funktionen einer Optiker-Website. Was ein Projekt bei uns umfasst, auf der Seite zu Webdesign und Website-Entwicklung für Augenoptiker.