Kategorien
Webdesign

Hoppla, ein iPhone – spezielle Seiten für mobiles Surfen (Teil 1)

Vier Millionen iPhones und iPod touch sind derzeit im deutschen Internet unterwegs. Eine Zahl, die nicht einfach zu ignorieren ist. Oder positiv ausgedrückt: Je nach Zielgruppe lohnt es sich, Websites für diese rapide wachsende Gruppe mobiler Internetnutzer zu bauen.

Vier Millionen iPhones und iPod touch sind derzeit im deutschen Internet unterwegs. Eine Zahl, die nicht einfach zu ignorieren ist. Oder positiv ausgedrückt: Je nach Zielgruppe lohnt es sich, Websites für diese rapide wachsende Gruppe mobiler Internetnutzer zu bauen.

Typisches Beispiel aus der Praxis: Der Kunde ruft an: Sein Geschäftskollege habe festgestellt, dass die Usability der Firmenwebsite eine Katastrophe sei. Die Ladezeiten sind zu lang. Die Seiten scrollen seitwärts und die Links sind kaum klickbar. Kann nicht sein, antwortet der Designer. Doch, meint der Auftraggeber, der geschätzte Geschäftskollege besuchte die Seiten nämlich mit seinem iPhone.

Web oder App?

Wer iPhone-Nutzer zu seinen potentiellen Kunden zählt, sollte eine zweite Website aufbauen. Zwar surfen die Nutzer des Apple Smartphone mit einem Safari- oder Firefox-Browser und können daher technisch betrachtet das Meiste, was Desktop-Browser auch können. Doch die beschränkte Größe des Displays erfordert einen layouterischen Kraftakt, der von einer einzelnen Seite mit zwei unterschiedlichen Stylesheets kaum zu leisten ist. Selbst wenn die Inhalte der Seite sauber vertikal scrollen, sind meist die Bilder zu groß, die Texte zu lang und es kann opportun sein, die Navigationslinks schon recht weit oben in der Seite zu zeigen damit der Nutzer schnell zu den gewünschten Inhalten gelangt.

Im Kontext des hoch-gelobten mobile Marketing, erliegen viele Anbieter derzeit der Versuchung, so genannten mobile content nur in Form einer iPhone-Applikation zu realisieren. Aus Usability-Perspektive kann das nicht genügen. Die meisten SEO-, SEM- und Bannerkampagnen sowie die Offlinewerbung zielen darauf, die URL des Unternehmens oder eines Produkts zu bewerben. Der Markenname selbst fungiert allzu häufig als Suchbegriff. Insofern ist es nicht unwahrscheinlich, dass iPhone-Nutzer zuerst versuchen Ihre Website aufzurufen, bevor sie eine Anwendung im Appstore wahrnehmen.

Und selbst wenn sie diese App entdecken, so gibt es noch zwei Probleme zu überwinden. Die App muss entsprechenden Nutzwert darstellen, damit sie in der Menge der iPhone-Anwendungen überhaupt wahrgenommen wird. Zweitens muss der Nutzer ein dezidiertes Interesse daran haben, die Anwendung mehrfach zu nutzen. Für eine einmalige Kontaktaufnahme zum Kunden ist die App der falsche und vor allem kostspielige Weg.

Das Leben der Anderen

Der erste Blick gilt Seiten anderer Unternehmen, die bereits dezidierte Mobilseiten anbieten. Natürlich ist es komfortabler, solche Seiten mit dem PC aufzurufen, als mit dem iPhone selbst. Um dennoch iPhone-Feeling zu bekommen, bietet sich die Verwendung eines Emulators an. Doch bei der Auswahl ist Sorgfalt vonnöten.

Rein grafisch ausgerichtete Emulatoren, wie zum Beispiel testiphone.com oder iphonetester.com funktionieren nur, wenn man die fürs iPhone optimierten Seiten direkt aufruft. Der User-Agent wird bei denen nämlich nicht als iPhone erkannt und zeigt somit die ganz normale Webseite an. Auch installierte PlugIns, wie vor allem Flash, funktionieren in den emulierten iPhones, was ja nicht ganz der Wahrheit entspricht.

Flash im iPhone-Emulator? Da stimmt doch etwas nicht.

Einen Schritt weiter gehen fest installierte Emulatoren, die eine eigene Rendering-Engine mitbringen. Gute Dienste leistet zum Beispiel MobiOne Studio. Der simuliert nicht nur iPhone2 und iPhone 3 sondern auch PalmPre. Außerdem kann er zwischen Hoch- und Querformat wechseln. Und mit gedrückter „ALT“-Taste lässt sich sogar Multitouch  simulieren.

Emulatoren mit eigener Rendering-Engine wie MobiOne lkeisten eine bessere Vorschau als der Browser-Emulator

Unverzichtbarer Bestandteil eines iPhone-Testrechners ist ein nackter Safari-3-Browser, sowie Firefox mit der Extension „User Agent Switcher“.  Der erlaubt, dass der Browser sich mit dem User-Agent eines WAP-Handys identifiziert. Viele Webserver schalten dann zum Beispiel auf die mobi-Domain um, um dort zum Handy passende Inhalte anzubieten. Diese Inhalte sind zweifellos auch gut für das iPhone geeignet.

Ausgetrickst: Der User Agent Switcher verwandelt Firefox zum iPhone

Wer also gute mobile Seiten sehen will, surft entweder mit dem Handy oder mit einem Pseudo-WAP-Browser.

Ein gutes Lehrstück zeigt www.bild.de. Trotz der schmalen linearen Anordnung bleibt ein Minimum an Gestaltung erhalten. Schade, dass die Seite keine Veränderung der Auflösung mitmacht. So bleibt im Querformat das rechte Drittel der Seite weiß. Mit einem einfachen Tag hätte man zumindest dafür sorgen können, dass die Seite vergrößert dargestellt wird und den Bildschirm füllt, wenn mehr Platz da ist.

Das Hamburger Abendblatt leistet genau das. Interessantes Detail: Die Hauptnavigation wird auf zwei Menüpunkte (Hamburg/Politik) reduziert. Den Rest versteckt man unter dem Button „Mehr“.

Amazons deutsche Website zeigt gleich drei gute Ideen: Natürlich die Suchbox oben in der Mitte als effizientes Navigationsinstrument; dann prangt gleich oben neben dem Logo ein Button, der zur Vollversion der Website führt. Und drittens muss Amazon auch nicht auf eine Box mit Empfehlungen verzichten.  Einfache Javascript-Buttons verschieben die Bildchen im sichtbaren Fensterbereich. Bemerkenswert: Es gibt bei Amazon.de überhaupt keine Rubriken mehr.

Buch.de macht genau das Gegenteil. Hier gibt es nur eine Suchbox und Rubriken. In den jeweiligen Rubriken findet man eine Reihe von Empfehlungen, die allerdings etwas zu platzsparend am linken Seitenrand kleben.

Die Wap-Site von ARAL operiert mit drei Icons als Interface im Kopf der Seite und macht intensiv Werbung für die Mobile-App. Nach der Verzweigung auf die Unterseiten offenbart sich ein Füllhorn verschiedenster Inhalte. Es lohnt sich, etwas tiefer in die Seite einzusteigen, um sich einiges abzuschauen.

Apropos abschauen: Anwendungen, wie die Mobile-Site zum Golf-Masters in Augusta zeigen, dass ein Blog-ähnliches Inhaltsformat bestens geeignet ist, um dem Handy-Nutzer ein vertikales Layout anzubieten.

Ein Blog-Format eignet sich perfekt für die Nachrichtenübertragung zum Telefon.

Jede Menge weiterer Inspirationsquellen finden Sie über mobilemammoth.

Weitere hilfreiche Links:

Fortsetzung folgt

(mm)

Von Frank Puscher

Autor der Fachbücher "Leitfaden Web-Usability", "Flash MX-Das Kochbuch" und "Die Tricks der Internet Künstler". Frank Puscher ist nicht nur ein angesehener Autor, der für zahlreiche Fachzeitschriften tätig ist, er ist auch als Schulungsleiter und Berater erfolgreich.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.