iPhone Optimierung und »mobile web«
Mobiles Internet
Ebenso wie das Mediums "Internet" in den 90ern durch die Verbreitung von PCs immer wichtiger geworden ist, tritt heute der mobile Zugriff auf das Internet immer stärker in der Vordergrund. Auch wenn Apple mit dem iPhone nur einen recht kleinen Marktanteil an allen Mobiltelefonen hat, dominiert es doch zusammen mit Google Android den mobilen Internettraffic.
Dies liegt vor allem daran, dass man am iPhone und unter Android dank Webkit eine recht gute Darstellung von normalen, nicht für die mobile Darstellung optimierten Internetseiten hat — was unter anderen mobilen Browsern nur sehr schlecht gelöst war.
depage.net in der mobilen Darstellung im iPhone
Da das iPhone bisher noch das wichtigste bzw. bekannteste Mobile Endgerät ist, haben wir uns entschieden, depage.net und depagecms.net für die Darstellung am iPhone zu optimieren.
Barrierefreiheit und Layouts auf CSS-Basis
Seit einigen Jahren setzen wir Webseiten-Layouts möglichst barrierefrei bzw. barrierearm um. Zum einen ist die Seite natürlich besser zugreifbar, zum anderen macht dies die Verwaltung der Layouts, Korrekturen, Updates etc. sehr viel einfacher.
Innerhalb von depage::cms benutzen wir meist eine Kombination aus 4 verschiedenen Stylesheets:
Ein globales Stylesheet (global.css ), in dem alle übergreifenden Definition, wie Schriftdefinitionen, allgemeine Parameter etc. vorgenommen werden.
Ein Stylesheet für die Farbdefinitionen, da dieses innerhalb von depage::cms einmal pro Farbschema generiert wird (color_%farbname%.css ).
Ein Stylesheet für die Bildschirmdarstellung (screen.css mit media="screen" ).
Und ein Stylesheet für den Ausdruck (print.css mit media="print" ), in dem beispielsweise die Navigation ausgeblendet, die Farben und Hintergrundfarben angepasst und das Layout für den Ausdruck auf A4 bzw. Letter angepasst werden.
Für die Darstellung am iPhone kommt nun noch ein zusätzliches Stylesheet dazu:
Das Stylesheet für das iPhone (mobile.css ).
Die Einbindung des Stylesheets
Das Stylesheet für das iPhone wird mit einem speziellen media-Typ eingebunden:
<link
rel="stylesheet"
type="text/css"
media="only screen and (max-device-width: 480px)"
href="lib/global/css/mobile.css">
Der Media-Typ ist hier: only screen and (max-device-width: 480px).
Das heißt, nur für die Bildschirmdarstellung auf Geräten, die eine maximale Bildschirmbreite von 480px haben.
Da allerdings ältere Internet Explorer (sprich Version 6 und 7) diesen Media-Typ noch nicht verstehen, muss dieses Stylesheet vor diesen Browsern "versteckt" werden. Dies kann man mit "Conditional Comments" machen:
<!--[if !IE]> -->
<link
rel="stylesheet"
type="text/css"
media="only screen and (max-device-width: 480px)"
href="lib/global/css/mobile.css">
<!--<![endif]-->
Es gibt noch eine zusätzliche Angabe im Head-Element der HTML-Datei, die man vornehmen kann, um die Darstellung am iPhone festzulegen:
<meta name="viewport" content="width=480" />
Damit wird die anfängliche Viewport am iPhone auf die angegebene Breite (im Beispiel 480px) eingestellt.
Ich muss allerdings sagen, dass ich die Syntax hierfür nicht mag — dies ist eigentlich eine Sache der Präsentation (CSS) und nicht des Markups (HTML). Insofern haben wir für depage zunächst versucht, die Angabe zu umgehen, indem wir die Skalierung der Seite im CSS vergrößert haben, so dass der gleiche Effekt innerhalb des Standardviewports des iPhones (980px) erreicht wird. Dies funktioniert deshalb, da wir alle Größen innerhalb der Stylesheets in em angeben anstatt in px , so dass alle Maßangaben automatischen mit der Skalierung des Body-Tags angepasst werden.
Allerdings mußten wir feststellen, dass sich Opera-Mobile damit schwer tut, so dass wir die Angabe dann doch noch ergänzen mußten, um eine einheitliche Darstellung zu bekommen.
Update nach einer Reihe von Tests: Um aber auch für Android und Opera Mobile eine bessere Anfangsskalierung zu bekommen, ist es besser folgende Angabe zu verwenden — so skaliert der Viewport auf die Gerätebreite und bleibt dabei ungezoomt:
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
Danach haben wir noch die automatische Textskalierung des iPhones deaktiviert, da wir die Textgrößen im Stylesheet ja konkret festlegen werden:
/* {{{ global */
html {
-webkit-text-size-adjust: none;
}
/* }}} */
Die Umsetzung
Der Umsetzung der mobilen Version lag kein "offizieller" Entwurf zu Grunde, der als Stylesheet umgesetzt wurde.
Im Gegenteil: Auf Basis des normalen Layouts der Seite wurden Stück für Stück einzelne Styles angepasst, abgewandelt und optimiert, so dass die Website auf dem kleinen Bildschirm gut lesbar ist und sich gut über den Touchscreen bedienen läßt.
Dank des iPhone Simulators, der dem Apple iPhone SDK beiliegt, ist der Test recht schnell und einfach, ohne dass man dafür unbedingt ein iPhone oder iPod Touch besitzen muss.
Allerdings sollte man nach der Optimierung das Ganze auch auf einem realen Gerät testen, da die Performance im Simulator eine andere ist — Vor allem aber, da sich die Handhabung mit dem Finger natürlich von der mit der Maus im Simulator erheblich unterscheidet.
Anpassen des Layouts auf das iPhone-Display
Als erstes haben wir das Layout in das iPhone-Display eingepasst und die Schriftgrößen so verändert, dass eine gute Lesbarkeit gewährleistet ist.
Das unangepasste Layout
Anpassung der Schriftgrößen
Anpassung der Spaltenbreiten
Die richtige Basis zum Lesen ohne horizontales Scrolling
Überarbeitung der Navigation
Danach haben wir die Navigation überarbeitet. Da die Navigationstiefe auf depage.net recht niedrig ist, konnten alle Navigationpunkte auf einmal dargestellt werden.
Unangepasste Navigation
Farbanpassung
"Inline"-Navigation
Erhöhung der Zeilenhöhe, zu besseren Bedienbarkeit
Neudefinition der Startseite für das iPhone
Zunächst war für die Startseite geplant, die Navigation mit den Themenbereichen zu belassen. Dies wurde aber aus mehreren Gründen komplett fallengelassen:
Durch die in den Vordergrund gehobene Hauptnavigation würden sich die Themenbereiche direkt untereinander wiederholen.
Auf der normalen Startseite werden die Zusatztexte zu den Themenbereichen auf MouseOver sichtbar. Allerdings gibt es mit dem TouchScreen kein Hover-Zustand bzw. dieser wird erst mit einem Tap auf das jeweilige Element sichtbar. Das ist für diesen Zweck aber äußerst schlecht geeignet.
Zudem erwiesen sich die Teaser-Elemente am iPhone als das bessere Navigationselement.
Die Teaser für die einzelnen Blogeinträge sind nun das Hauptelement auf der mobilen Startseite.
Anpassung der Startseite
Test der Zusatztexte der Startseite
Anpassung der Teaser-Elemente
Das fertige Layout auf depage.net
Fazit
Die Optimierung von Webseiten für das iPhone ist ingesamt sehr viel angenehmer als die Umsetzung für normale Browser. Das liegt aber vor allem daran, dass WebKit eines der modernsten Rendering-Engines ist und insofern auch recht aktuelle CSS-Eigenschaften beachtet.
Zudem ist es wahnsinnig angenehm für nur ein Gerät und einen Browser zu entwickeln, so dass man sich die vielfachen Tests sparen kann, die man normalerweise vornehmen muss (Internet Explorer 6, 7, 8 und evtl. noch 9 preview, Firefox 2, 3, 3.5 und 3.6, Safari 3 und 4, Chrome 4 und 5 und Opera 10.*).
Allerdings wird sich der mobile Markt in Zukunft noch weiter öffnen, so dass dort ebenfalls erweiterte Tests nötig werden — und das trotz der heldenhaften HTML5-Bestrebungen.
Als nächstes stehen bei uns also die Android-Tests auf der Tagesordnung. Allerdings habe ich die Hoffnung, dass sich diese dank WebKit als nicht so aufwendig erweisen... ;-)
.third div {
position: relative;
top: 0;
left: 0;
border-right-width: 1px;
border-right-style: solid;
border-color: #000000;
width: 66.6666%;
height: 100%;
}
.third div:hover {
border-color: #ff0000;
}
.staircase div {
position: relative;
top: 5em;
left: 5em;
border-width: 1px;
border-style: solid;
border-color: #000000;
width: 5em;
height: 5em;
}
.staircase div:hover {
border-color: #ff0000;
}
.rotation div {
position: relative;
top: 50%;
left: 45%;
border-width: 1px;
border-style: solid;
border-color: #000000;
background: #dddddd;
width: 5em;
height: 5em;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
}
.rotation div div {
top: 5em;
left: 5em;
}
.rotation div:hover {
border-color: #ff0000;
}
.rotation2 div {
position: relative;
top: 50%;
left: -10%;
border-width: 1px;
border-style: solid;
border-color: #000000;
background: #dddddd;
width: 72em;
height: 12em;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-border-radius: 6em;
-moz-border-radius: 6em;
-o-border-radius: 6em;
border-radius: 6em;
}
.rotation2 div div {
top: 5em;
left: 5em;
}
.rotation2 div:hover {
border-color: #ff0000;
}
.rotation3 div {
position: relative;
top: 50%;
left: -10%;
border-width: 1px;
border-style: solid;
border-color: #000000;
background: #dddddd;
width: 72em;
height: 2em;
-webkit-transform: rotate(-50deg);
-moz-transform: rotate(-50deg);
-o-transform: rotate(-50deg);
transform: rotate(-50deg);
-webkit-border-radius: 6em;
-moz-border-radius: 6em;
-o-border-radius: 6em;
border-radius: 6em;
}
.rotation3 div div {
top: 5em;
left: 5em;
}
.rotation3 div:hover {
border-color: #ff0000;
}
