Richtlinien zum Erstellen von Touchscreen-optimierten Websites

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

Richtlinien zum Erstellen von Touchscreen-optimierten Websites

  • Comments 0

Unter Windows 8 Consumer Preview ermöglicht IE10 schnelle und flüssige Websites, die Mehrfingereingabe unterstützen. Die meisten Websites lassen sich in IE10 auch unverändert mit Touchscreens bedienen. In diesem Beitrag werden vier einfache Richtlinien erläutert, die sicherstellen, dass Benutzer Websites auch auf Touchscreens optimal nutzen können.

Wir haben bereits zuvor einen Beitrag dazu veröffentlicht, wie neue Eingabegeräte und Touchscreens das Web verändern. Außerdem haben wir uns zur Bedeutung des Browsens ohne Kompromisse mit IE10 für die Fingereingabe bei der Webnutzung geäußert.

Die ersten beiden der folgenden vier Richtlinien stellen sicher, dass Touchscreen-Benutzern der gesamte Funktionsumfang von Websites zur Verfügung steht. Die letzten beiden Tipps beziehen sich auf die Benutzerfreundlichkeit von Websites im Zusammenhang mit der Fingereingabe.

Verbergen Sie Inhalte KEINESFALLS hinter einer Hover-Funktion

Den Mauszeiger können Sie über Inhalte bewegen (darauf zeigen) ohne diese zu aktivieren (darauf klicken). Beim Tippen auf einen Touchscreen werden das Zeigen auf Inhalte und deren Aktivierung jedoch in einer Aktion zusammengefasst. Funktionen, bei denen nur auf einen Inhalt gezeigt werden muss, ohne diesen zu aktivieren, sind auf Touchscreens folglich nicht möglich. Sorgen Sie daher dafür, dass sämtliche Funktionen über Klicken (Tippen) aktiviert werden.

    KONFIGURIEREN Sie den Browser hinsichtlich der Standardverhalten für die Fingereingabe, die auf Ihrer Website gut funktionieren

    Benutzer erwarten, dass sie Websites auf einem Touchscreen verschieben und zoomen können. Aus diesem Grund verarbeitet der Browser Eingaben wie Fingerbewegungen, das Zusammenführen der Finger und Doppeltippen direkt, ohne Ereignisse für diese Interaktionen zu senden. Wenn auf der Website für diese Interaktionen Sonderfunktionen ausgeführt werden sollen, müssen Sie IE10 so konfigurieren, dass (wenn überhaupt) nur die gewünschten Standardverhalten ausgeführt werden.

    Wenn ein Benutzer auf ein Element zeigt, ermittelt die CSS-Eigenschaft -ms-touch-action die von IE10 bereitgestellte Standardaktion.

    -ms-touch-action: auto | none | manipulation | double-tap-zoom | inherit;

    In der folgenden Tabelle werden die fünf möglichen Werte aufgeführt.

    WertBeschreibung
    autoDas Verhalten des Elements wird vom Browser ermittelt. Hierbei handelt es sich um den Standardwert für -ms-touch-action.
    noneEs ist kein Standardverhalten zulässig.
    manipulationNur Verschieben, Zusammenführen der Finger und Wischen, um die folgende bzw. vorherige Seite aufzurufen, sind zulässig.
    double-tap-zoomNur das Zoomen über doppeltes Tippen ist zulässig.
    inheritDas Element übernimmt den -ms-touch-action-Wert des übergeordneten Elements.

    Beispielsweise kann für eine Anwendung mit „Canvas“-Zeichenbereich folgender Code verwendet werden:

    canvas {

    -ms-touch-action: double-tap-zoom;

    }

    Mit dieser Konfiguration kann der Benutzer Doppeltippen, um das „Canvas“-Element zu zoomen, doch wenn der Finger über dieses bewegt wird, erfolgt statt dem Verschieben der Seite eine Eingabe in den Zeichenbereich.

    LEGEN Sie Eingabetypen mit HTML5-Formularen fest

    Mit IE10 wird Unterstützung für HTML5-Eingabesteuerelemente eingeführt – alle dieser Steuerelemente sind Touchscreen-optimiert. Beispielsweise können Sie bei Texteingaben die Benutzerfreundlichkeit erhöhen, indem Sie ggf. spezifische Eingabetypen festlegen. Für den festgelegten Eingabetyp zeigt Internet Explorer unter Windows 8 eine angepasste Bildschirmtastatur an:

    <input type="email">

    Bildschirmtastatur mit den Tasten „@“ und „.com“ für E-Mail-Adressen.
    Bildschirmtastatur mit den Tasten „@“ und „.com“ für E-Mail-Adressen.

    <input type="tel">

    Bildschirmtastatur mit Ziffernblock für Telefonnummern
    Bildschirmtastatur mit Ziffernblock für Telefonnummern

    <input type="url">

    Bildschirmtastatur mit Schrägstrich und „.com“ für URLs
    Bildschirmtastatur mit Schrägstrich und „.com“ für URLs

    Diagramm, in dem relative Fingerbreiten und eine durchschnittliche Fingerbreite von 11 mm dargestellt werdenSTELLEN Sie ausreichend Platz für die Finger des Benutzers bereit

    Für die Entwicklung der Touchscreen-optimierten Benutzeroberfläche von Windows 8 haben wir umfassende Forschungsergebnisse in einigen nützlichen Richtlinien für Entwickler zusammengefasst. Die durchschnittliche Breite eines Fingers beträgt 11 mm. Bei größeren Zielen, auf die getippt wird, fällt die Anzahl fehlgeschlagener Eingabeversuche rasch ab.

    Optimal sind quadratische Ziele mit einer Mindestbreite von 11 mm (ca. 40 px) und einem Abstand von mindestens 2 mm (ca. 10 px).

    Zielgröße von mindestens 40 px
    Mindestens 10 px Abstand zwischen Zielen

    Verwenden Sie die Funktionserkennung, wenn Sie die Abstände speziell für Benutzer mit Touch-Geräten anpassen möchten.

    So ermitteln Sie, ob ein Benutzer ein Touch-Gerät verwendet

    if (navigator.msMaxTouchPoints && navigator.msMaxTouchPoints > 1) {

    // Supports multi-touch

    }

    Weiterführende Informationen

    Sie haben noch zahlreiche weitere Möglichkeiten, Websites für die Fingereingabe zu optimieren. Beispielsweise können Sie benutzerdefinierte Mehrfingereingabeinteraktionen oder -gesten unterstützen. Im Folgenden finden Sie einige Links für die ersten Schritte:

    Diese Methoden werden in zukünftigen Blog-Beiträgen eingehender erläutert. Mithilfe dieser Richtlinien können Sie für die Fingereingabe in IE10 optimierte Websites erstellen.

    – Jacob Rossi, Program Manager, Internet Explorer