Mobile-First und Touch-Targets — Design-Grundlagen

Würdigung — die Hälfte der Besucher kommt mobil#

Bei den meisten Kanzlei-Websites kommt mehr als die Hälfte der Besucher über das Smartphone — Tendenz steigend, gerade bei jüngeren Mandanten und bei Bewerbern. Trotzdem entsteht das Design fast immer am Desktop. Das Resultat ist eine Seite, die am großen Monitor gut aussieht und sich auf dem Handy unbeholfen anfühlt: Der Anruf-Button ist zu klein, die Navigation klappt schlecht auf, das Kontaktformular zwingt zum Zoomen.

Mobile-First kehrt die Denkrichtung um: Man entwirft zuerst für den kleinen Bildschirm und erweitert dann nach oben für größere. Das klingt nach einem technischen Detail, ist aber eine Haltung — es zwingt dazu, sich auf das Wesentliche zu beschränken (was muss ein Besucher unterwegs sofort tun können: anrufen, Adresse finden, Termin anfragen) und das groß und erreichbar zu machen. Was am Handy funktioniert, funktioniert danach auch am Desktop. Umgekehrt gilt das selten.

Mobile-First — vom kleinen Bildschirm aus denken#

Technisch wird Mobile-First über Breakpoints umgesetzt: Das Basis-Layout gilt für schmale Bildschirme, und mit zunehmender Breite kommen über Media-Queries gezielt Anpassungen dazu — mehrspaltige Layouts, größere Abstände, sichtbare Navigation statt Menü-Button. Der Vorteil dieser Reihenfolge: Das Smartphone bekommt nur das nötige, schlanke Layout, nicht ein für den Desktop gedachtes, das nachträglich zusammengequetscht wird.

Eine Voraussetzung ist die korrekte Viewport-Angabe im Seitenkopf, die dem Smartphone sagt, die Seite in Gerätebreite darzustellen statt eine Desktop-Breite zu simulieren und zu verkleinern. Fehlt sie, hilft das beste responsive Layout nichts — die Seite erscheint als winzige Desktop-Version. Das ist einer der häufigsten, schnell behebbaren Mobile-Mängel.

Touch-Targets — warum 44 Pixel die Grenze sind#

Am Desktop trifft man mit dem Maus-Pixel exakt. Am Handy tippt man mit dem Daumen — einer Fläche von etwa einem Quadratzentimeter. Ein Bedien-Element, das kleiner ist als diese Fläche, wird zum Glücksspiel: Man trifft daneben, erwischt den Nachbar-Link, muss zoomen. Deshalb gibt es eine etablierte Mindestgröße für Tap-Ziele.

Apple nennt in seinen Human Interface Guidelines seit Langem 44 × 44 Punkt als Mindestmaß. Die WCAG-Erfolgskriterien führen dieselbe Größenordnung: 44 × 44 CSS-Pixel als erhöhte Anforderung (Erfolgskriterium 2.5.5). Praktisch heißt das: Jeder Button, jeder Navigations-Eintrag, jedes Formular-Bedienelement sollte mindestens rund 44 Pixel hoch und breit sein — auch wenn das Symbol darin kleiner ist, vergrößert man die anklickbare Fläche per Innenabstand.

Auf fahoch2.de halten wir das durchgängig ein. Der „Nach oben"-Knopf auf den Insight-Artikeln etwa ist bewusst 44 × 44 Pixel groß — nicht, weil das Pfeil-Symbol so viel Platz braucht, sondern damit der Daumen ihn sicher trifft. Solche Maße zieht man einmal als Regel durch, dann stimmen sie überall.

Daumen-Zonen — wo Bedien-Elemente liegen sollten#

Nicht nur die Größe zählt, sondern auch die Lage. Wer ein Smartphone einhändig hält, erreicht mit dem Daumen bequem das untere und mittlere Drittel des Bildschirms; die obere Ecke gegenüber dem Daumen ist die unbequemste Stelle. Diese Daumen-Zonen legen nahe, die wichtigsten Aktionen — anrufen, Termin anfragen — gut erreichbar zu platzieren, nicht in die schwer erreichbare obere Ecke.

Dazu kommt der Abstand: Tap-Ziele brauchen Luft zueinander, sonst trifft man trotz ausreichender Größe das Nachbar-Element. Eine Liste eng gestapelter Links ist am Desktop kein Problem und am Handy eine Frustquelle. Genug vertikaler Abstand zwischen anklickbaren Elementen ist deshalb kein gestalterischer Luxus, sondern Bedienbarkeit.

Mobile-Design und Barrierefreiheit#

Die 44-Pixel-Regel ist kein reines Smartphone-Thema — sie ist zugleich Barrierefreiheit. Menschen mit motorischen Einschränkungen oder Tremor profitieren von großen, gut getrennten Bedien-Elementen genauso wie der Daumen unterwegs. Damit verbindet sich das Mobile-Design direkt mit dem BFSG und den WCAG-Kriterien: Was mobil gut bedienbar ist, ist meist auch barriereärmer. Und schnelle, schlanke Mobile-Seiten zahlen zugleich auf die Core Web Vitals ein — die Google ohnehin am mobilen Index misst. Mit der Bild-Optimierung zusammen ergibt das eine Seite, die unterwegs schnell lädt und sich sicher bedienen lässt.

Für eine vollständige Bewertung der mobilen Nutzbarkeit — Viewport, Tap-Ziele, Performance, Barrierefreiheit — empfehlen wir den Hebel-Audit (890 €, bei Mandanten-Boost-Beauftragung innerhalb von 60 Tagen voll anrechenbar).

Zusammenfassung#

Über die Hälfte der Besucher einer Kanzlei-Website kommt mobil — entworfen werden die Seiten aber meist am Desktop. Mobile-First dreht das um: zuerst für den kleinen Bildschirm denken, dann nach oben erweitern. Drei Grundlagen entscheiden über die Nutzbarkeit: eine korrekte Viewport-Angabe, Tap-Ziele von mindestens rund 44 × 44 Pixeln (Apple HIG, WCAG) und genug Abstand zwischen ihnen, platziert in den gut erreichbaren Daumen-Zonen. Das ist zugleich Barrierefreiheit und zahlt auf die mobil gemessenen Core Web VitalsCore Web Vitals · zum GlossarGoogles drei Schlüssel-Performance-Metriken: LCP, CLS, INP. ein. Der einfachste Test ist der ehrlichste: die eigene Seite einmal nur mit dem Daumen bedienen und schauen, wo man danebentrifft.

Quellen#

• W3C — WCAG 2.5.5 Target Size (44 × 44 CSS-Pixel) — abgerufen 2026-05-29
• W3C — Web Content Accessibility Guidelines (WCAG) — abgerufen 2026-05-29
• Apple — Human Interface Guidelines — abgerufen 2026-05-29
• Barrierefreiheitsstärkungsgesetz (BFSG) — abgerufen 2026-05-29

Disclaimer: Allgemeine fachliche Information zum Zeitpunkt der Veröffentlichung. Die genannten Mindestmaße sind Richtwerte aus Guidelines; die konkrete BFSG-Pflicht einer Kanzlei ist im Einzelfall zu prüfen.