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 hat, damit sie leicht aufgerufen werden können, ohne versehentlich andere Elemente zu überlagern. Davon profitieren alle Nutzenden, ist aber besonders für Personen mit motorischen Beeinträchtigungen hilfreich.
Die empfohlene Mindestgröße für den Berührungszielbereich beträgt etwa 48 geräteunabhängige Pixel auf einer Website mit einem korrekt festgelegten mobilen Darstellungsbereich. Ein Symbol darf beispielsweise nur eine Breite und Höhe von 24 Pixel haben, Sie können aber einen zusätzlichen Abstand verwenden, um die Größe des Tippziels auf bis zu 48 Pixel zu erhöhen. Die Fläche von 48 x 48 Pixeln entspricht etwa 9 mm, was etwa der Größe der Fingerspitzen einer Person entspricht.
In der Demo habe ich alle Links mit einem Abstand versehen, um sicherzustellen, dass sie der Mindestgröße entsprechen.
Berührungszielbereiche sollten außerdem horizontal und vertikal einen Abstand von etwa 8 Pixeln haben, damit der Finger eines Nutzers, der auf ein Tippziel drückt, nicht versehentlich ein anderes Tippziel berührt.
Berührungszielbereiche testen
Wenn Ihr Ziel Text ist und Sie relative Werte wie em oder rem für die Größe des Texts und des Abstands verwendet haben, können Sie mit den Entwicklertools prüfen, ob der berechnete Wert dieses Bereichs groß genug ist.
Im folgenden Beispiel verwende ich em für meinen Text und die Abstände.
Sehen Sie sich das a des Links an und wechseln Sie in den Chrome-Entwicklertools zum Computed-Bereich. Hier können Sie die verschiedenen Teile des Feldes überprüfen und sehen, in welcher Pixelgröße sie aufgelöst werden.
In den Firefox-Entwicklertools gibt es einen Layoutbereich.
In diesem Panel wird die tatsächliche Größe des geprüften Elements angezeigt.
Verwendung von Medienabfragen zur Erkennung der Touchscreennutzung
Anstatt einfach nur die Dimensionen des Darstellungsbereichs zu testen und dann zu erraten, dass die kleinen Abmessungen wahrscheinlich Smartphones oder Tablets sind, die wiederum einen Touchscreen verwenden, gibt es jetzt robustere Möglichkeiten, Ihr Design basierend auf den tatsächlichen Gerätefunktionen anzupassen.
Eine der Medienfunktionen, die wir jetzt bei 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 (any-pointer) ist. Die Funktionen pointer und any-pointer geben fine oder coarse zurück.
Ein feiner Zeiger ist eine Person, die eine Maus oder ein Touchpad verwendet, selbst wenn diese Maus über Bluetooth mit einem Smartphone verbunden ist.
Ein coarse-Zeiger steht für einen Touchscreen, der ein Mobilgerät sein kann, aber auch ein Laptopbildschirm oder ein großes Tablet sein kann.
Wenn Sie den CSS-Code innerhalb einer Medienabfrage anpassen, um den Berührungszielbereich zu erhöhen, können Sie beim Testen auf einen groben Zeiger die Tippziele für alle Touchscreen-Nutzer erhöhen. Dadurch kann die größere Interaktionsfläche unabhängig davon sein, 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 Zeiger finden Sie im Artikel Grundlagen des responsiven Webdesigns.