© DrHitch/Shutterstock.com
UX Design für Tablet-Websites

7 Fragmentierung durch Tablet-Schwemme


Die Vielfalt an Viewports hat durch die Tablet-Schwemme stark zugenommen, und eine für das iPad optimierte Website wird einem Honeycomb mit 1280 x 800 Pixel Auflösung nicht gerecht. Wenn der automatische Zoom in Chrome aktiviert ist, wird die Seite entsprechend im Viewport eingepasst, was aber zur Folge hat, dass die eingebundenen Bilder unscharf werden. Ist der Auto-Zoom durch den Benutzer oder via <meta>-Tag deaktiviert, bleiben die Bilder scharf, doch die Bildfläche wird durch das unglückliche Seitenverhältnis mit ungenutzten Flächen an den Rändern nicht voll ausgenutzt.

Über einen <meta>-Tag kann der Zoom deaktiviert werden. Darüber hinaus kann die minimale und maximale Skalierung festgelegt werden.

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Auch wenn das Zoomen zu einer unschönen Darstellung führt, ist es doch ein Feature von Tablets, das vom Benutzer erlernt wurde und diesem deshalb nicht vorenthalten werden sollte. Er erwartet, durch die erlernte Gestik (Spread) den Inhalt vergrößern zu können. Wenn es ihm verwehrt bleibt, führt das zu Enttäuschung.

Wenn Sie am Desktoprechner mit Ihren bevorzugten Tools wie z.B. Photoshop Ihr Screendesign ausarbeiten, werden Sie schnell feststellen, dass die Schrift auf dem iPad viel kleiner wirkt. Das liegt an der höheren Anzahl von Bildpunkten pro Inch. Reguläre Desktop-LEDs haben eine Auflösung von 72 bis 96 ppi, das iPad hat 133 ppi, das iPad 3 liegt bei 264 ppi und das Android Wikipad sogar bei 271 ppi. Das sorgt dafür, dass die Tablets insgesamt schärfer in der Darstellung sind. Nur entspricht die kleinere Darstellung der Elemente und der Schrift nicht mehr dem vom Designer vorgesehenen Schriftbild. Abstände und Schriftgrößen sollten daher früh in der am stärksten angestrebten Auflösung geprüft werden.

Es gibt dazu die Möglichkeit, den oben erwähnten Opera Mobile Emulator zu nutzen, denn in diesem lassen sich die PPI-Auflösungen für die Simulation wählen. Jedoch ist die echte Hardware natürlich zu bevorzugen, dafür bietet sich auf iOS das App Air Display [1] an, auf Android das App iDisplay [2]. Einmal auf dem Tablet und den dazugehörigen Client auf den stationären Rechner installiert, funktioniert das Tablet als zweiter oder sogar dritter Bildschirm und erweitert schlicht den Desktopbereich. Photoshop-Dateien lassen sich einfach via Drag and Drop auf den neuen Bildschirm, das iPad, ziehen und dort in echter 133-ppi-Auflösung betrachten. Die...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang