IE11: Touch-Browsing für das moderne Web und die Zukunft

IEBlog Deutsch

Blog des Internet Explorer-Entwicklerteams

IE11: Touch-Browsing für das moderne Web und die Zukunft

  • Comments 0

Mit Internet Explorer 11 unter Windows 8.1 Preview wird die unter Windows 8 eingeführte innovative Touchunterstützung dank neuer und verbesserter Touchfeatures sowie neuer Entwickler-APIs weiterentwickelt. In diesem Beitrag stellen wir ausgewählte Features vor, die die Touchunterstützung bei IE11 unter Windows 8.1 weiter verbessern.

Zuverlässige Hovermenüs mit Touchfunktion

Ein Großteil der heutigen Webfunktionen wurde für Mausbenutzer entwickelt. Auf vielen Websites sind Menüs implementiert, die nur mithilfe des Mauszeigers verwendet werden können. Um eine zuverlässige Touchbedienung im Web zu gewährleisten, unterstützt IE11 eine Touch-Hoverfunktion. In vielen Szenarios kann die Software nicht eindeutig ermitteln, ob bei Tippen auf Webseitenelemente ein Klicken oder ein Hover ausgeführt werden soll. In Internet Explorer 11 wird dieses Problem gelöst, indem es für beide Funktionen zwei verschiedene Gesten gibt:

  • Tippen = Klicken
  • Halten = Hover

In diesem Video wird die Verwendung von Hovermenüs mit Touchfunktion auf verschiedenen Websites demonstriert.

Zusätzlich zu dieser Touch-Hoverfunktion wird bei Gedrückthalten eines Links in einem neuen Kontextmenü am unteren Bildschirmrand eine Befehlsleiste angezeigt. So kann die Befehlsleiste angezeigt werden, ohne das ggf. angezeigte Hovermenü zu verdecken. Über die Schaltflächen in der Befehlsleiste können Sie Seiten problemlos in einer neuen Registerkarte oder einem neuen Fenster öffnen.

Verbesserte Hervorhebung von Links

Internet Explorer 11 unter Windows 8.1 bietet neue und verbesserte Hervorhebungen, sodass Ihre Touchbefehle auch optisch dargestellt werden. Durch dieses neue optische Feedback werden die Touchbefehle auf einer Webseite sichtbar bestätigt.

Dieses Verhalten entspricht den Funktionen von Windows Phone 8, allerdings mit verschiedenen Verbesserungen, z. B. bei Links mit CSS-Transformationen. Dank dieser Verbesserungen werden mehr Links (einschließlich verlinkter Bilder) hervorgehoben. Die Hervorhebung wirkt sich nicht mehr auf die CSS-Vorlagen aus und Entwickler können die Hervorhebung auf Desktopgeräten und Smartphones mit dem gleichen Markup deaktivieren:

<meta name="msapplication-tap-highlight" content="no">

In den folgenden Abbildungen sind Beispiele von Linkhervorhebungen in IE11, auf einem iPad und unter Android dargestellt, wenn auf der Seite CSS-Transformationen ausgeführt werden. Nur in IE11 wird die Linkhervorhebung um das Verknüpfungsziel angezeigt.

In den folgenden Abbildungen sind Beispiele von Linkhervorhebungen in IE11, auf einem iPad und unter Android dargestellt, wenn auf der Seite CSS-Transformationen ausgeführt werden. Nur in IE11 wird die Linkhervorhebung um das Verknüpfungsziel angezeigt.In den folgenden Abbildungen sind Beispiele von Linkhervorhebungen in IE11, auf einem iPad und unter Android dargestellt, wenn auf der Seite CSS-Transformationen ausgeführt werden. Nur in IE11 wird die Linkhervorhebung um das Verknüpfungsziel angezeigt.In den folgenden Abbildungen sind Beispiele von Linkhervorhebungen in IE11, auf einem iPad und unter Android dargestellt, wenn auf der Seite CSS-Transformationen ausgeführt werden. Nur in IE11 wird die Linkhervorhebung um das Verknüpfungsziel angezeigt.
IE11iPadAndroid

Linkhervorhebung mit CSS-Transformationen

<a href="#" style="transform: rotate(45deg)">Links mit CSS-Transformationen</a>

Vor- und Zurückblättern mit Streifbewegungen

Das Zurückblättern zur vorigen Webseite gehört zu den häufigsten Benutzeraktionen und macht rund ein Drittel aller Navigationsbefehle aus. In Internet Explorer 10 konnten Benutzer erstmals mithilfe von Streifbewegungen in Internetseiten vor- und zurückblättern. In Internet Explorer 11 ist diese Funktion auf allen Geräten noch schneller und flüssiger. Gleichzeitig werden weniger Speicher und Energie benötigt.

Dazu wird in Internet Explorer 11 beim Navigieren auf Websites die vorige Seite in den Speicher ausgelagert und dort zwischengespeichert. Wenn Sie zur vorigen Seite zurückblättern, wird diese aus dem Speicher geladen. So kann die Seite beim Zurückblättern beinahe in Echtzeit angezeigt werden. In einem weiteren Beitrag werden dieses neue Zwischenspeichern von Webseiten und Möglichkeiten zum Optimieren von Websites für dieses Feature mit HTML5-APIs erläutert.

Verschiedene Seiten können nicht ausgelagert werden. In diesen Fällen wird bei einer Streifbewegung die vorige Seite mithilfe von vorläufigem Rendern dargestellt. So können die Seiten schnell und zuverlässiger geladen werden.

Vor- und Zurückblättern durch Streifen in IE11

Auch die Verwendung der Schaltflächen „Zurück“ und „Vor“ wurde verbessert. Beim Verwenden der Schaltflächen „Zurück“ und „Vor“ wird während des Ladens der Seite ein Screenshot angezeigt, sodass Sie gesuchte Websites beim Zurückblättern schnell finden können.

HTML5-Drag & Drop mit Touch

Die Toucheingabe sollte eine erstklassige Webfunktion sein. Internet Explorer 11 ist der erste Browser, der HTML5-Drag & Drop mit Touch unterstützt und standardmäßig aktiviert hat. Drag & Drop kann durch einfaches Drücken und Halten verwendet werden. In IE11 kann Drag & Drop auch auf Websites, bei denen HTML5-Drag & Drop für die Verwendung einer Maus implementiert wurde, ohne zusätzlichen Code per Toucheingabe verwendet werden. Testen Sie Magnetic Poetry – diese Test Drive-Demo wurde für HTML5-Drag & Drop mit der Maus in IE10 entwickelt. Sie kann in IE11 ohne jegliche Modifikation über Toucheingabe verwendet werden.

Testen Sie Magnetic Poetry – diese Test Drive-Demo wurde für HTML5-Drag & Drop mit der Maus in IE10 entwickelt. Sie kann in IE11 ohne jegliche Modifikation über Toucheingabe verwendet werden.

Drag & Drop mit Touch in Magnetic Poetry Test Drive

Direkte Manipulation für Maus, Tastatur, Touchpad und Touch

Dank hardwarebeschleunigter direkter Manipulation bietet Internet Explorer 10 branchenführende Funktionen zum Verschieben und Zoomen. Selbst Seiten mit umfangreichem Skript haften förmlich an Ihren Fingern, wenn Sie ziehen oder die Finger zum Zoomen zusammenführen, und die Manipulation und Animationen werden flüssig ausgeführt. Entwicklern stehen zahlreiche APIs zur Verfügung, mit denen auf innovative Weise Funktionen zum Verschieben und Zoomen konfiguriert werden können. Die MSN-Startseite verwendet Andockpunkte und ermöglicht Benutzern das Streifen durch die Schlagzeilen.

Streifen durch Schlagzeilen mit Touch auf „msn.com“

Streifen durch Schlagzeilen mit Touch auf „msn.com“

Internet Explorer 11 unter Windows 8.1 bietet für Maus, Tastatur, Touchpad und Touchscreen die gleiche hardwarebeschleunigte Technologie zum Verschieben und Zoomen. So profitieren Websites für alle Eingabemethoden von flüssigem Verschieben und Zoomen. Entwickler können außerdem mithilfe der neuen msZoomTo()-API das Verschieben und Zoomen programmgesteuert auslösen.

Verbesserte Touch-APIs mit Zeigerereignissen

In Kooperation mit dem W3C und anderen Browseranbietern haben wir einen Standard für Zeigerereignisse auf Grundlage der in Internet Explorer 10 eingeführten, mit dem Herstellerpräfix versehenen APIs entwickelt. Diese APIs ermöglichen es Websites, verschiedene Zeigergeräte, z. B. Maus, Stift und Multitouch, zu unterstützen. Die Internet Explorer 11 Preview verfügt über aktualisierte MSPointer-APIs, die der aktuellen Candidate Recommendation-Spezifikation entsprechen. In der endgültigen Version von Internet Explorer 11 werden Zeigerereignisse ohne Präfix unterstützt.

Zuverlässiges Touch-Browsing für das moderne Web und die Zukunft

Bei der Entwicklung von Windows 8 sollte die Benutzerfreundlichkeit in puncto Toucheingabe keine Wünsche offen lassen. Internet Explorer 11 knüpft an die moderne, schnelle und flüssige Benutzererfahrung an, die für Toucheingabe optimiert ist – auch, wenn derzeit noch nicht das ganze Web auf Toucheingabe ausgelegt sind. Dank hardwarebeschleunigter direkter Manipulation haften die Seiten förmlich an Ihren Fingern. Verschieben und Zoomen sind flüssige, intuitive Vorgänge. Bei der Interaktion auf Webseiten wird die Anzeige nicht von der Browser-UI verdeckt. Auf Seiten wie GlacierWorks, Atari und Contre Jour und in Teilen in IE Test Drive-Demos wie Touch Effects und Browser Surface können Sie nachverfolgen, wie Entwickler mithilfe der branchenführenden Standard-APIs in IE ansprechende Touchfunktionen bereitstellen.

Internet Explorer 11 überzeugt durch Innovation: Neue und verbesserte Touchfeatures bieten die bisher beste Touchbenutzererfahrung. Laden Sie die Windows 8.1 Preview noch heute herunter und überzeugen Sie sich selbst, dass Internet Explorer 11 der perfekte Touchbrowser ist.

Michael Patten
Lead Program Manager, Internet Explorer