Wenn Ihr Design auf einem Mobilgerät angezeigt wird, achten Sie darauf, dass interaktive Elemente wie Schaltflächen oder Links groß genug sind, und genügend Platz um sie herum hat, damit sie leicht angedrückt werden können, ohne sich versehentlich mit anderen Elementen zu überlappen. Davon profitieren alle Nutzenden, ist aber besonders hilfreich für Menschen mit motorischen Beeinträchtigungen.
Die empfohlene Mindestgröße für Berührungszielbereiche beträgt etwa 48 geräteunabhängige Pixel auf einer Website mit einem korrekt eingestellten mobilen Darstellungsbereich. Ein Symbol darf beispielsweise nur eine Breite und Höhe von 24 Pixeln haben, können Sie einen zusätzlichen Abstand verwenden, um die Größe des Tippziels auf bis zu 48 Pixel zu erhöhen. Die Fläche von 48 × 48 Pixeln entspricht etwa 9 mm. Das entspricht in etwa der Größe der Fingerpolster einer Person.
In der Demo habe ich allen Links Innenabstände hinzugefügt, um sicherzustellen, dass sie der Mindestgröße entsprechen.
Berührungszielbereiche sollten ebenfalls etwa 8 Pixel voneinander entfernt sein. sowohl horizontal als auch vertikal. damit der Finger, 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 verwendet haben, um die Textgröße und Abstände zu bestimmen,
können Sie mit den Entwicklertools überprüfen,
ob der berechnete Wert dieser Fläche groß genug ist.
Im folgenden Beispiel verwende ich em für den Text und die Abstände.
Prüfen Sie die a des Links.
Wechseln Sie in den Chrome-Entwicklertools zum Bereich Computed, wo Sie die verschiedenen Bereiche des Felds prüfen können.
und sehen wir uns an,
welche Pixelgröße sie haben.
In den Firefox-Entwicklertools gibt es einen Layoutbereich.
In diesem Steuerfeld sehen Sie die tatsächliche Größe des untersuchten Elements.
Medienabfragen verwenden, um die Touchscreen-Nutzung zu erkennen
Anstatt einfach nur die Abmessungen des Darstellungsbereichs zu testen und dann dass Smartphones oder Tablets sehr klein sind, Touchscreen verwenden, gibt es jetzt robustere Möglichkeiten, Ihres Designs an die tatsächlichen Gerätefähigkeiten anpassen.
Eine der Medienfunktionen, die wir jetzt mit Medienabfragen testen können
gibt an, 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 Zeiger ist jemand,
der eine Maus oder ein Touchpad verwendet,
auch wenn die Maus über Bluetooth
mit einem Smartphone verbunden ist.
Ein coarse-Zeiger steht für einen Touchscreen,
Dabei kann es sich um ein Mobilgerät,
aber auch um einen Laptop-Bildschirm oder ein großes Tablet handeln.
Wenn Sie Ihr CSS in einer Medienabfrage anpassen, um das Berührungsziel zu erhöhen, Durch das Testen eines groben Zeigers können Sie die Tippziele für alle Touchscreen-Nutzer erhöhen. Dadurch wird die größere Interaktionsfläche unabhängig davon angezeigt, 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 im Artikel Grundlagen des responsiven Webdesigns.