Sinn und Zweck
Mit über 30. Millionen verkauften Exemplaren weltweit sind Benutzer des iPhones eine ernstzunehmende Zielgruppe. Obwohl bereits der Safari des iPhones sehr gute Ergebnisse liefert, so es macht für bestimmte Websites dennoch Sinn, extra für das IPhone optimierte Seiten anzubieten. Komplexe Websites wie News-Sites mit mehrspaltigen Layouts oder Seiten mit Flash-Applikationen können über das IPhone entweder gar nicht oder nur sehr schlecht betrachtet und genutzt werden. Dort macht es Sinn eine alternative, mobile Version der Seite anzubieten, die nur die Hauptfeatures enthält und durch ein gesondertes CSS auch an die geringere Auflösung des Displays angepasst ist.
Die Browserweiche
Nachdem ihr euch überlegt habt, welche Inhalte in der mobilen Version zur Verfügung stehen sollen müsst ihr natürlich erst einmal iPhone-User von Nicht-iPhone-Usern unterscheiden. Dafür gibt es verschiedene Möglichkeiten. Die meiner Meinung nach eleganteste ist durch ein kleines Script, welches lediglich das iPhone beeinflusst, diese Unterscheidung zu erreichen:
<script language=javascript>
<!--
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.replace("iphone.html");
}
-->
</script>
Dieses Script leitet automatisch alle iPhones auf eine andere Seite um, in diesem Fall zur iphone.html. Dort könnt ihr dann euche mobile Version anbieten.
Das Webkit
Jetzt müssen wir den mobilen Inhalt noch in das entsprechend angepasste Design bringen. Natürlich könnt ihr euch die Arbeit machen und ein eigenes CSS bauen, einfacher geht es jedoch mit dem iWebkit. Da das Webkit unter LGPL Lizenz steht und qualitativ hochwertige Ergebnisse liefert, kann ich es euch nur empfehlen. Es enthält ein bereits vollständig angepasstes CSS, mehrere Icons und ein Javascript.
Natürlich könnte ihr das ganze sehr einfach an euer eigenes Design anpassen. Als Grundlage ist das iWebkit aber wirklich zu empfehlen!
Icons
Wenn ihr eure mobile Seite möglichst nah am Apple Design gestalten wollt habe ich noch ein kleines Extra für euch. Auf dustinschau.com gibt es ein gutes PS Icon Template mit dem sich kinderleicht eigene Icons im Apple Style erstellen lassen
Eine Übersicht optimierter Websites gibt es übrigens auf iphonesites.de. Vielen Dank fürs Lesen und viel Spaß beim basteln…:D