Websites für das iPhone erstellen und optimieren
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.
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!!
Wer nicht im Besitz eines iPhones ist, kann sich mit folgenden Links eine iPhone-Simulation herunterladen:
- Für Mac-User: www.marketcircle.com/iphoney/
- Für Windows-Safari-User: iphonetester.com
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 40×40 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.
Themenverwandte Artikel:
Folgende Beiträge könnten dich ebenfalls interessieren.
Welcome to Kulturbanause, the private blog & portfolio of
24. September 2008, 07:36 Uhr
Mein Blog ist auch so für das iPhone / iPodtouch optimiert, mittels einem Plugin. Ist dann zwar nicht mehr das eigentliche WP-Theme zu sehen, aber so für’s erste reicht es vollkommen aus finde ich. ;)
Deine Anleitung ist dann schon eher für die, welche mehr wollen, also die eigenen Website/Blog in klein für das mobile Endgerät. Werde ich mich mal mit befassen, wenn ich in puncto Mobieles Surfen mehr machen werde, also irgendwann nächstes Jahr dann. Bis dahin Bookmarke ich mir deinen Artikel. :)
25. September 2008, 09:07 Uhr
Danke, danke, danke!
Geil, geil, geil!
Find ich toll, werd ich mit meiner neuen Seite auch machen.
25. September 2008, 09:23 Uhr
Zur Info: Ich hatte einen Markup-Fehler im Code-Snippet des 2. Meta-Tags. Sowohl in meinem eigenen als auch im hier dargestellten Quellcode. Dank meines treuen Lesers Chris (www.chriswalter.ch) ist das jetzt jedoch korrigiert.
Sollte der Code schon verwendet worden sein, also bitte prüfen.
Danke Chris!
25. September 2008, 23:20 Uhr
In dieser Richtung, mobiles Internet, wollte ich mich auch langsam wenden, auch aus dem Grund da neues Handy ansteht :).
Chris … was muss ich sehen, du liest hier die ganze Zeit und ich weiss nichts davon, dabei lese ich hier auch regelmässig xD :D.
Gruss Phil ^^
8. Oktober 2008, 10:47 Uhr
Gibt es auch eine Möglichkeit ein mp4 zu verlinken?
8. Oktober 2008, 16:56 Uhr
@Ben: Ja, gibt es wohl. Ich habe es selbst noch nicht ausprobiert, aber im oben hinterlegten Apple-PDF auf Seite 23 findest du die Auflistung der unterstützen Audio-Formate.
Ich denke es reicht, wenn du dem Link einen entsprechenden MIME-Type verpasst. Dieser wäre “Content-Type: audio/mp4″. Dann sollte das iPhone wissen was für eine Datei es ist und die File automatisch abspielen.
20. Oktober 2008, 12:27 Uhr
Hallo iPhone-Webdesigner.
Kann mir jemand sagen, wie ich einen Weblink auf eine Adresse so setze, dass das iPhone dazu die GoogleMaps-Applikation öffnet, anstatt “normal” zu linken? Ich habe den Beitrag mit den VCards mal angeschaut, aber ich werde nicht schlau draus.
Mein Ausgangsbeispiel ist der folgende Code
Restaurants im 3. Bezirk
Restaurant ABC, Hauptstrasse 2 (Google Maps)
…
20. Oktober 2008, 22:15 Uhr
@Beat: Also, da die oben hinterlegt Apple PDF offensichtlich nicht mehr da liegt wo sie mal war hab ich nur eine alternative Lösung (sofern in der Apple PDF eine bessere stand):
1. Gib die gewünschte Adresse auf Google Maps ein
2. Oben rechts direkt über der Karte findest du den Punk “Link”. Klick da drauf und kopiere den oberen der beiden Links
3. Verlinke nun deine Adresse mit dieser URL
4. Wenn du nun im Browser (Desktop oder iPhone) den Adress-Link anklickst oder tippst, dann öffnet sich automatisch Google Maps (oder auf dem iPhone die Application) und die Adresse wird angezeigt.
War zwar nicht die Methode die ich im Hinterkopf hatte, klappt aber auch. Valide ist es auch. Kannste dir hier auf der Seite anschauen. Ich habe das unter “Contact” und “Impressum” mal so eingerichtet.
21. Oktober 2008, 16:56 Uhr
Hallo Jonas. Vielen Dank für die Hilfe. Anhand deines Beispiels unter Kontakt konnte ich meine Seite “debuggen”.
Die Adressdaten in meiner Datenbank waren in Latin-1 gespeichert. Diese muss ich jeweils in utf8 umwandeln, damit das iPhone diese in der Google-Maps-Applikation öffnet. Für Google-Maps benutze ich nur den Parameter “q”, alle anderen sind nicht unbedingt notwendig.
Kurz in PHP:
Adresse: <?= $row['addr']); ?> (<a href=”http://maps.google.com/maps?q=<?= utf8_encode($row['addr'] . ‘,+’ . $row['city']); ?>,+Switzerland”>Google Maps</a>)
22. Oktober 2008, 22:50 Uhr
[...] handelte es sich lediglich um einzelne Artikel. Nun habe ich vor kurzem einen Post über die iPhone-Optimierung von Websites verfasst und im selben Atemzug meine Seite entsprechend umgebaut (nein ich bin noch nicht fertig [...]
1. Dezember 2008, 14:02 Uhr
Hi,
Artikel hat weitergeholfen – super gut erklärt, jetzt kann es ja losgehen mit der Optimierung für´s iphone. Noch keine Fragen, Anregungen, Kritiken – aber die kommen sicherlich. – Gruß Laufmasche -
8. Dezember 2008, 23:32 Uhr
[...] http://www.kulturbanause.de/?p=204 [...]
17. März 2009, 16:26 Uhr
hey habe da mal ne frage bin grade auch dabei eine webseite fürs iphone zu optimieren
wie ist das denn mit iframes kann der browser vom iphone diese darstellen ?
17. März 2009, 18:07 Uhr
@Andy: Ich hab das grad mal mit dem GoogleMaps-iFrame getestet. Der funktioniert. Sollte also generell kein Problem sein.
2. April 2009, 12:17 Uhr
Hallo zusammen
ist es möglich, in einem Formular in einem E-Mailtextfeld das iPhone anzuweisen, dass es die Tastatur für E-Mail-Eingaben anzeigt? Wie wenn ich in einem E-Mail die Mailadresse eintrage, wird eine Tastatur angezeigt, wo @ und . schon unter den Buchstaben angezeigt wird.
PS: Der Link zu dem Apple-PDF zum Thema iPhone-Optimierung ist nicht mehr aktuell. Habe den neuen leider nicht gefunden…
Gruss Dani
3. April 2009, 12:49 Uhr
Hi Jonas,
ich habe gerade Deine Seite entdeckt und dass Du ja hier gleich „um die Ecke“ tätig bist. Danke für Deinen hilfreichen Artikel.
Hättest Du auch einen Tipp, wie man nicht nur das css anspricht, sondern auch noch andere Seiten für die iPhones dieser Welt ansprechen kann?
Gruß vom Knut
9. April 2009, 20:14 Uhr
@Dani: Besten Dank für deine E-Mail. Ich habe den Link zur Apple-PDF wiederbelebt.
28. April 2009, 15:00 Uhr
[...] fr die Webseiten-Optimierung fs’s IPhone. Und diese Seite finde ich auch ganz Klasse!!!! –> CSS Media Attribut zur Ansprache von mobilen Endgerten < — Normalerweise wird Handys, PDAs, Smartphones etc. mittels dem media=handheld-Attribut [...]
21. Mai 2009, 12:48 Uhr
Hallo
Danke für Deinen tollen Beitrag. Da Du auch WordPress nutzt, habe ich eine Frage.
Ich habe auf meinem Blog ein Stardart-Theme und jetzt auch ein iPhone-Theme erstellt. Leider Blicke ich nicht durch, wie ich das ganze Theme bei einem iPhone-Abruf ändern kann. Bei Deiner Anleitung wird ja “nur” das CSS gewechselt. Oder braucht es dafür extra ein Plugin?
21. Mai 2009, 16:03 Uhr
@Lukas: Du kannst natürlich mit PHP oder htaccess (soweit ich weiss) eine Umleitung einrichten, dass für mobile Endgeräte eine andere Seite angesurft wird. Das ist aber hier nicht das Thema. Es geht doch gerade darum mit CSS die Seite für verschiedene Endgeräte zu optimieren.
30. Juni 2009, 11:34 Uhr
sehr hilfreicher artikel…danke! :)
19. Januar 2010, 23:25 Uhr
hallo zusammen
mehr oder weniger klappt das mit der darstellung, dennoch: ich habe immer einen lästigen weissen rand rechts, das heisst, selbst wenn ich die tabelle 100% breit mache, hat es rechts noch einen weissen rest. beim starten ist das dargestellte schön platziert, wenn man aber nach links scrollt, verschwindet ein teil des inhaltes unter dem linken rand. ich weiss nicht mehr, wo ich dieses wackeln nach links und rechts wegbekomme. wo stelle ich noch ein? (unten: meine angewendeten codes) um tipps wäre ich froh.
19. Januar 2010, 23:32 Uhr
@phone mac: Link?
4. Februar 2010, 12:47 Uhr
[...] http://www.kulturbanause.de/2008/09/websites-fur-das-iphone-erstellen-und-optimieren/ [...]
15. Februar 2010, 19:38 Uhr
Hallo leute,
ich spiel mich zur Zeit auch ein wenig mit der Thematik, hab allerdings noch ein paar kleine Probleme. Wie oben schon beschrieben lädt das iphone die vorhergehenden Styles mit. Kann ich das nicht irgendwie unterbinden? z.b zieht es mir die ganzen float Befehle mit und formatiert den iphone.css doch anders als ich es eigenltich will. So wie es aussieht ergänzt es die iphone.css so das die fehlenden Befehle wieder aus der Screen.css gezogen werden und doch ähnlich gestaltet werden.
Beispiel:
***screen.css ***
#header {
width: 989px;
height: 194px;
background-image:url(header.jpg);
margin-top:10px;
background-color:#F60;
}
***iphone.css ***
#header {
width: 200px;
height: 20px;
margin-top:10px;
background-color:#F60;
}
In diesem Fall werden zwar die Maße geändert da sie anscheinend überschrieben werden die fehlende Backgroundgrafik wird allerdings ergänzt.
Vielleicht weis bei euch jemand Rat (-;
Gruß Chris
7. März 2010, 11:19 Uhr
[...] man seine Website für das iPhone vorbereitet und eine gute Seite auf Deutsch dafür + noch eine. Brilliant-web-design-tutorials und dazu 25 neue [...]
14. April 2010, 22:41 Uhr
Liebe gruesse aus Bayern. Wriklich schicker und vorallem Informativer Blog. Weiter so! :-)