Strategien zum Erstellen adaptiver Websites

Heutzutage werden Websites auf zahlreichen verschiedenen Geräten angezeigt, und dieser Trend wird durch all die für Windows 8 optimierten Tablet-PCs und PCs, die auf den Markt kommen, weiter beschleunigt. Websites, die problemlos an verschiedene Anzeigeeigenschaften und Eingabemethoden anpassbar sind, bieten den meisten Benutzern eine optimale Erfahrung. In diesem Thema werden Strategien zur Verwendung von Features in Internet Explorer beschrieben, die Sie beim Erstellen von optisch ansprechenden Websites und Web Apps unterstützen, die problemlos mit zahlreichen Windows 8-Formfaktoren und -Eingabemethoden zu verwenden sind.

Adaptives Design im Gesamtbild

Das Konzept des reaktionsfähigen Webdesigns (auch als adaptives Design bezeichnet) ist Ihnen möglicherweise bereits vertraut. Reaktionsfähiges Webdesign besteht im Wesentlichen darin, die Funktionen Ihrer Website optimal an die Funktionen des Geräts anzupassen, auf dem die Website angezeigt wird. Dies bedeutet, dass Sie Ihre Website an den Benutzer "anpassen". Das reaktionsfähige Webdesign schließt Techniken wie z. B. Cascading Stylesheet (CSS)-Medienabfragen, auf flexiblen Rastern basierende Layouts sowie flexible Bilder mit veränderbarer Größe ein, um ein umfangreiches aber flexibles Design zu erzielen, das auf zahlreichen Geräten bzw. in verschiedenen Browsern gleichermaßen gut funktioniert. Reaktionsfähiges Webdesign steht im Gegensatz zur Erstellung von Websites für bestimmte Bildschirmgrößen und Benutzer-Agents. Diese Methode führt u. U. zu einem unansehnlichen Design und dadurch zu unzufriedenen Benutzern oder – schlimmer noch – zur Nichtverwendbarkeit der Website.

Seit Ethan Marcotte 2010 den Begriff reaktionsfähiges Design prägte, hat sich dessen Bedeutung in der Webgemeinde erweitert und bezeichnet nun alle Methoden, die unabhängig von den Bildschirmabmessungen, der Verbindungsgeschwindigkeit, den Fingereingabefunktionen und anderen Geräteeigenschaften des Benutzers ein ansprechendes und durchdachtes Websiteerlebnis ermöglichen.

Allgemeine Informationen zu reaktionsfähigem Webdesign finden Sie in zahlreichen großartigen Artikeln und inspirierenden Demos wie z. B. hier:

Im übrigen Teil dieses Themas werden die neuen Features erläutert, die das Erstellen reaktionsfähiger, adaptiver Websites in IE unterstützen, sowie die Strategien zum Einbinden von IE und Windows 8-Geräten in Ihre erweiterten Pläne zum adaptiven Websitedesign.

Zwei Aspekte sind beim Erstellen adaptiver Websites besonders zu berücksichtigen: Anzeige und Eingabe

Das Benutzererlebnis Ihrer Website umfasst nicht nur, was die Besucher zu sehen bekommen, sondern auch, was sie selbst tun können. Die Interaktion von Besuchern mit Ihrer Website spielt eine ebenso entscheidende Rolle für die allgemeine Benutzerfreundlichkeit wie das Layout an sich. Was Benutzer auf Ihrer Website letztendlich sehen und wie sie mit Ihrer Website interagieren, wird zum Großteil von den Anzeigeeigenschaften und Eingabemethoden des verwendeten Geräts bestimmt.

Das Entwerfen und Testen für alle vorstellbaren Plattformen Ihrer Benutzer ist unmöglich, daher haben sich zahlreiche Websitebesitzer dazu entscheiden, mehrere Versionen Ihrer Website zu erstellen, die für einige bestimmte auf dem Markt befindlichen Kombinationen von Webplattform und Gerät geeignet sind. Da so viele Computergeräte zur Verwendung des Webs verfügbar sind, was können Sie als Webentwickler tun, um sich auf das neue Windows 8-Geräteökosystem vorzubereiten? Die Antwort hängt stark von der Inhaltsstrategie Ihrer Website, den Entwicklungsressourcen und den Gesamtzielen ab. Besteht Ihr übergeordnetes Ziel jedoch in der Bereitstellung des optimalen Erlebnisses für möglichst viele Benutzer, sollten Sie die Vielzahl der Möglichkeiten sowohl bei den Anzeigeeigenschaften als auch bei den Eingabemethoden der Geräte beachten, die von Ihrem Publikum zum Surfen und Nutzen von Webinhalt verwendet werden. Obwohl es sich bei Layout und Verarbeitung von Benutzereingaben in der vollständigen Windows 8-Designgleichung für Interaktion um miteinander verbundene Faktoren handelt, lässt die Fingereingabeunterstützung nicht unbedingt auf bestimmte Anzeigeeigenschaften schließen und umgekehrt. Beachten Sie beispielsweise folgende ungleiche Erfahrungen:

  • Auf einem auf Windows 8 aktualisierten Breitbild-Laptop ohne Unterstützung für Toucheingabe kann Internet Explorer in der neuen, auf die minimale Breite verringerten Windows-Benutzeroberfläche ausgeführt werden, in der eine ähnliche Viewport-Breite wie auf einem typischen Mobilgerät angezeigt wird.
  • Ein auf Windows 8 aktualisiertes Netbook mit Fingereingabeunterstützung hat möglicherweise eine ähnliche Bildschirmgröße wie ein gängiges Touchtabletgerät
  • Ein All-in-One-Windows 8-PC mit einem 24 "-Touchscreen kann ohne Maus und Tastatur zum Ausführen von Windows 8 Windows Store-Apps wie Internet Explorer 10 verwendet werden

Entsprechend kann trotz der zwei unter Windows 8 vorhandenen Versionen von IE – Internet Explorer in der Windows-Benutzeroberfläche und Internet Explorer für den Desktop – weder anhand von Anzeigeeigenschaften noch der Unterstützung für Toucheingabe zuverlässig festgestellt werden, welche IE-Version der Benutzer verwendet. Internet Explorer in der Windows-Benutzeroberfläche kann auf eine beliebige Größe zwischen der Mindestbreite von 320 Pixel bis zur maximalen Breite des Bildschirms des Hostgeräts angepasst werden, und der Vollbildmodus für Internet Explorer für den Desktop kann (durch Drücken von F11) aktiviert bzw. deaktiviert werden. Auf Hardwaregeräten, die Toucheingabe unterstützen, wird die Toucheingabe in beiden Versionen unterstützt. Grundsätzlich gibt es keine programmgesteuerte Möglichkeit, um festzustellen, ob der Benutzer Internet Explorer in der Windows-Benutzeroberfläche oder Internet Explorer für den Desktop ausführt.

Die allgemein bewährte Methode zum Sicherstellen der besten browserübergreifenden Kompatibilität Ihrer Website ist die Featureerkennung anstelle der Browsererkennung beim Bestimmen, welche Websiteoberfläche den Benutzern zur Verfügung gestellt werden soll. Dieselbe Strategie eignet sich auch für die zwei Browsingoberflächen von IE unter Windows 8. Es wird empfohlen, die verschiedenen von Ihrem Websitepublikum verwendeten Anzeigeeigenschaften und Eingabemethoden als Basis für benutzerfreundliche Layouts und optionale Verbesserungen der Toucheingabe zu nutzen, die mit allen Windows 8-Geräten kompatibel sind.

Strategien für adaptives Websitedesign mit Windows 8-Geräten

Hier finden Sie eine Zusammenfassung einiger bewährter Methoden für das Erstellen von adaptiven Websites mit IE in Windows 8.

Verwenden Sie die Featureerkennung, anstatt Annahmen zu bestimmten Browser- oder Gerätefunktionen zu treffen. Bei IE unter Windows 8 handelt es sich um eine Webplattform mit zwei verschiedenen Benutzeroberflächen, und es kann nicht festgestellt werden, welche vom Benutzer verwendet wird. Verwenden Sie die Methoden der Medienabfrage und Toucheingabeerkennung, um Informationen zu den Anzeigeeigenschaften und Eingabemethoden der von Benutzern verwendeten Geräte zu erhalten.

Passen Sie die Websiteoberfläche in Bezug auf die Anzeigeeigenschaften und Eingabemethoden der Geräte an. Vermeiden Sie das Treffen von Annahmen hinsichtlich des Designs, bei denen bestimmte Anzeigebereichsbreiten oder Breitenbereiche mit Eingabefunktionen oder -beschränkungen gleichgesetzt werden. Sehen Sie das Layout Ihrer Website und die Behandlung von Benutzereingaben stattdessen als zwei unterschiedliche Dinge an. Noch besser ist es, wenn Sie die verschiedenen Kombinationen von Bildschirmen und Eingabemethoden berücksichtigen, die von Ihrer Windows 8-Zielgruppe verwendet werden. Verwenden Sie Medienabfragen und Medienabfragelistener, um das Layout und die Stile Ihrer Website an eine Reihe von Anzeigeeigenschaften anzupassen, und denken Sie daran, mit der CSS-Geräteanpassung die automatische Zoomskalierung außer Kraft zu setzen. Folgen Sie den Designrichtlinien für die Toucheingabe, nutzen Sie das Zeigermodell von IE zum einfachen Behandeln von Maus-, Stift-, Touch- und Multitouchbewegung, und erweitern Sie die Toucheingabefunktionen Ihrer Website mit Gestikereignissen.

Führen Sie Tests anhand einer Matrix mit unterschiedlichen Breiten und Eingabemethoden durch. Achten Sie beim Entwerfen und Erstellen Ihrer adaptiven Website darauf, regelmäßig Tests mit wenigstens einem einfachen Satz von Variablen und Kombinationen durchzuführen, z. B. mit der im folgenden Diagramm vorgeschlagenen Testmatrix.

Zwei durch ein x getrennte Tabellen: Die Viewport-Breitentabelle führt 320 Pixel, 768 Pixel und 1024+ Pixel auf, während die Eingabemethodentabelle Maus und Tastatur, Finger- und Stifteingabe aufführt

Falls Sie Ihre Website bereits in mehreren speziellen Formaten anbieten, sollten Sie diese unter Verwendung einer allgemeinen Heuristik bereitstellen und Benutzern die Möglichkeit zum Wechseln geben. Wenn Sie bereits mehrere Versionen Ihrer Website erstellt haben, die sich für bestimmte auf dem Markt befindliche Geräteklassen eignen, können Sie mit der folgenden Tabelle Ihre vorhandenen Versionen für Mobiltelefone, Tablet- und Desktop-PCs den verschiedenen Viewportgrößen und Benutzereingabemethoden in IE unter Windows 8 zuordnen.

Falls Ihre Oberflächen für Tablet PCs und Desktopcomputer der Funktion nach gleichwertig sind, sollten Sie sich für die Tablet PC-Oberfläche mit Fingereingabeunterstützung entscheiden. (Andernfalls können Sie frei zwischen der Oberfläche von Tablet PC und Desktopcomputer wählen.) Um für die Website die größtmögliche Benutzerfreundlichkeit zu erzielen, sollten Sie eine Option zum Wechseln in verschiedene Formate anbieten.

Verwandte Themen

Anzeige und Layout
Geräteanpassung
Geräteausrichtungsereignisse
"Flexbox"-Layout
Rasterlayout
Medienabfragen und Listener
Mehrspaltiges Layout
Bildschirmausrichtungs-API
Eingabebehandlung
Machen Sie Ihre Website bereit für die Toucheingabe

 

 

Anzeigen:
© 2014 Microsoft