Touch Devices Should Not Be Judged By Their Size

Frontend-Entwickler und Webdesigner leben in einer wahnsinnigen Multi-Geräte-Realität.

Vor ein paar Monaten diskutierte das Red Hat UXD-Team, wie man Unternehmensanwendungen für mobile Umgebungen gestaltet. Sarah und Jenn, meine talentierten Kolleginnen, wiesen darauf hin, dass Touch-Geräte nicht allein nach ihrer Größe beurteilt werden sollten.

Annahmen sind trügerisch. Wenn wir uns nur auf bestimmte Grenzen einigen könnten, wäre dann Webdesign nicht viel einfacher zu kontrollieren?" – Jeremy Keith, Resilient Web Design

Heute gibt es eine neue Komplexitätsebene in der bereits komplizierten Welt des Interaktionsdesigns und der Frontend-Entwicklung.

Die Hardware-Industrie hat massive Touchscreen-Fernseher, sehr große Tablets (wie das iPad Pro) und sogar riesige Touch-Desktop-PCs (wie das neue, atemberaubende Surface Studio) hervorgebracht. Das bedeutet, dass wir nicht mehr davon ausgehen können, dass ein kleiner Viewport ein Touchscreen ist und ein großer Viewport keiner ist. Manchmal sind große Bildschirme berührungsbasiert und erfordern, dass der Benutzer seinen Finger benutzt, und kleine Bildschirme haben einen Stift.

Responsive Viewport-Media-Queries sind großartig, aber sie reichen nicht aus.

Wir können einen Touchscreen mit JS-Tools wie Modernizr erkennen, aber CSS hat ein verstecktes Juwel, das intelligenter und flexibler ist.

Interaktions-Medienmerkmale

Dank der W3C CSS Working Group und der CSS-Community haben wir eine sauberere Lösung.

Im Media Queries Level 4 Working Draft gibt es eine Spezifikation für Interaktions-Medienmerkmale, die drei Definitionen enthält:

• Zeigegerätequalität
• Hover-Fähigkeit
• Seltene Interaktionsfähigkeiten

Diese bieten die Möglichkeit, ein Dokument basierend auf der Anwesenheit und Genauigkeit des Zeigegeräts des Benutzers und der Fähigkeit zum Überfahren von Elementen abzufragen.

Werfen wir einen genaueren Blick auf jede einzelne.

Zeigegerätequalität: Das `pointer`-Merkmal

Das `pointer`-Medienmerkmal wird verwendet, um die Anwesenheit und Genauigkeit eines Zeigegeräts wie einer Maus abzufragen. Wenn ein Gerät mehrere Eingabemechanismen hat, muss das `pointer`-Medienmerkmal die Eigenschaften des „primären“ Eingabemechanismus widerspiegeln, wie vom User-Agent bestimmt.“ – W3C

Das Schlüsselwort hier ist „Genauigkeit“ des Zeigegeräts.

• Eine Maus oder ein Zeichentstift ist sehr präzise und definiert den Wert von fine.
• Ein Finger oder ein Kinect-Peripheriegerät ist es nicht und erhält den Wert coarse.

Daher können wir unsere UI-Elemente an die Zeigerfähigkeiten des Benutzers anpassen. Dies ist nützlich, um Trefferbereiche zu vergrößern, wenn der primäre Eingabemechanismus des Benutzers ein Finger ist.

/* The primary input mechanism of the device includes a pointing device of limited accuracy. */
@media (pointer: coarse) { ... }

/* The primary input mechanism of the device includes an accurate pointing device. */
@media (pointer: fine) { ... }

/* The primary input mechanism of the device does not include a pointing device. */
@media (pointer: none) { ... }

Ein Anwendungsfall für diese Abfrage ist die Größenanpassung des Klickbereichs einer Checkbox oder eines Radiobuttons.

Hover-Fähigkeit: Das `hover`-Merkmal

Das `hover`-Medienmerkmal wird verwendet, um die Fähigkeit des Benutzers zum Überfahren von Elementen auf der Seite abzufragen. Wenn ein Gerät mehrere Eingabemechanismen hat, muss das `hover`-Medienmerkmal die Eigenschaften des „primären“ Eingabemechanismus widerspiegeln, wie vom User-Agent bestimmt.“ – W3C

Es ist wichtig zu beachten, dass nur der primäre Eingabemechanismus ausgewertet wird. Wenn der primäre Eingabemechanismus nicht in der Lage ist zu hovern, der sekundäre Eingabemechanismus aber schon, dann wird die Abfrage zu none ausgewertet.

Zum Beispiel passt ein Touchscreen, bei dem ein langer Druck als Hovering behandelt wird, zu hover: none.“ – W3C

• Ein Touchscreen-Gerät, bei dem das primäre Zeigersystem der Finger ist und nicht hovern kann, erhält den Wert none.
• Ein Gerät, bei dem die primäre Eingabe eine Maus ist und leicht über Teile der Seite hovern kann, erhält den Wert hover.

/* Primary input mechanism system can 
   hover over elements with ease */
@media (hover: hover) { ... }

/* Primary input mechanism cannot hover 
   at all or cannot conveniently hover 
   (e.g., many mobile devices emulate hovering
   when the user performs an inconvenient long tap), 
   or there is no primary pointing input mechanism */
@media (hover: none) { ... }

Ein guter Anwendungsfall für diese Abfrage ist ein Dropdown-Menü.

Seltene Interaktionsfähigkeiten: Die `any-pointer`- und `any-hover`-Merkmale

Auf Geräten, die sowohl berührungsbasiert sind als auch eine Maus oder einen Stift haben, wie das Microsoft Surface, werten die Media-Queries `hover` und `pointer` nur den primären Eingabemechanismus aus.

Wie Andrea Giammarc darauf hinwies, erhält sein Dell XPS 13″ Touch den Wert fine, obwohl er einen Touchscreen hat, da der primäre Eingabemechanismus eine Maus ist.

@Real_CSS_Tricks FYI, ich habe einen Touchscreen und diese Methode versagt wie erwartet in Chrome. 😕

— Andrea Giammarchi (@WebReflection) 5. Februar 2017

Wenn wir möchten, dass ein solches Gerät den Wert coarse oder hover erhält, können wir die Rare Interaction Capabilities verwenden.

Die Medienmerkmale `any-pointer` und `any-hover` sind identisch mit den Merkmalen `pointer` und `hover`, aber sie entsprechen der Vereinigung der Fähigkeiten aller für den Benutzer verfügbaren Zeigegeräte. Mehrere ihrer Werte können übereinstimmen, wenn verschiedene Zeigegeräte unterschiedliche Eigenschaften haben. Sie dürfen nur dann nichts übereinstimmen, wenn alle Zeigegeräte nichts für die entsprechende Abfrage übereinstimmen oder keine Zeigegeräte vorhanden sind.“ – W3C

/* One or more available input mechanism(s) 
   can hover over elements with ease */
@media (any-hover: hover) { ... }

/* One or more available input mechanism(s) can hover, 
   but not easily (e.g., many mobile devices emulate 
   hovering when the user performs a long tap) */
@media (any-hover: on-demand) { ... }

/* One or more available input mechanism(s) cannot 
   hover (or there are no pointing input mechanisms) */
@media (any-hover: none) { ... }


/* At least one input mechanism of the device 
   includes a pointing device of limited accuracy. */
@media (any-pointer: coarse) { ... }

/* At least one input mechanism of the device 
   includes an accurate pointing device. */
@media (any-pointer: fine) { ... }

/* The device does not include any pointing device. */
@media (any-pointer: none) { ... }

Gerätebeispiele

Typische Beispiele für Geräte, die Kombinationen von `pointer` und `hover` übereinstimmen:

	pointer: coarse	pointer: fine
hover: none	Smartphones, Touchscreens	Stiftbasierte Bildschirme (Cintiq, Wacom usw.)
hover: hover	Nintendo Wii-Controller, Kinect	Maus, Touchpad

W3C

Patrick H. Lauke hat einen großartigen Leitfaden geschrieben, wie jeder Gerätetyp Interaktionsmedienabfragen auswertet.

Das ist wirklich cool, oder? Ich höre dich rufen: Was ist mit der Browserunterstützung?

Browserunterstützung ist gar nicht schlecht!

Obwohl dies ein Arbeitsentwurf ist, hat er eine ziemlich gute Unterstützung.

Mein einfacher Test war erfolgreich auf Chrome, Chrome für Android, Safari, Edge, Opera, Samsung Browser und Android Browser, aber nicht auf Firefox, Opera Mini oder IE.

Siehe den Pen Touch screen test von Andres Galante (@andresgalante) auf CodePen.

Firefox und IE machen nur etwas mehr als 2 % des mobilen/Tablet-Browser-Marktanteils aus. Ich konnte keine Informationen über Touch-TVs oder andere Touchscreen-Geräte finden, die keine Mobiltelefone oder Tablets sind.

Ich denke, wir sind bereit, diese Funktion zu nutzen, und wenn Firefox die Unterstützung dafür hinzufügt und IE endgültig stirbt, werden wir volle Unterstützung haben.

Der Anwendungsfall „Karten auswahl“

Vor einem Monat arbeiteten wir an der Implementierung einer Mehrfachauswahl-Kartenkomponente für die neue Version von PatternFly, einem Open-Source-Designsystem, zu dem ich beitragen. Es war ein perfekter Fall, um die `hover`- und `pointer`-Media-Query zu verwenden.

Um eine Karte auszuwählen, wird beim Hovern über sie ein Kontrollkästchen angezeigt. Wenn der Benutzer Elemente nicht überfahren kann, zeigen wir das Kontrollkästchen immer an.

Um diese Interaktion zu verbessern, haben wir die Trefferfläche des Kontrollkästchens vergrößert, wenn der primäre Eingabemechanismus coarse ist.

Siehe den Pen Multi select cards von Andres Galante (@andresgalante) auf CodePen.

Firefox und IE zeigen immer Standard-Kontrollkästchen an.

Größe ist nicht alles

Geräte sollten nach ihren Fähigkeiten beurteilt werden, denn letztendlich sind es diese Fähigkeiten, die sie definieren.

Dies ist eine untergenutzte Funktion, die die Tür zu aufregenden neuen Herausforderungen öffnet. Ich kann es kaum erwarten zu sehen, was wir als Community damit machen können.

Referenzen

Alle im Code kommentierten Beschreibungen stammen von Mozilla Developer Network.