Eine iPad-Kompatibilitäts-Checkliste für Ihre bestehende Website

Haben Sie in letzter Zeit Ihre Website-Analysen überprüft? Vielleicht ist Ihnen aufgefallen, dass das iPad von Apple und andere Tablet-Geräte allmählich als nicht ganz unbedeutender Teil des Verkehrs auftauchen, der Ihre Website besucht.

Während eine iPad-App oder sogar eine Tablet-spezifische Version Ihrer Website auf einer zukünftigen Roadmap stehen könnte, gibt es ein paar Änderungen, die Sie jetzt vornehmen können, um sicherzustellen, dass das Erlebnis für Besucher auf einem Tablet gut ist, ohne dass dies für Nutzer, die mit herkömmlichen Geräten auf Ihre Website zugreifen, nachteilig ist.

Schnüffeltest

Wenn Sie eine mobile Webversion Ihrer Website haben, die für Handheld-Betriebssysteme wie iOS oder Android entwickelt wurde, ist es wahrscheinlich, dass Sie diese Version der Website nicht für Nutzer auf einem Tablet verwenden möchten. In Bezug auf Bildschirmgröße und Seitenverhältnis ähnelt ein Tablet wie das iPad viel mehr einem Laptop-Bildschirm als einem mobilen Bildschirm.

Testen Sie Ihre Website, um sicherzustellen, dass Ihre automatischen Weiterleitungen Tablets nicht mit Handhelds zusammenfassen und dazu führen, dass ein Tablet-Browser auf Ihre Website weitergeleitet wird.

Ausrichtung

Bei Tablets können die Nutzer schnell und einfach zwischen Hoch- und Querformat wechseln, um das optimale Format für den Inhalt zu finden, den sie gerade betrachten. Aus diesem Grund ist es wichtig, Ihre Website auf den verschiedenen Tablet-Geräten, die Sie unterstützen möchten, zu testen, um sicherzustellen, dass es beim Wechsel der Ausrichtung keine Anzeigeprobleme gibt.

Flash

iPads unterstützen die Flash-Technologie nicht. Wenn Ihre Website in nennenswertem Umfang auf Videoinhalte angewiesen ist, müssen Sie andere Optionen für die Bereitstellung dieser Videos (z. B. HTML5) prüfen. Ein Hinweis: Wenn Sie Ihre Videos auf einer Website eines Drittanbieters hosten (z. B. YouTube oder Vimeo) und sie einfach in die Seite einbetten, sollten Sie keine Probleme haben. Diese eingebetteten Videos verfügen über eine integrierte Technologie zur Anpassung an Geräte, die nicht mit Flash kompatibel sind.

Zielgröße & “Klickbarkeit”

Die Verwendung eines Fingers auf einem Touchscreen-Gerät erfordert ein etwas größeres Ziel als die Verwendung des Cursors einer Maus. Es gibt nichts Frustrierenderes für Ihre Nutzer, als auf ein klickbares Element zu tippen und es zu verfehlen oder, schlimmer noch, versehentlich auf etwas anderes zu klicken, das neben dem beabsichtigten Element liegt. Gehen Sie Ihre bestehende Website durch und stellen Sie sicher, dass anklickbare Elemente anklickbar aussehen, groß genug sind (vor allem Textlinks) und genügend Spielraum haben, damit ein Benutzer auf einem Tablet-Gerät sie leicht mit dem Finger aktivieren kann. Der Guru für digitale Produkte und Benutzeroberflächen, Luke W, gibt in seinem Artikel “Touch Target Sizes” einige Empfehlungen zu Mindestgrößen.

Seite zoomen

Benutzer der meisten berührungsempfindlichen Geräte sind daran gewöhnt, durch “doppeltes Antippen” eines Abschnitts einer Webseite diesen gezielt zu vergrößern. Dies ist zwar ein leistungsfähiges Werkzeug, aber es ist wichtig zu prüfen, ob die HTML-Struktur Ihrer Website so aufgebaut ist, dass der Safari-Browser den linken und rechten Rand eines Moduls, z. B. des Haupttextes eines Artikels, richtig erraten kann. In einigen Fällen kann die HTML-Struktur der Website so aufgebaut sein, dass sie den Browser verwirrt und einen falschen Zoom verursacht.

Testen Sie die wichtigsten Abschnitte jeder Seite, indem Sie sie doppelt antippen, und vergewissern Sie sich, dass die Größe an den richtigen Rändern angepasst wird, um eine optimale Anzeige zu gewährleisten.

Schweben

Im Gegensatz zum konventionellen, mausgesteuerten Browsing gibt es in einer berührungsgesteuerten Umgebung kein Konzept für einen Hover-Zustand. Aus diesem Grund können berührungsempfindliche Geräte keine CSS :Hover-Zustände oder Javascript OnMouseOver-Funktionen verarbeiten. Dies kann bei Websites, die Flyout-Menüs für die Navigation auf der obersten Ebene enthalten, zu einer wichtigen Überlegung werden. Wenn Ihre Top-Navigation Flyouts enthält, die nur angezeigt werden, wenn die Maus darüber fährt, müssen besondere Überlegungen angestellt werden, um dies mit Touch-Geräten durch Antippen kompatibel zu machen.

Formulare

Die Eingabe von Informationen auf mobilen Geräten kann eine etwas mühsame Aufgabe sein. Eine Möglichkeit, dies für den Benutzer etwas weniger schmerzhaft zu gestalten, ist die Präsentation einer virtuellen Tastatur, die für die einzugebenden Informationen optimiert ist. Mit einer Reihe von neuen Eingabemöglichkeiten in HTML5 ist dies etwas einfacher geworden. (Weitere Informationen finden Sie in Roger Johanssons Artikel “HTML5 input types”)

So, das sind einige Punkte, mit denen Sie Ihre bestehende Website testen können, um ein optimales Erlebnis für jeden zu gewährleisten, der von einem iPad oder einem anderen Tablet-Gerät aus besucht. Mit der zunehmenden Verbreitung des Internets steigt auch die Zahl der Geräte, die für den Zugriff darauf verwendet werden. Während diese neuen Geräte mehr Herausforderungen mit sich bringen, schaffen sie auch mehr Möglichkeiten für uns alle, jederzeit und überall verbunden zu sein und zu bleiben.