Mobile Anwendungen für iOS optimieren

Es gibt mehrere Möglichkeiten für iOS zu entwickeln. Die Art, die mir am meisten zusagt ist das Entwickeln von Webapplikationen, da diese – wenn man es richtig macht – nicht nur auf einer, sondern auf vielen Plattformen laufen.

Apple bietet eine schöne Funktion in iOS: Webseiten lassen sich als Bookmark auch auf dem Hauptbildschirm anlegen und wie eine native Applikation per Tap auf das Icon starten. Hierfür gibt es jedoch noch zwei Möglichkeiten, die beachtet werden sollen, um das Nutzererlebnis zu verbessern:

Zum einen lässt sich ein Anwendungsicon definieren, welches anstatt des Screenshots der Seite für die Verknüpfung angezeigt wird.

Hierzu muss man lediglich ein neues Bild mit den Abmessungen von 72x72px erzeugen. Als Basis habe ich dann in Photoshop ein Rechteck mit abgerundeten Kanten (10px) gezeichnet und darin mein eigentliches Logo aufgebaut. Dieses dann als PNG speichern (auf die Transparenz hinter den abgerundeten Kanten achten!) und wie folgt in die Webseite einbetten:

<head>
….
<link rel=“apple-touch-icon“ href=“http://mbiebusch.de/archiv/ios.png“ />

Die Größe von 72 x 72 px ist angepasst an das iPad, iPhones und iPods passen die Größe dann automatisch an die Bedürfnisse an. Was jetzt noch stört ist das Chrome des Safaris: Schöner wäre es, wenn man wie bei einer nativen Anwendung darauf verzichten kann. Dies ist problemlos möglich, indem folgende Zeile im <HEAD> eingebaut wird:

<meta name=“apple-mobile-web-app-capable“ content=“yes“>

Will man zusätzlich verhindern, dass man die Seite zoomen kann, dann hilft folgender Codeschnipsel weiter:

<meta name=“viewport“ content=“initial-scale=1.0, user-scalable=no“>

So lässt sich mit wenig Arbeit zwar noch keine echte, da native, Anwendung für iOS entwickeln, eine bereits vorhandene Webapplikation aber besser in das Betriebssystem integrieren. Mit den neuen Speichermöglichkeiten von HTML5 (Web Storage) ist hier dann sogar noch mehr drin.

 
0 Kudos
Don't
move!

Schreibe einen Kommentar