Das iPad ist seit kurzem in aller Munde. Das neueste mobile Gerät aus dem Hause Apple hat das ambitionierte Ziel, die Art und Weise, wie wir Medien und Web-Inhalte konsumieren, zu revolutionieren. Ein mutiges Vorhaben - aber wenn wir einfach mal annehmen, dass dieser Tablet-PC eine großes Potenzial hat, kommen wir sehr schnell zu der Schlussfolgerung, dass viele Webseiten-Inhaber ihre Seite so bald wie möglich für das iPad optimiert wissen wollen.
Aber was muss gemacht werden, damit die eigene Webseite auf dem iPad zuverlässig und richtig angezeigt wird? Wir haben einige generelle Design-Prinzipien aufgelistet, die einen kleinen Vorgeschmack auf die notwendigen Änderungen für eine iPad-fähige Webseite geben. Wenn Sie weitere Informationen oder eine Beratung wünschen, zögern Sie nicht uns anzusprechen.
Besondere Merkmale des iPad-Displays:
Das iPad hat ein hochauflösendes, 9,7-Zoll Display (Auflösung 1024 x 768 Pixel) mit LED-Hintergrundbeleuchtung, das noch dazu berührungsempfindlich ist. Damit wird bemerkenswert lebhaftes Browsen, Gaming und Medienkonsum möglich. Der haptische Effekt der Oberfläche bringt betrachtete Objekte oder Webseiten sprichwörtlich in die Hände des iPad-Nutzers.
Landschafts- und Portrait-Modus Styling:
Das iPad erlaubt beides: Horizontales und vertikales Betrachten. Das gibt Web-Designern interessante neue Möglichkeiten in der Gestaltung. Gleichzeitig machen die beiden unterschiedlichen Stylings aber auch zwei völlig unterschiedliche Layouts ein und derselben Seite oder Applikation notwendig.
Zudem markiert die Einführung des iPads und seiner vertikalen Bildschirmausrichtung die Rückkehr des echten Magazin-Formats im Web. Bisher hatten Computermonitore durchwegs eine horizontale Ausrichtung, jetzt werden Web-Designer mit dem vertikalen Modus und den sich daraus ergebenden Möglichkeiten in der Gestaltung konfrontiert. Und letztlich wird diese Tatsache sich nicht nur auf das Design, sondern schon auf die Informations-Architektur auswirken.
Der vertikale Modus ist dafür ausgelegt, dass Webseiten in ihrem vollen Umfang auf einmal betrachtet werden können - halbierte Webseiten und übermäßiges Scrollen gehören auf dem iPad der Geschichte an. Zugleich muss der Designer darauf achten, dass für das iPad optimierte Webseiten schmaler angelegt werden müssen. Die herkömmlichen horizontal ausgerichteten Webseiten können auch auf dem iPad im Landschaftsmodus wie gewohnt betrachtet werden. Findige Web-Designer werden in Zukunft darauf achten, dass ihre Designs so flexibel sind, dass sie sowohl in vertikaler als auch in horizontaler Ausrichtung funktionieren und der Inhalt sich an den jeweiligen Modus anpasst.
Design für 960-Pixel-Layout:
Eine Website mit einer Breite größer als die Bildschirmauflösung des iPads, wird verkleinert und zoombar sein. Wenn Ihre Website schmaler als die iPad Bildschirmauflösung ist, könnte das zu unnötigen Rändern führen. In diesem Fall müssen Sie die Viewport-Einstellungen anpassen. Der Inhalt sollte auf die entsprechende Bildschirmbreite skaliert werden können.
Wer eine Seite für das iPad gestaltet, ist gut damit beraten, ein 960-Pixel-Layout zu verwenden. Diese Weite hat sich durchgesetzt, weil sie für sehr viele moderne Bildschirmauflösungen tauglich ist. Auf dem iPad wird eine Webseite mit 960 Pixel Breite displayfüllend angezeigt. Allgemein sollte darauf geachtet werden, dass eine Webseite nahtlos vom Portraitmodus (vertikal) in den Landschaftsmodus (horizontal) übergehen kann.
Text-Hintergrund Verhältnis:
Schwarzer Text auf weißem Hintergrund ist auf dem iPad schwieriger zu lesen, als auf dem normalen Computerbildschirm, weil das iPad-Display einen sehr hohen Kontrast aufweist. Das Problem lässt sich einfach umgehen: Wählen Sie zum Beispiel einen Sepia-Hintergrund mit einer dunklen Erdfarbe oder einen hellen Farbton für die Schrift auf einem dunkleren Hintergrund.
Mehr ist weniger auf dem iPad:
Das iPad sollte Web-Designer dazu inspirieren, ihre Webseiten einfacher zu gestalten und eine intuitivere Navigation zu ermöglichen. Die Navigation ist im Querformat am besten auf der linken Seite aufgehoben und könnte im Hochformat noch oben wechseln. Ein klarer und organisierter Aufbau der Webseite wird den Nutzern zusätzlich helfen, sich auf der Seite schnell zurechtzufinden.
Das iPad Multi-Touch Interface:
Das iPad wird nicht über eine Maus bedient, sondern ganz einfach mit dem menschlichen Finger. Das ist ein wichtiger Punkt für die Gestaltung der Seite, denn ein Finger ist weitaus größer als ein Mauszeiger. Für den Designer heißt das, dass es weniger klassische Links im Text geben wird, dafür aber mehr größere, hervorgehobene und anfassbare Buttons. Zwischen den interaktiven Elementen muss zudem mehr Platz gelassen werden, damit nicht aus Versehen zwei Elemente mit dem Finger berührt werden. Schlüsselelemente werden mit großer Wahrscheinlichkeit immer öfter in der Mitte der Seite platziert werden.
Kein Flash und Java Content:
Das iPad zeigt Webseiten über den Safari-Browser an, der weder Flash noch Java Plugins auf diesem Gerät unterstützt. Die gängigen Alternativen für Web-Designer sind Lösungen, die nur aus CSS3 und HTML5 Code bestehen, was nicht als Problem, sondern als Herausforderung betrachtet werden sollte. Es ist die Chance, diese neuen Technologien auszureizen und zu erkennen, dass beinahe alle Funktionen von Flash auch damit erzeugt werden können. HTML5 zum Beispiel ermöglicht Audio- und Videoelemente und Animationen via CSS bieten alle Möglichkeiten zum Einbetten von Multimedia-Dateien.