von Alexander Ebner und Patrick Lobacher,
online veröffentlicht am 03.09.2008
Twittern 0 Teilen 2

Teil 1: Websites für das iPhone optimieren: Webentwicklung für das iPhone

Aus dem
t3n Magazin Nr. 13

Jetzt kaufen

Nachdem Steve Jobs Anfang 2007 das iPhone erstmals vorgestellt hatte, wurde schnell klar, dass dieses Gerät ein Meilenstein für das mobile Surfen darstellen würde. Noch nie hat es ein Mobiltelefon dem Benutzer so leicht gemacht, ganz normale Webseiten unterwegs anzusehen, ohne auf Hilfsmittel wie WAP oder eine komplizierte Navigation zurückgreifen zu müssen. Auch wenn das iPhone jede Webseite darstellen kann, zeigen wir Ihnen nun Tricks, um das Vergnügen weiter zu steigern und den Nutzen zu optimieren.

Zwei Faktoren sind entscheidend dafür, dass das iPhone so gut zum Betrachten von Webseiten geignet ist. Zunächst das System selbst: Das iPhone verwendet Apples hauseigenes Betriebssystem Mac OS X. Anders als Microsoft, dessen Windows Mobile eine eigene Plattform darstellt, werkelt unter der Haube des iPhones genau das selbe Betriebssystem, wie auf jedem anderen Apple-Computer auch.

Lediglich die Benutzeroberfläche wurde an die Besonderheiten des 320 x 480 Pixel großen Displays und der innovativen Fingersteuerung angepasst. OS X wurde abgespeckt und die bordeigenen Applikationen wie Mail oder Safari für das Gerät optimiert. Safari entspricht ebenfalls der Desktop-Applikation und verwendet wie sein Pendant die Webkit-Engine zur Darstellung. Damit ist gewährleistet, dass Webseiten auf dem iPhone genauso aussehen, wie etwa auf einem MacBook. Einzig auf Flash wurde verzichtet.

Der zweite Faktor ist die bereits erwähnte Fingersteuerung. Bis auf wenige Ausnahmen wie Power-, Home- und Lautstärketasten finden sich keine Tasten an dem Gerät. Es wird durch das Display dominiert, das auch gleich als Eingabemedium herhält. Apple setzt hier auf kapazitive Touchscreens, die zwar viermal so teuer wie resistive Touchscreens sind, aber dafür Eingaben mehrerer Finger gleichzeitig verarbeiten können und stabiler sind.

Touchscreen-Technologien
Resistive Touchscreens bestehen aus zwei Folien mit einer Indium-Zinn-Oxid-Beschichtung. Wird der Touchscreen berührt, kommen auch die beiden Folien in Berührung. Der elektrische Widerstand verändert die Spannung, wodurch der Berührungspunkt geortet werden kann.Kapazitive Touchscreens verwenden eine hochempfindliche Sensorschicht, die durch eine Glasscheibe geschützt wird. Die Empfindlichkeit der Sensorplatte ist dabei so hoch, dass bereits die Annäherung eines Fingers gemessen werden kann. Auch die Ortung von mehreren Fingern ist möglich. Im Gegensatz zu resistiven Touchscreens kann kein normaler Stift verwendet werden. Als Alternative zum Finger kann nur ein spezieller leitfähiger Stift eingesetzt werden.

Seite:  1 2 3 4 5 6
►

Das interessiert dich bestimmt auch

6 Antworten

  1. von tagdocs.de - Deine tägliche Dosis Web 26.05.2009 (13:11Uhr) 1.

    [...] Websites für das iPhone optimieren [...]

  2. von Mobile Entwicklung: Der ultimative Über… 22.03.2010 (16:55Uhr) 2.

    [...] dem eine iPhone-Webapplikation erstellt wird. Die einzelnen Teile der Serie findet man im Archiv: Teil 1, Teil 2, Teil 3, Teil 4. Ähnliche News und Artikel02.09.2008: Teil 1: Websites für das iPhone [...]

  3. von Beni 09.05.2010 (19:54Uhr) 3.

    Hallo,-
    ein super beitrag, doch ich habe eine Frage:
    Und was ist wenn ich auf der linken Seite sachen habe, die keiner braucht ? UND:
    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

  4. von Mit einfachen Mitteln zur mobilen Websit… 12.07.2010 (09:07Uhr) 4.

    [...] für Besucher mit einem iPhone aber hoch. Die wichtigste Einstellung ist hierbei der Viewport [2]. Über „page.headerData“ im TypoScript-Template können Sie diese Einstellung leicht vornehmen: [...]

  5. von Mit einfachen Mitteln zur mobilen Websit… 30.07.2010 (20:57Uhr) 5.

    [...] für Besucher mit einem iPhone aber hoch. Die wichtigste Einstellung ist hierbei der Viewport [2]. Über „page.headerData“ im TypoScript-Template können Sie diese Einstellung leicht vornehmen: [...]

  6. von Nope 21.10.2010 (09:43Uhr) 6.

    Optimiert lieber mal Euer Blog so, dass es auch auf dem Firefox für Mac ordentlich angezeigt wird, bevor Ihr über Optimierung für Mobile Devices schreibt. Die Kommentare laufen nach rechts aus dem DIV und deer Footer ist einen halben Meter lang.

Deine Meinung


(wird nicht veröffentlicht)