Kurz gesagt: Viele Patientinnen und Patienten suchen deine Praxis am Handy, oft in Eile oder mit Beschwerden. Prüf deine Website deshalb zuerst am Handy und erst dann am Computer. Das Wichtigste: Termin und Telefon sind ohne Scrollen erreichbar, Texte lassen sich ohne Zoomen lesen, Öffnungszeiten stehen als Text da und alles lässt sich bequem antippen.
Worauf es am Handy ankommt
Der erste Bildschirm beantwortet zwei Fragen: Bin ich hier richtig? Und was kann ich als Nächstes tun? Adress- oder Standortblöcke gehören nicht vor den ersten Inhalt.
- Termin und Telefon sofort: Der Weg zum Termin und die Telefonnummer sind ohne Scrollen zu sehen. Die Nummer lässt sich antippen und startet den Anruf: Telefonnummer und Telefonzeiten ändern, Termin-Button und Online-Terminbuchung: Link ändern
- Lesbare Texte: ohne Zoomen lesbar, kurze Absätze, Zwischenüberschriften, keine dünnen Schriften, genug Kontrast: Schriften ändern, Farben ändern
- Öffnungszeiten als Text: als gut lesbare Liste, nie als Bild. Text in einem Bild lässt sich am Handy schlecht vergrößern, nicht vorlesen und von Suchmaschinen kaum auswerten: Öffnungs- und Sprechzeiten ändern (und überall gleich halten)
- Große Tippflächen: Buttons und Links brauchen genug Fläche und Abstand, damit man mit dem Daumen das Richtige trifft. Als Richtwert gelten mindestens 44 × 44 Pixel.
Quelle: W3C, WCAG 2.1, Größe des Ziels - Bilder nicht zu hoch: Am Handy soll zuerst Text zu sehen sein, nicht nur ein Foto. Ein Banner-Video, das am Handy zum schmalen Streifen wird, besser durch ein Foto ersetzen: Banner bearbeiten: Bild, Video, Termin-Box
- Nichts verdeckt das Wichtige: Höchstens ein Hinweisfenster (Störer) gleichzeitig, und es darf Überschrift und Buttons nicht verdecken: Praxisurlaub und Vertretung ankündigen
- Nichts nur per Mauszeiger: Am Handy gibt es kein Darüberfahren mit der Maus. Was erst beim Überfahren erscheint, sieht dort niemand.
- Formulare: Felder groß genug, die passende Tastatur erscheint (Zahlen bei der Telefonnummer), Fehlermeldungen sind verständlich: Kontaktformular ohne Gesundheitsdaten
- Logo lesbar: Der Praxisname im Logo ist auch in der kleinen Kopfzeile zu erkennen: Logo
So prüfst du deine Website am Handy
Am eigenen Handy
Öffne Startseite, eine Behandlungsseite, Team, Standort und Kontakt. Lies je einen Absatz und tipp auf Telefonnummer und Termin-Button.
Am Computer
Im Browser Chrome kannst du eine Handy-Ansicht simulieren. Rechtsklick auf die Seite → Untersuchen → oben links im neuen Bereich auf das Symbol mit Handy und Tablet klicken (oder Strg+Umschalt+M, am Mac cmd+Umschalt+M) → oben als Breite 375 eintragen. Das entspricht einem gängigen Smartphone.
Mit frischen Augen
Bitte jemanden, der deine Website nicht kennt, am Handy einen Termin zu finden und die Telefonnummer anzurufen. Wo er stockt, stocken auch deine Patienten.
- Termin-Button und Telefonnummer sind ohne Scrollen zu sehen.
- Antippen der Telefonnummer startet den Anruf mit der richtigen Nummer.
- Texte lassen sich ohne Zoomen lesen.
- Öffnungszeiten stehen als Text da, nicht als Bild.
- Kein Fenster verdeckt Überschrift oder Buttons.
- Bilder schneiden keine Köpfe ab und schieben den Text nicht weit nach unten.
- Buttons und Links lassen sich mit dem Daumen treffen.
- Das Kontaktformular lässt sich am Handy bequem ausfüllen und absenden.
- Das Logo in der Kopfzeile ist lesbar.
Screenshot folgt: Chrome-Entwicklertools mit eingeschalteter Geräteansicht und Breite 375, das Symbol für die Geräteansicht und das Breitenfeld rot markiert.
Was du selbst beeinflusst
Wie sich die Seite am Handy anordnet, regelt das System automatisch: Kacheln stehen dann untereinander, das Menü klappt zusammen. Du beeinflusst vor allem:
- Texte: kurz gliedern, wichtige Angaben nach oben.
- Reihenfolge der Sektionen: Das Wichtigste zuerst. Sektionen verschiebst du in der Seite über Zum Sortieren ziehen: Seiten erstellen und bearbeiten
- Bildausschnitte: damit Gesichter auch im schmalen Format sichtbar bleiben: Wichtigen Bildausschnitt setzen
- Farben, Schriften und Logo-Größe in den Websitedaten.
In der Vorlage zeigt die Kopfzeile am Handy nur das Logo. Den Weg zum Termin bieten die Buttons im Banner, die Telefonnummer steht erst weiter unten. Achte deshalb darauf, dass der Termin-Button im Banner auf dein echtes Buchungsziel zeigt. Hättest du Telefonnummer oder Termin-Button gern fest in der Kopfzeile: sprich uns an.
Gut zu wissen
Lesbar am Handy heißt auch barrierearm
Gute Kontraste, ausreichende Schriftgröße und Texte statt Bilder helfen Menschen mit Seheinschränkung genauso: Barrierefreiheit: was gilt für Praxen?
Nie nur über Farbe
Ob ihr neue Patienten aufnehmt, steht immer als Text da, nicht nur als farbiger Punkt.
Nach jeder größeren Änderung
an Design, Banner oder Startseite kurz am Handy nachsehen.