FAQ: Websites für das iPhone gestalten

von Timo Wirth & Stephan Heinen / 17. November 2007 / Tags: , , , ,

iPhonesNicht nur die User Experience ist zukunftweisend. Das iPhone ist auch eine kleine Revolution in der Geschichte des mobilen Webdesigns, denn es setzt auf Webstandards und CSS3. Wir beantworten 16 Fragen für alle Webdesigner, die ihre erste Website für das iPhone gestalten.

Wie stellt das iPhone Websites dar? Was passiert, wenn ich etwa www.nytimes.com eingebe?

Das iPhone nimmt die Website und schrumpft sie. Die Inhalte werden nicht – wie bei vielen anderen mobilen Endgeräten – linearisiert oder vereinfacht. Man sieht das Original-Layout in einer Art “Totalen”. Das bedeutet: Zum Lesen und Klicken muss man erst reinzoomen, was mit dem Daumen und Zeigefinger leicht funktioniert und Spaß macht.

Kann ich testen, wie meine Website auf dem iPhone aussieht?

Das Programm iPhoney simuliert das iPhone auf dem Mac. Für PC-Nutzer gibt es den Online-Emulator iPhone-Tester, der aber lange nicht so gut ist wie iPhoney.

Welcher Browser läuft auf dem iPhone?

Safari 3 Mobile, laut Apple der “most advanced web browser on a portable device”. Neben dem Marketing-Blabla heißt das: Für das iPhone entwickeln, heißt in der Zukunft entwickeln: Man kann CSS3 verwenden und es gibt weit und breit keinen Internet Explorer.

Wie groß ist die sichtbare Fläche auf einem iPhone?

Das können wir kurz & schnell abhaken.
Im Hochformat: 320 x 356 Pixel.
Im Querformat: 480 x 208 Pixel.
Wenn man das iPhone dreht (wie eine PSP hält), drehen sich die Inhalte mit.

Wie zoomt das iPhone?

Wenn das iPhone eine Webseite öffnet, nimmt es einen 980 Pixel breiten Ausschnitt vom Original-Layout der Seite. Dieser Ausschnitt wird auf eine Breite von 320 Pixeln geschrumpft. Ist die Website für 800×600 optimiert (und somit kleiner als 980px), schrumpft das iPhone diese (z.B. von 760px) auf 251px und zeigt einen 69px breiten weißen Rand. Websites, die breiter als 980px sind, werden in der rausgezoomten Ansicht abgeschnitten und müssen horizontal gescrollt werden. Bei einem fluiden Layout wird die Website nicht geschrumpft, sondern ohne Zoom schlicht auf 320px zusammen geschoben.

Kann ich dem iPhone eigene Stylesheets zuweisen?

Eigentlich nicht, denn das iPhone stellt ja laut Fernsehspot das “wirkliche” Internet dar. Da Safari 3 jedoch CSS3 unterstützt, können wir media queries verwenden. Mit media queries können ausgabegerätspezifische Eigenschaften angesprochen werden. Das iPhone ist ein Gerät, welches einen Bildschirm hat, der im Querformat 480 Pixel breit ist. Diese Eigenschaft wird mit der folgenden Angabe im Head angesprochen:

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

Ist das iPhone kein Handheld? Kann ich ihm nicht einfach mit <link rel=”stylesheet” media=”handheld”> ein eigenes Design zuweisen?

Nein, das iPhone gibt sich nicht als Handheld aus, sondern als Computer. Das iPhone interpretiert das Stylesheet media=”screen” und zeigt die Website wie auf einem herkömmlichen Bildschirm. Dies wird jedoch zum Problem, wenn man ein spezielles Design für das Lesen am kleinen Bildschirm und zur Bedienung mit den Fingern ausliefern will. Wie das trotzdem geht, siehe oben „Kann ich dem iPhone eigene Stylesheets zuweisen?“.

Ich habe meine Website mit einem eigenen iPhone-Stylesheet so optimiert, dass sie hervorragend auf den iPhone-Bildschirm passt. Wie kann ich dem iPhone mitteilen, dass es nicht meine Website nicht schrumpft (rauszoomt)?

Egal, wie breit man das Layout definiert (z.B. 100% oder 320px), das iPhone zoomt standardmäßig raus oder schiebt die Website zusammen (siehe “Wie zoomt das iPhone?”). Aber auch hier gibt es eine Möglichkeit, das iPhone anzusteuern und zu kontrollieren. Der iPhone-Browser kennt als Darstellungsgröße den so genannten Viewport. Im Head können entsprechende Angaben gemacht werden. Am einfachsten geht es so:

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

So zeigt das iPhone die Website im Hochformat ohne Zoom. Vorher sollte die Website natürlich speziell für iPhone optimiert werden, damit mehr als ein riesengroßes Logo angezeigt wird. Über das Attribut “viewport” kann vieles eingestellt werden — nicht alles davon macht Sinn.

Wenn ich ein herkömmliches Stylesheet (media=”screen”) und ein iPhone-Stylesheet (media=”only screen and (max-device-width: 480px)”) angebe, lädt das iPhone dann beide?

Ja, Safari Mobile lädt beide Stylesheets. Aber welches Stylesheet gewinnt? Es kommt auf die Reihenfolge an. Daher sollte immer zuerst das Stylesheet für den Desktop-Browser angeben werden, dann das für das iPhone.

CSS3? Wow! Was geht, was geht nicht?

Der iPhone-Browser basiert auf Safari 3. Deswegen wird richtig viel CSS3 unterstützt. Einen Überblick gibt John Allsopp: Browser support for CSS3 properties. Beim Testen sollte man sich jedoch nicht auf Safari 3 verlassen, da die Mobile-Version etwas weniger CSS3 kann als die Desktop-Version.

Was macht -webkit im CSS?

Das Präfix -webkit ist so etwas wie -moz. Damit macht sich das iPhone einige CSS-Angaben zunutze, die noch nicht offiziell sind, um bestimmte Effekte darzustellen. Einen Überblick gibt wieder John Allsopp: Browser support for CSS3 properties.

Wie kann ich bestimmte iPhone-Funktionen integrieren, z.B. Anruf, Adressbuch, Kalender, Google-Map?

Das Zauberwort lautet Microformats. Ist zum Beispiel auf einer Website eine Telefonnummer per Microformats (class=“tel“) als solche markiert, kann die Nummer direkt angerufen werden. Das iPhone verwendet somit kein Apple-eigenes Format, sondern setzt auf standardisierte Klassennamen, die auch andere Geräte, Websites oder Applikationen nutzen können.

Unterstützt das iPhone die Pseudoklassen active, hover, visited?

Safari Mobile unterstützt bisher nur a:active, aber selbst das sieht nicht sonderlich gut aus. Heißt: derzeit einfach ignorieren.

Usability und Lesbarkeit: Wie groß sollten Schriften und Klickflächen sein?

Wer Websites für das iPhone erstellt, sollte eines beachten: es gibt keinen filigranen Mauszeiger. Jeder ist auf seine mehr oder minder schlanken Fingerkuppen angewiesen. Oft bietet sich sogar der Daumen an. Die Klickfläche sollte also entsprechend groß angelegt werden. Ab einer Größe von 40px mal 40px passt der Finger gut drauf. Auch für die Schrift gilt: Größer ist besser. Für den Fließtext oder für Listen sollte man keine Schriften unter 20px verwenden. Am besten lesbar ist Helvetica, die verwendet Apple als iPhone-Standard-Schrift.

Ist eine Mindest-Schriftgröße von 20px nicht ziemlich groß?

Der iPhone-Bildschirm hat 160dpi (statt 72dpi). Somit werden Schriften etwas kleiner und schärfer als am Computer-Bildschirm dargestellt.

Gibt es neben den zahlreichen, meist sehr speziellen Forendiskussionen und den ermüdenden Spezifikationen einen leicht lesbaren Einsteigertext?

Ja, bei A List Apart: Put Your Content in my Pocket, Part II. Craig Hockenberry hat aus Webdesign-Perspektive die wichtigsten Dinge zum iPhone praxisnah und unterhaltsam aufgeschrieben.

iPhone-optimierte Websites

Hat das Angebot eine eigene URL wie z.B. das der Postbank, ist die iPhone-Version auch auf dem Desktop-Browser nutzbar. Wird die Website über ein Stylesheet umgestaltet, sieht man dies nur auf einem iPhone oder einem iPod Touch. Update: Leider hat die Postbank jetzt das Angebot für nicht Iphone-Nutzer gesperrt (ärgerlich und eine Sache der Vergangenheit). Anderes Beispiel: digg.

Mehr Fragen, anyone? Selbst schon Erfahrungen mit dem iPhone gemacht?

34 Kommentare »

  1. Dankeschön für diese übersichtliche Zusammenfassung. Ich werde das demnächst alles live probieren.

    Beste Grüße
    Dirk

    Comment von Dirk — 17.11.2007, 23:02 Uhr

  2. Manueller Trackback ;)

    Comment von Dirk — 18.11.2007, 17:32 Uhr

  3. [...] Das iPhone hat ja schon im Vorfeld grosse Wellen geschlagen und wird hoffentlich bald bei uns zu erhalten sein. Wie werden Webseiten auf dem iPhone dargestellt. Muss man speziell auf etwas achten? Was funktioniert und was nicht? Fragen die auf Vorsprung durch Webstandards beantwortet werden. Tolle Zusammenstellung, vielen Dank. [...]

    Pingback von maege: webdesign und mediengeschehen » Blog Archive » Websites für das iPhone gestalten — 19.11.2007, 09:35 Uhr

  4. Wie kann ich ein Stylesheet für´s iPhone so einbinden, dass andere small devices, die sich an die W3C-Standards halten, auch in den Genuss einer optimierten Version kommen?

    Grüsse
    Alex

    Comment von alex — 19.11.2007, 23:03 Uhr

  5. media=”handheld, only screen and (max-device-width: 480px)”

    Comment von alex — 19.11.2007, 23:04 Uhr

  6. Hallo Alex,
    prima Idee. Die Zielgruppe zu erweitern ist immer gut. Ich werde das gleich mal ausprobieren.

    Comment von timo — 20.11.2007, 10:17 Uhr

  7. Schaut doch mal hier vorbei: http://www.iphonesites.de
    Schönes Verzeichnis mit vielen iPhone optimierten Seiten.

    Comment von Heiko — 27.11.2007, 05:15 Uhr

  8. Was denkt sich Apple nur dabei, noch nicht verabschiedete Media Queries aus CSS3 für ihr neues Gerät vorauszusetzen? Das mag zwar zukunftsweisend sein, aber ich zumindest verzichte zugunsten der Validität dann doch lieber auf iphone-Optimierung und hoffe, dass das Gerät flexible Layouts auch so vernünftig darstellen kann.

    Comment von Ingo — 02.12.2007, 17:31 Uhr

  9. Sehr hilfreicher Beitrag, vielen Dank für deine Mühen.
    Der Link zum iPhonetester ist tip top, werde mal meine Projekte optimieren und testen.

    Comment von Alex — 03.12.2007, 18:50 Uhr

  10. > Leider hat die Postbank jetzt das Angebot für nicht Iphone-Nutzer gesperrt

    Kein Problem! Das iPhone identifiziert sich dem Server gegenüber nur durch seinen UserAgent-String. Also im UA-String seines Browsers senden lassen:

    Mozilla/5.0 (iPhone; U; CPU like Mac OS X; de-de) AppleWebKit/420.1 (KHTML, like Gecko)

    Im Mozilla z.B. about:config und dann den String general.useragent.override zuweisen.

    Jetzt müßte die Website schon per JavaScript checken, ob es sich wirklich um ein iPhone handelt. Davon sollte der Webmaster IMHO aber Abstand nehmen …

    Die Postbank-Site läuft dann jedenfalls auch auf normalem Browser. :)

    Comment von Cybaer — 18.02.2008, 15:51 Uhr

  11. [...] Macin’ Blog wrote an interesting post today on Vorsprung durch Webstandards | FAQ: Websites fÃ&frac14;r das iPhone…Here’s a quick excerpt bookmark this on del.icio.us - posted by pyranha to iphone development webapp webdesign apple and saved by  people… [...]

    Pingback von Iphone » Vorsprung durch Webstandards | FAQ: Websites für das iPhone… — 22.04.2008, 01:41 Uhr

  12. So einfach kann man das iPhone über die htaccess-Datei von der normalen Seite http://www.domain.com auf eine eigene Subdomain umleiten:

    RewriteEngine On
    RewriteCond %{HTTP_USER_AGENT} .*iPhone.*
    RewriteRule ^index\.html$ http://www.iphone.domain.com [L]
    RewriteRule ^/$ http://www.domain.com/index.html [L]

    Nur ein eigenes Stylesheet finde ich als iPhone-Benutzer immer dann schlecht, wenn es viele Links gibt. Die sind beim Scrollen schnell angeklickt, ohne daß man das will. Mit einer eigenen Subdomain kann man die Seite auch für EDGE optimieren und Bilder weglassen.

    Comment von Runa — 07.07.2008, 15:39 Uhr

  13. das iphone interpretiert so fast jede nummer auf einer webseite als Telefonnummer… wie kann ich das verhindern ?

    beispielsweise ist eine HRB nummer in einem impressum oder eine faxnummer nicht gerade sinvoll als LINK zum anklicken ..
    vg
    Florian

    Comment von Florian — 17.07.2008, 14:55 Uhr

  14. Hallo zusammen,
    unter http://investor-facts.mobi/iPhone/ ist das für das iPhone optimierte Angebot der Börsen-Zeitung.

    Viel Vergnügen bei der Nutzung!

    Comment von agee — 20.08.2008, 11:29 Uhr

  15. Moin moin,
    feiner Artikel!
    Aber das hier:

    Safari Mobile unterstützt bisher nur a:active, aber selbst das sieht nicht sonderlich gut aus. Heißt: derzeit einfach ignorieren.

    Stimmt nicht so ganz, Active geht und sieht ganz normal aus und auch visited läuft, hover ist und wird bei einer Touchoberfläche nicht implementiert werden.

    Cheers

    Philip

    Comment von Philip — 03.09.2008, 14:05 Uhr

  16. [...] Ich hatte neulich das Vergnügen für eine bestehende Website auch eine CSS-Datei speziell für iPhone/iPod Touch einzubinden. Dabei hat mir der FAQ-Bereich von "Vorsprung durch Webstandards" sehr geholfen. Der Artikel ist schon etwas länger, daher kann ich euch hier eine kleine Kurzfassung von Punkten wiedergeben, die ich persönlich für wichtig halte: [...]

    Pingback von CSS für iPhone und iPod touch » Peruns Weblog — 27.09.2008, 20:55 Uhr

  17. [...] Notiz an mich: Allerlei nützliche Tipps für den Webdesigner, der speziell angepasste Seiten für das iPhone bzw. den iPod touch entwickeln möchte, sind bei Vorsprung durch Webstandards zu finden. [via Perun] « 3. Rocknacht in Koffers Werkstatt [...]

    Pingback von Websites für das iPhone oder iPod touch gestalten | Notizn — 27.09.2008, 23:09 Uhr

  18. Hallo,

    wer eine mobile Seite fürs iPhone erstellt hat kann diese gerne auf http://www.molipo.mobi einstellen. molipo.mobi ist eines der bekanntesten und umfangreichsten Linkportale für mobile Seiten.

    Comment von Jörg — 07.10.2008, 10:11 Uhr

  19. [...] Schnüffel, Schnüffel [...]

    Pingback von Wackeldackel » Blog Archive » iPhone Webstandards — 17.11.2008, 11:45 Uhr

  20. [...] Auf drei Websites (1, 2, 3) habe ich Tipps gekriegt, wie man seine Website iPhone ready machen kann. Ausprobiert hab’ ichs immer noch nicht. [...]

    Pingback von blog.claudioschwarz.com » Ein Link Remix. — 02.01.2009, 16:48 Uhr

  21. [...] Eine gute FAQ zum Thema Websites für das iphone gestalten A list apart: Put your content in my pocket II Ein Textpattern-Theme fürs iphone design is art - Designblog Pixelgangster - Designblog Share and Enjoy: [...]

    Pingback von Quicklinks 15.01.2009- Thorstens Blog — 15.01.2009, 06:12 Uhr

  22. Eine sehr schöne Liste. Vielen Dank.

    Comment von Claudio — 16.01.2009, 10:20 Uhr

  23. Hallo,
    ich hab ein Problem mit meinem Iphone. Das Display dreht sich seit einiger Zeit nicht mehr mit. Wer kann mir helfen. Danke im voraus.

    Comment von Robert — 18.05.2009, 14:25 Uhr

  24. Hallo Leute,

    1. Fürs iPhone eine eigene Seite? dass ich nicht lache. Das iPhone stellt meine Site so dar, wie ich das für alle Handhelds vorgesehen habe.
    2. Einfach den UA String abfragen
    3. Wer dann noch das CSS optimieren will: http://webdesign.weisshart.de/iphone_css.php

    Comment von Fritz Weisshart — 15.01.2010, 03:07 Uhr

  25. Hallo,-
    ein super beitrag, doch ich habe eine Frage.
    Wie kann man machen, dass wenn man eine Seite mit dem Iphone aufruft, dass man sofort auf die Mobile-Seite kommt. Bei mir habe ich eine Startseite und eine mobile seite. welchen code brauch ich, damit wenn ich deis start seite mit dem iphone aufruf, sofort zur mobile seite verlinkt werde ?
    Danke im voraus
    Lg Beni

    Comment von Beni — 09.05.2010, 18:48 Uhr

  26. danke für den beitrag, hat uns bei unserem projekt sehr weitergeholfen!

    Comment von duktus — 20.08.2010, 09:50 Uhr

  27. Obwohl der Beitrag ja nicht mehr taufrisch ist immer noch sehr, sehr hilfreich.

    Comment von Paul — 25.08.2010, 14:50 Uhr

  28. Vielen Dank für den sehr nützlichen Beitrag!

    Comment von Arthur Ergen — 05.09.2010, 18:48 Uhr

  29. I must say that overall I’m really impressed with this blog.You can easily see that you are passionate about your writing. If only I had your writing ability I look forward to more updates and will be returning.

    Comment von Meridith Handing — 03.03.2011, 17:42 Uhr

  30. Wer als Apps-Entwickler ein neues Betätigungsfeld sucht, der sollte einmal bei http://mobile-job.ch reinschauen. Arbeitgeber aus der Mobilbranche inserieren bis 30. April kostenlos. Das Portal ist schnell und einfach zu bedienen und für die Sprachen Englisch, Französisch und Deutsch freigeschaltet.

    Comment von Pinkportal — 02.04.2011, 14:27 Uhr

  31. Danke für den Beitrag. Gleich als Lesezeichen gespeichert.
    20 px sind für Fließtext doch schon arg groß. Da entstehen schnell unansehnliche Lücken. Aber zum Glück unterstützt Webkit Softhypens (­). :-) Das mit dem zoomen muss ich mir mal genauer ansehen.

    Comment von Meino Aden — 15.04.2011, 10:33 Uhr

  32. danke!!!

    Comment von denny — 20.05.2011, 01:12 Uhr

  33. Ein äußerst interessanter und informative Artikel. Vielen Dank.

    Ist dieser noch aktuell ? Falls nein, so wäre es sehr schön, wenn dieser aktualisiert werden würde

    Comment von Felix — 18.07.2011, 18:48 Uhr

  34. Wie erkennt das iphone die speziell für das iphone erstellte mobile Version (wenn man http://www.xyz.de und nicht mobil.xyz.de) eingibt.
    Braucht man eine Weiche?
    Oder kann man auf mobil.xyz.de routen?

    Comment von Mike — 30.09.2011, 21:31 Uhr

RSS-Feed für Kommentare zu diesem Beitrag.

Kommentar schreiben




Suche

About

"Vorsprung durch Webstandards" ist ein Webzine zu Webstandards, Barrierefreiheit und Usability. In loser Folge erscheinen hier theoretische Texte, praktische Tipps und hilfreiche Links zum Thema.

Twitter

Follow Vorsprung on Twitter

Classics

Falling in love with CSS

I love CSS

alle Interviews

Updates

Feed Neue Texte als RSS-Feed

Autoren

Heike Edinger, heike.edinger at gmail.com

Timo Wirth, timo.wirth at gmail.com