Wenn Ihr Design auf einem Mobilgerät angezeigt wird, sollten Sie darauf achten, dass interaktive Elemente wie Schaltflächen oder Links groß genug sind und genügend Platz um sie herum haben, damit sie leicht angetippt werden können, ohne sich versehentlich mit anderen Elementen zu überlappen. Das ist für alle Nutzer von Vorteil, aber besonders hilfreich für Personen mit motorischen Einschränkungen.
Die empfohlene Mindestgröße für Berührungszielbereiche beträgt etwa 48 geräteunabhängige Pixel auf einer Website mit einem korrekt festgelegten mobilen Darstellungsbereich. Beispiel: Wenn Breite und Höhe eines Symbols 24 × 24 Pixel betragen, können Sie es durch einen umgebenden Rahmen auf 48 × 48 Pixel vergrößern. Die Fläche von 48 × 48 Pixeln entspricht etwa 9 mm, was in etwa der Größe des Fingerpads einer Person entspricht.
In der Demo habe ich allen Links Innenabstände hinzugefügt, um sicherzustellen, dass sie der Mindestgröße entsprechen.
Touch-Ziele sollten außerdem einen Abstand von etwa 8 Pixeln haben, sowohl horizontal als auch vertikal, damit der Finger eines Nutzers, der auf ein Touch-Ziel drückt, nicht versehentlich ein anderes Touch-Ziel berührt.
Berührungszielbereiche testen
Wenn Ihr Ziel Text ist und Sie relative Werte wie em oder rem verwendet haben, um die Größe des Texts und des Abstands festzulegen, können Sie mit den DevTools prüfen, ob der berechnete Wert für diesen Bereich groß genug ist.
Im folgenden Beispiel verwende ich em für den Text und die Abstände.
Sehen Sie sich die a des Links an und wechseln Sie in den Chrome DevTools zum Bereich Berechnet. Dort können Sie die verschiedenen Teile des Felds untersuchen und sehen, welche Pixelgröße sie haben.
In den Firefox-Entwicklertools gibt es einen Layoutbereich.
In diesem Bereich sehen Sie die tatsächliche Größe des geprüften Elements.
Verwendung von Medienabfragen zur Erkennung der Verwendung eines Touchscreens
Anstatt einfach die Darstellungsabmessungen zu testen und dann zu vermuten, dass kleine Abmessungen wahrscheinlich Smartphones oder Tablets mit Touchscreen sind, gibt es jetzt robustere Möglichkeiten, Ihr Design an die tatsächlichen Gerätefunktionen anzupassen.
Eine der Medienfunktionen, die wir jetzt mit Medienabfragen testen können, ist, ob die primäre Eingabe des Nutzers ein Touchscreen (pointer) ist und ob eine der derzeit erkannten Eingaben ein Touchscreen ist (any-pointer). Die Funktionen pointer und any-pointer geben fine oder coarse zurück.
Ein feiner Cursor wird angezeigt, wenn jemand eine Maus oder ein Touchpad verwendet, auch wenn diese Maus über Bluetooth mit einem Smartphone verbunden ist.
Ein coarse-Cursor weist auf einen Touchscreen hin. Das kann ein Mobilgerät, aber auch ein Laptop-Bildschirm oder ein großes Tablet sein.
Wenn Sie Ihr CSS in einer Medienabfrage anpassen, um das Touch-Ziel zu vergrößern, können Sie durch das Testen auf einen groben Zeiger die Tippziele für alle Touchscreen-Nutzer vergrößern. So wird der Tippbereich unabhängig davon vergrößert, ob es sich um ein Smartphone oder ein größeres Gerät handelt.
.container a {
padding: .2em;
}
@media (any-pointer: coarse) {
.container a {
padding: .8em;
}
}
Weitere Informationen zu Interaktionsmedienfunktionen wie dem Zeiger finden Sie im Artikel Grundlagen des responsiven Webdesigns.