Entwicklung & Design

Teil 2 – Eigene Webapplikation für das iPhone mit iUI entwickeln: Webentwicklung für das iPhone

iPhone-Look, hier mit Listenmenü." src="https://t3n.de/magazin/wp-content/uploads//2008/12/dms_88e9eec347362fb0b548830e89b9da2b-170x300.jpg" alt="iUI erleichtert Entwicklern die Gestaltung einer Website im iPhone-Look, hier mit Listenmenü." width="170" height="300" /> Der erste Teil dieser Serie hat gezeigt, wie Sie eine bestehende Website für das iPhone optimieren können. Diesmal geht es darum, eine Website explizit für das iPhone zu entwickeln. Das ist besonders sinnvoll bei Webdiensten, die häufig von unterwegs aus angesurft werden, zum Beispiel der Abfahrtsplan der Nahverkehrsbetriebe oder die Website eines Taxiunternehmens. Aber auch „gewöhnliche“ Websites erleichtern ihren Besuchern die Navigation, wenn sie für das iPhone optimiert sind. Wir zeigen, wie Sie Ihrer Website mit iUI eine Benutzeroberfläche verpassen, die an native iPhone-Applikationen erinnert.

Das iPhone besitzt ein neuartiges Bedienkonzept und bietet dank kapazitivem Touchscreen eine außergewöhnliche Benutzeroberfläche. Viele Applikationen aus dem AppStore halten sich an die Designparadigmen aus Cuppertino. Warum also nicht auch Webapplikationen? Schließlich führt einen Besucher nichts besser durch eine Website als vertraute Mechanismen. Das heißt nicht, dass das eigene GUI-Design keine Individualität besitzen soll. Vielmehr geht es darum, den Besucher mit gewohnten Navigationskonzepten zu unterstützen. Wir zeigen, wie Sie einer Website mit der Bibliothek iUI das Look&Feel einer nativen iPhone-Applikation verpassen.

Neu eingekleidet

Am Anfang der Entwicklung steht das Design. Grundsätzlich stehen dabei zwei Ansätze zur Wahl: ein komplett eigenes Design oder ein Design, das sich am Look & Feel des iPhone-Betriebssystems orientiert. Für ersteres spricht sicherlich die bessere Integration der Firmen-CI. Der zweite Ansatz lockt mit einer einfacheren Bedienung, da die Nutzer diese schon gewohnt sind. Kombiniert mit eigenen Designelementen wie Farbe oder Logo, kann sich auch dieser Ansatz in das Firmen-CI einpassen.

###WORKAROUND###

Die in der Regel graue Hintergrundfarbe lässt sich leicht gegen die Hausfarbe tauschen, die Listenmenüs mit einem dezenten Hintergrundlogo aufhübschen und Buttons individuell gestalten. Doch wie immer sollte man genau abwägen, wie weit man geht – weniger ist hier oft mehr. Denn wenn der Besucher durch allerlei optische Spielereien den Überblick verliert, hilft es wenig, wenn die Bedienung ansonsten einer normalen Applikation ähnelt.

Mit dem Ziel, auf Basis von Standard-HTML iPhone-optimierte Navigationen und Oberflächen entwickeln zu können, wurde das Projekt iUI [1] von Joe Hewitt (Entwickler von Firebug und DOM Inspector) aus der Taufe gehoben. Dieses Framework bietet alles, was zur Gestaltung einer Website im iPhone-Style notwendig ist. Dazu gehören auch Animationen bei Seitenübergängen in Menüs. Mit der Einbindung von iUI ist es ein Leichtes, eine Website im iPhone-Style zu kreieren, da lediglich die Seitenstruktur und die Inhalte erstellt werden müssen. Um alles Weitere kümmert sich iUI.

Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

3 Kommentare
macwoern

Hallo Ihr Beiden,

ich hätte da mal eine Frage an Euch:
Folgende Situation. Wir haben einen Web-Shop und dafür auch eine abgespeckte Form für mobile Geräte. Da für die Entwicklung für eine richtige App von unseren Gesellschaftern noch kein Geld zur Verfügung gestellt wird, denken wir drüber nach die abgespeckte Variante etwas „aufzuhübschen“ damit sie wenigsten so aussieht, als wäre es eine App.

Nun soll dabei auch die Titelleiste und die Fußleiste nicht zu sehen sein. Das geht, in dem man im HEAD den Eintrag hinzufügt und die Webseite dann als Icon auf dem Homescreen abspeichert.

Alles schön und gut. Aber jetzt hab ich festgestellt, daß wenn man auf einen Link auf dieser Seite klickt, bleibt die Anwendung nicht in der WebApp sondern macht Safari separat auf und öffnet dort die Seite – hat dann natürlich wieder die Titel- und Fußleiste.

Ich hoffe, Ihr bekommt das noch mit, da der Artikel ja schon recht alt ist….

macwoern

Mist! Da wurde oben der Meta-Tag ausgeblendet… ich lass mal die eckigen Klammern weg… müsste ihr euch dazudenken:

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

Alex Ebner
Alex Ebner

Hmm, das ist sonderbar. Normalerweise sollte sich der mobile Safari bei Links genaus verhalten wie jeder andere Browser. Sprich das aktuelle Fenster/Tab als Target wählen. Sind das relative oder absolute Pfade? Wenn es letztere sind, würde ich zum testen mal auf relative Pfade umstellen. Eventuell grätscht auch noch eine BaseURL rein. Ich hatte so ein ähnliches Problem, als ich die WebApp mit http://domain.de aufgerufen habe, und die BaseURL mit http://www.domain.de drin war. Mehr fällt mir im Augenblick auch nicht dazu ein.