Webtechnik

Webseiten für das iPhone optimieren

04. August 2009 von Mario

Tags:iPhone - Webseite optimieren - iPhone Icon

Das iPhone wird durch zahlreiche nützliche Anwendungen gerade für Designer und Programmierer immer interessanter.
Da der Nutzerkreis immer größer wird, kann man bei Webseiten mit relevanten Themen eine iPhone optimierte Version zur Verfügung stellen.
In diesem Artikel möchte ich euch erklären, wie man jede Webseite für Iphoneanwender wesentlich komfortabler bedienbar machen kann und dabei nicht mehr als zwei Stunden Arbeit hat.

Ohne langes Gerede fangen wir am besten direkt an.

Der Code

Zuerst erstellt man zusätzlich zu den normalen CSS Dateien ein Styleseet, das nur dann geladen werden soll, wenn die Seite mit einem iPhone aufgerufen wird. Ich habe sie mobile.css genannt.
Damit die optimierte Seite nur geladen wird, wenn sie auch wirklich von ein iPhone aufgerufen wird, fügt man zwischen <head> und </head> auf jeder Seite (falls ein Template mit einem CMS verwendet wird, nur in der index.php) folgenden Code ein:

Es werden trotzdem alle CSS Dateien geladen, also muss die mobile.css als letzte aufgerufen werden, damit alle vorherigen Attribute "überschrieben" werden. Darum fügt man den Code am besten direkt vor dem </head> Tag ein.

Da das iPhone eine maximale Bildschirmbreite (im Landscapemodus) von 480 Pixel hat, wird das Stylesheet mobile.css nur geladen, wenn der Bildschirm den Maßen des iPhones entspricht.
Im Beispiel wird die Seite auf eine Breite von 320px skaliert, was der gesamten Bildschirmbreite entspricht, wenn man das iPhone senkrecht hält.
Der User soll außerdem zoomen können. Das ist bei Seiten, die breiter als 320px sind nicht unbedingt notwendig. Aber bei 320px und weniger, sollte man die Skalierung erlauben, da das iPhone im Landscape Modus die Seite sonst nicht vergrößert.
Nun wird die Seite im iPhone skaliert angezeigt, und man muss nicht horizontal scrollen. Allerdings kann man die Schrift oft nur lesen, wenn man direkt heranzoomt. Wenn das für euch okay ist, seid ihr schon fertig. Falls nicht, geht die Optimierung weiter.

Überflüssige Boxen ausblenden und die Navigation verbessern

Jetzt kommt das neue Stylesheet zum Einsatz. In diesem Stylesheet, blendet man alle nicht unbedingt notwendigen Boxen und Divs mit dem Befehl display:none; aus. Die Seite wird nun immer schlanker. Außerdem sollte die Schriftgröße für eine sehr gute Lesbarkeit nicht weniger als 12px betragen.
Das Hauptproblem bildet hier die Navigation. Diese ist oft mit dem Finger relativ schlecht zu bedienen, da sie zu klein ist. Falls dies der Fall ist, kann man einfach eine zweite Navigation einbinden, die normalerweise ausgeblendet wird und nur bei einem iPhone angezeigt wird. Ein Beispiel hierfür gebe ich mit meiner eigenen Webseite.

iPhone webseite

Das Icon für den Homescreen

Jetzt fehlt nur noch das Icon für den Homescreen. Ich erstelle es mit Adobe Photoshop.
Zuerst erstellt man ein neues Projekt mit den Maßen 136x136 Pixel und einer Auflösung von 72 Pixel/Zoll.
Warum 136x136 Pixel? Das Icon wird auf dem Iphone nur mit einer Größe von 60x60 Pixel angezeigt. Bei meinen Tests habe ich aber mit dem größeren Bild ein schärferes Ergebnis erhalten.
Danach kann man ganz einfach ein eigenes Bild in der Arbeitsfläche designen. Man muss dabei eigentlich nichts beachten, außer dass die Konturen sehr scharf sein sollten, damit es auf dem iPhone nicht verschwommen aussieht.
Die runde Form und die Lichtspiegelung fügt das iPhone selbst ein.

Um das Icon in die Webseite einzubauen gibt es zwei Möglichkeiten. Die erste Möglichkeit ist:
Man speichert das Icon unter dem Namen apple-touch-icon.png im Rootverzeichnis der Webseite ab. Dann sollte es automatisch geladen werden.
Der sicherere und zweite Weg folgt auch sofort:
Man fügt im <head>...</head> Teil der Seite den Code

ein und speichert das Icon unter einem beliebigen Namen in einem beliebigen Verzeichnis.

Damit sollte auch deine Homepage für den großen iPhonesturm gewappnet sein. Bei Fragen oder Fehlern, bitte die Kommentarfunktion nutzen und bei Gefallen natürlich weitersagen.

Ps.: Wer kein iPhone hat, und Macuser ist, kann unter http://www.marketcircle.com/iphoney/ einen guten Simulator finden. Wer mit Windows unterwegs ist, findet unter http://iphonetester.com/ einen guten Simulator.

Kommentare

# MisterIronie 09.09.2010 | 19:57

Vielen Dank für Deine tolle Zusammenfassung zu den I-Phone-Möglichkeiten für Webseiten. Dein beschriebenes Phänomen mit 136px * 136px und 72ppi für das scharfe HomeScreenIcon liegt wahrscheinlich daran, dass das I-Pod 163ppi unterstützt, d.h. machst Du Dein Icon 60px * 60px und 163ppi groß, wirst Du wahrscheinlich auf das gleiche Ergebnis kommen: Ein scharfes Icon.

Zitieren

Kommentarliste aktualisieren
Alle Kommentare dieses Beitrages als RSS-Feed.

Kommentar schreiben

Suchen

Über diesen Blog

Ein herzliches Willkommen hier im Webszenario. Ich schreibe hier über sehenswerte und nützliche Webseiten, relevante Themen für Webdesigner, Blogger und Homepagebesitzer und über neue, oder verbesserte Zugänge zum World Wide Web. Die Profis unter euch haben es vielleicht schon gemerkt: Dieser Blog läuft nicht unter dem Wordpress CMS. Ich verwende Joomla und werde euch einige Tipps und Tutorials dazu schreiben.