Websites für das iPhone erstellen und optimieren

iphone-optimierte-website

Das iPhone stellt das "echte" Internet dar, soviel wissen wir schon aus der Werbung. Doch es gibt auch diverse Websites die extra für das iPhone geschrieben oder zumindest optimiert wurden.
Experten und Web-Pioniere sind sich einig: Die Zukunft des Internets ist mobil. Höchste Zeit also sich mit diesem Thema auseinander zu setzen. In diesem Artikel erläutere ich einige Funktionen hinsichtlich des iPhones.

Web Design mit Sass

Eine Einführung in moderne Stylesheets.

In unserem Shop kaufen
ePub, Mobi + PDF

Bei Amazon kaufen
Kindle-Version

Dieser Artikel ist aus dem Jahr 2008 und wurde inzwischen durch andere Beiträge ergänzt. Wenn Ihr lesen möchtet wie Ihr eine iPhone und iPad-optimierte Version Eurer Website mit CSS3 erstellt so wechselt bitte zu folgendem Tutorial: iPad und iPhone optimierte Websites mit CSS3

Gleiche Lady, anderes Kleid

Grundvoraussetzung für "Handy"-optimierte Internetseiten ist semantischer XHTML-Code sowie eine vollständige Trennung von Content und Design mittels XHTML und CSS. Das Outfit der Seite wird komplett über CSS angesprochen, die Inhalte (XHTML) bleiben unverändert. Quellen zu diesem Thema gibt es genug, daher gehe ich hier nicht weiter darauf ein.

CSS-Media-Attribut zur Ansprache von mobilen Endgeräten?

Normalerweise wird Handys, PDAs, Smartphones etc. mittels dem "media='handheld'"-Attribut eine optimierte CSS-Datei zugewiesen. Da sich das iPhone jedoch nicht als Handy bei der Seite anmeldet, sondern als Computer hilft uns dieser Weg hier nicht viel weiter. die Lösung heißt CSS3!
Der Browser des iPhones ist Safari 3 Mobile. Safari Mobile unterstützt dank Webkit viele CSS3-Attribute und so kann das Phone schon im HTML-Head der Seite direkt angesprochen werden:

<link 
 rel="stylesheet" 
 media="only screen and (max-device-width: 480px)" 
 href="link_to_iphone-optimized_css_file" type="text/css" 
/> 

Wir legen also eine neue CSS-Datei an, verlinken diese entsprechend und optimieren sie hinsichtlich des iPhone-Screens. Wichtig an dieser Stelle! Das iPhone lädt ALLE eingebetteten Stylesheets: Die optimierte CSS-Datei muss also als letztes im HTML-Head auftauchen!

Bildschirmabmessungen- und Umrechnungen des iPhones

Das iPhone stellt Internetseiten für gewöhnlich im Hochformat dar. Dabei wird die dargestellte Seite in der horizontalen oberhalb von 980 Pixeln Breite (1024er-Optimierung) abgeschnitten und der entsprechende Teil von 980 Pixeln auf 320 Pixel geschrumpft.
Dreht man das Telefon so wird der "Landscape-Mode" aktiviert. Die Seite kippt und passt sich der horizontalen Darstellung (480 Pixel Breite) an. Die Auflösung beträgt immer 160 dpi.

Die Pixelabmessungen des iPhone-Screens betragen also:

  • Im Hochformat: 320px x 356px
  • Im Querformat: 480px x 208px

Durch den oben beschriebenen CSS3-Code-Snippet weisen wir der Seite ein maximale Breite von 480 Pixeln zu.

Und wenn die Seite schmaler oder breiter als 980 Pixel ist?

Das iPhone kennt den sog. Viewport. Über eine weitere META-Zeile im HTML-Head übermitteln wir die Darstellungsbreite:

<meta 
 name="viewport" 
 content="width=320" 
/>

In diesem Fall wird davon ausgegangen, dass der iPhone-User das Handy senkrecht hält (320px Breite) wenn er die Seite aufruft. Zur Wiederholung: Das iPhone "nimmt" sich also die Seite und schneidet alles was sich außerhalb von 980 Pixeln Breite befindet ab. Die übrig gebliebenen 980 Pixel werden auf 320 Pixel heruntergerechnet (vorausgesetzt das iPhone wird senkrecht gehalten). Der mittels META-Befehl übergebene Wert bezieht sich nun auf die geschrumpften 320 Pixel (100% der iPhone-Darstellungsbreite).

Den iPhone-Zoom beeinflussen

Das iPhone kann Websites heran- oder herauszoomen. Dieses Verhalten kann ebenfalls über den Viewport beeinflusst werden. Hier ein Beispiel von meiner Seite:

<meta name = "viewport" content = "
 width = 1100,  <!-- Die Seite soll auf 1100 Pixel skaliert werden -->
 user-scalable = yes,  <!-- Darf der User zoomen? yes/no -->
 initial-scale = 0.4,  <!-- Minimaler Skalierungsfaktor -->
 maximum-scale = 1 <!-- Maximaler Skalierungsfaktor. Hier 100% = scharfe Pixeldarstellung -->
"/>

Weitere Einstellungsmöglichkeiten über den Viewport findet Ihr am Ende dieses Artikels als PDF-Download.

Texte für das iPhone optimieren

Texte sollten mindestens eine Schriftgröße von 18 Pixeln haben. So wird auch ohne zoomen eine optimale Lesbarkeit garantiert.

Links für das iPhone optimieren

Das iPhone hat einen Touch-Screen. Logische aber oft unbeachtete Schlussfolgerung ist, dass keine :hover-Zustände möglich sind. Das gilt übrigens für jeden Touch-Screen.
Ergo muss die Webseite so optimiert werden, dass Links auch ohne :hover eindeutig als solche zu erkennen sind. Bei der iPhone-Version meiner Seite habe ich demzufolge alle Links unterstrichen und die :hover-Zustände bei Überschriften etc. entfernt.
Wird ein Link auf dem iPhone geklickt/getippt so wird dieser standardmäßig grau umrahmt. Diese Rahmenfarbe kann mittels Webkit und CSS3 angepasst werden:

a {
 -webkit-tap-highlight-color:rgba(200,0,0,0.4); /* R,G.B,Alpha */
}

iPhone-Applications verlinken

Viele Informationen einer Website schreien beinahe danach direkt mit Handy-Funktionen verknüpft zu werden. So können Telefonnummern per Fingertipp direkt angerufen werden; ein Klick auf die E-Mail öffnet das Mail-Programm des iPhones und Adressen werden in Google Maps angezeigt.
Um diese Funktionen zu verwenden, müssen (in diesem Blog bereits mehrfach angesprochene) Mikroformate verwendet werden. Diese "verwandeln" simple Zeichenketten in - für den Browser - verständliche Informationen.

Mehr zu Mikroformaten findet Ihr in meinen älteren Beiträgen:

Formularfelder für das iPhone optimieren

Wird über das iPhone ein Formular angeklickt, so zoomt das Gerät an das Input-Feld heran und öffnet automatisch die Touch-Screen-Tastatur. Somit verringert sich der sichtbare Bereich auf mickrige 320 x 140 Pixel. Demzufolge sollten Formulare so angepasst werden, dass sie in dieser Darstellungsbreite vollständig zu erfassen sind. Submit-Buttons sollten mindestens 40x40 Pixel betragen um eine problemlose Interaktion zu ermöglichen.

Zusätzlich kann dem Input-Feld ein Befehl übergeben werden der die automatische Rechtschreibkorrektur bzw. Großschreibhilfe des iPhones aktiviert oder deaktiviert. Der Codefetzen sollte selbsterklärend sein:

<input autocorrect = "on"/>
<input autocorrect = "off"/>

<input autocapitalize = "on"/>
<input autocapitalize = "off"/>

WebClip-Icon hinzufügen

Internetseiten lassen sich auf dem iPhone per Favoriten-Funktion direkt auf den Home-Screen befördern. Um dort auch ein hübsches Icon zu präsentieren sollte der Webdesigner ein sog. WebClip-Icon hinterlegen. Wie das geht erkläre ich in einem früheren Artikel.

Fazit

Das iPhone kann das ganz normale Internet darstellen. Doch trotzdem können Websites für das Endgerät noch optimiert werden. Ob und in welchem Umfang dies geschieht ist jedem selbst überlassen. Ich für meinen Teil habe mittlerweile fast 100% meiner Desktop-Internet-Anwendungen auf das iPhone übertragen und freue mich über jede Seite wo der Webmaster sich die Mühe gemacht hat mir eine besonders einfache Informationsaufnahme zu ermöglichen.

An dieser Stelle möchte ich ausdrücklich erwähnen, dass ich meine eigene Seite größtenteils für das iPhone umgeschrieben habe. Eine vollständige Optimierung ist mir momentan aus Zeitgründen nicht möglich. Also nicht motzen :D

Mobile Zukunft?

Hat Euch dieser Artikel weitergeholfen? Wie steht Ihr zum Thema mobiles Internet? Nutzt Ihr das Web vom Handy aus und wenn in welcher Form?
Ich freue mich über zahlreiche Erfahrungsberichte!

Als letztes verweise ich noch auf die Apple-PDF zum Thema iPhone-Optimierung.