Tipps und Tricks für die iPad-Anpassung

Tablet-Computer erfreuen sich immer größerer Beliebheit. Sie sind praktisch, klein, handlich - und helfen dabei auch unterwegs auf dem Laufenden zu bleiben oder schnell mal im Zug ein Hotel am Ankunftsort zu reservieren. Gerade für letzteres muss die Webseite, über die man so eine Buchung vornimmt, auch für diese mobilen Geräte geeignet sein. Nicht jede Webseite kann auch auf einem iPad dargestellt geschweige denn bedient werden. Worauf müssen Webseiten-Betreiber also achten, wenn ihre Webseite auf einem iPad richtig dargestellt und genutzt werden soll?

Die Grenzen der Technik kennenlernen

Das iPad verwendet als Betriebssystem das iOS, welches vom Hersteller Apple (in abgespeckter Version) auch für iPhones verwendet wird. Dieses System setzt hierbei auch die Bedingungen für mögliche Techniken.

Tablet-Computer wie iPad haben die besondere Eigenschaft, dass es sich um komplette Touchscreen-Geräte handelt. Aus dem Grund sind die Bedienelemente auch etwas anders als auf einem Desktop-System. Das bedingt sich allein schon durch die Art und Weise wie man mit den Fingern die Geräte bedient, statt am Desktop mit der Maus. Beispielsweise dient ein aufgelegter Finger, den man über das Display zieht, zum Schieben oder Ziehen von einer Ansicht. Dadurch werden auch Webseiten auf eine andere Art und Weise bedient.

Zudem kommt das iPad von Hause aus mit dem Safari-Browser daher. Man kann auch andere Browser installieren, es gibt aber nur sehr wenige die diese Geräte unterstützen.

Weiterhin muss man auch die Display-Größe beachten. Während man auf einem Desktop-System von Viewports ab 990 Pixeln (19 Zoll Monitor-Mindestauflösung, heutiger Mindest-Standard laut Statistiken) ausgehen kann, hat das iPad in jeder Version andere Maße an die sich eine Webseite halten müsste. Die aktuellsten Modelle haben jedoch auch die für Desktop üblichen Viewport-Maße erreicht, also mindestens 990 Pixel Breite.

Gerade weil die Displays nicht so viel Platz bieten, hat man beim iPad auch auf weitere essentielle Funktionen die man von Desktop-Systemen kennt verzichtet. Scrollleisten existieren z.B. nicht. Zumindest nicht in der Form wie man sie kennt. Sie sind erst sichtbar, wenn der Nutzer mit dem Finger eine Seite runter, hoch oder zur Seite ziehen will.

Was das iOS-System absolut nicht unterstützt sind Flash-, Silverlight- und Java-Applikationen. Webseiteninhaber, die komplett oder nur teilweise eine der Techniken verwenden, werden ihre Webseite mit diesen Techniken nicht für das iPad anpassen können. Hier bleibt nur übrig die Webseite komplett ohne diese Applikationen neu zu schreiben.

Die Möglichkeiten der Technik erkennen

Wenn man eine Webseite erstellt, die auch auf dem iPad anzeigbar und bedienbar sein soll, braucht man sich (pauschal gesagt) nur an die gültigen Standards für HTML und CSS halten.

Beispielsweise wird ein Aufklapp-Menü bei jedem Browser auf dem iPad ohne JavaScript unterstützt, so wie es auch moderne Browser auf dem Desktop handhaben. Man braucht lediglich per CSS die Pseudoklasse hover verwenden um das Menü aufklappen zu lassen. Dieses Vorgehen wird auch von allen aktuellen Desktop-Browsern unterstützt. Auf dem iPad bedeutet dies, dass ein Besucher, um das Menü aufzuklappen, dieses antippen muss. Dadurch reagiert die hover-Pseudoklasse und blendet das darunterliegende Menü ein. Als Webseiten-Programmierer muss man hierfür sich somit nicht zusätzliche Gedanken machen um das Menü auch auf dem iPad bedienbar zu machen.

Stylesheets

Ein iPad-Nutzer kann die im Browser integrierte Zoom-Funktion nutzen um einzelne Bereiche der Webseite näher heran oder auch weg zu zoomen. Eine Anpassung an einen bestimmten Viewport ist daher (dank dem Safari) hier nicht notwendig, über CSS media queries kann man diese (für sehr alte iPad-Geräte) jedoch dennoch berücksichtigen. Da die Geräte auch gedreht werden können, könnte eine Webseite mal in einer größeren Pixelbreite, mal in einer kleineren Pixelbreite angezeigt werden. Genau dafür ist z.B. auch untenstehender Code für ein media query notwendig:

Die Funktion der media queries wurde erst am 20.06.2012 vom W3C als Standard für CSS3 freigegeben. Dennoch unterstützen bereits jetzt zahlreiche Browser diese Möglichkeit, wie eben auch der Safari-Browser auf dem iPad. Wenn man diesem Browser auf dem iPad spezielle CSS-Eigenschaften unterschieden möchte, kann man dies auf folgendem Weg erreichen:

Natürlich kann man das auch innerhalb der eigenen Stylesheet-Datei schreiben:

/* iPad [Hoch- und Querformat] */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
}
/* iPad [Hoch- und Querformat] */
@media only screen and (max-device-width: 480px) {
}

Hinweis: Beide media queries zu kombinieren ist nicht möglich.

Statt media queries könnte man auch auf den Gedanken kommen die CSS-Eigenschaften media für bestimmte Medientypen nutzen. Normalerweise verwendet man screen und print oder einfach all. Das sieht z.B. so aus:

Für mobile Geräte kann man auch handheld nutzen. Aber das hat keine Auswirkungen auf das iPad, denn die Browser dort arbeiten als screen-Medientyp.

Scrollleisten

Das auf dem iPad sichtbare Scrollleisten fehlen ist grundsätzlich kein Nachteil. Ein iPad-Nutzer kennt sein Gerät bereits und weiß wie er zu blättern bzw. zu scrollen hat. Es gibt zwar JavaScript-Funktionen die dauerhaft sichtbare Scrollleisten einbinden. Diese sind aber nicht unbedingt sinnvoll. Wer es unbedingt in seiner Webseite haben möchte, sollte sich bei der JavaScript-Bibliothek jQuery nach iPad-Plugins umschauen.

Andere mobile Geräte

Dieser Fachbeitrag erläuterte die Möglichkeiten des iPads. Nahezu die selben Tipps kann man auch für andere mobile Geräte geben, die teils andere Systeme (z.B. Google Android) als Basis haben. Das Handling des Touchpads mit den Fingern ist bei allen heute quasi einheitlich, wenn man von Neuentwickelten Geräten wie den noch kommenden Tablet PCs wie z.B. von Microsoft mal absieht.

Android-basierte Geräte unterstützen jedoch anders als iPad und iPhone auch Flash. Wenn man eine Webseite für diese Geräte entwickelt, kann man somit durchaus Flash verwenden. Gleichzeitig verprellt man damit jedoch iPad-Nutzer, die Flashs nicht sehen können.

Zusammenfassung

Wie eingangs schon angedeutet gilt: wenn man seine Webseite nach gültigen Standards aufbaut und dabei sowohl die semantische Bedeutung von HTML-Elementen wie auch die Möglichkeiten von CSS zur Gestaltung verwendet, braucht man seine Webseite für iPad und die meisten anderen mobilen Geräte nicht weiter anpassen. Nur wenn man speziell für mobile Nutzer seine Webseite anbieten oder bestimmte visuelle Gimmicks in seine Webseite einbauen möchte, dann sollte man schauen was mit iPad möglich wäre.

Weiterführende Links: