Webdesign für PDA & Co.
Web für unterwegs

DeveloperIT-ProjekteMobileSoftware

Eine klassische Website kann nicht einfach verkleinert und auf das Handy-Display oder den PDA übertragen werden. Welche Besonderheiten zu beachten sind, verrät der Workshop.

Aktuelle Lage

Webdesign für PDA & Co.

Schon 2002 erreichten Handys eine Marktdurchdringung von 77 Prozent (www.regtp.de/aktuelles/02910/14). Das heißt, dass mittlerweile fast jeder Deutsche ein Handy besitzt. Klar, dass viele Unternehmen und Website-Betreiber da einen gierigen Blick bekommen und auf neue Einnahmequellen spekulieren. Was aber ist dran am mobilen Web?

Wer Anwendungen für das mobile Web entwickeln möchte, muss sich zwei Fragen stellen: zum einen, ob Nutzer dazu bereit sind, sein Angebot in Anspruch zu nehmen, zum anderen, auf welche technische Landschaft er trifft. Die erste der beiden Fragen ist nur individuell zu beantworten, denn sie hängt stark vom verkauften Produkt oder der verkauften Information ab. Spiele und Klingeltöne haben als Datendienste bisher gut funktioniert, Haushaltsgeräte verkaufen sich schon im normalen Web schwierig und werden am Handy sicher nicht so bald ein Markterfolg.

Auf die zweite Frage nach der technologischen Landschaft gibt es eine einfache Antwort: Sie ist sehr heterogen. Das erste Problem sind die unterschiedlichen Gerätearten im mobilen Web: PDAs besitzen meist ein relativ großes Display, Handys dagegen ein winziges. Smartphones liegen irgendwo dazwischen. In Zahlen besitzt ein normales Mobiltelefon wie das Nokia 6210 eine Display-Auflösung von 96 x 60 Pixel, ein Smartphone 176 x 220 Pixel und ein PDA 480 x 640 Pixel. Sehen Sie sich die Unterschiede einmal in einem Bildbearbeitungsprogramm an!

Neben der Display-Größe ist außerdem fraglich, ob Sie auf Farbe setzen können oder nicht. Gerade in Europa gibt es nach wie vor viele Monochrom-Handys. Ein Beispiel: Das Siemens ME 45 ? ein bereits mehrere Jahre altes Mobiltelefon ? bietet bereits GPRS, ist aber noch Schwarz-Weiß. Sowohl bei der Display-Größe als auch bei der Farbe bewegt sich zwar der Markt dank MMS-Nachrichten (Multimedia Messaging Service) durchaus schnell, aber wenn Sie die maximal mögliche Zielgruppe erreichen möchten, müssen Sie mit Monochrom-Handys und winzigen Displays rechnen.


Datenübertragung

Webdesign für PDA & Co.

Neben den beschränkten Fähigkeiten des Mediums spielt natürlich auch die begrenzte Datenübertragungsrate eine Rolle. Die normale Handy-Übertragungsrate betrug in den klassischen GSM-Netzen lange Zeit 9,6 kBit/s. Mittlerweile gibt es in GSM-Netzen zwei Ansätze, um das Ganze zu beschleunigen: GPRS (General Packet Radio Service) arbeitet mit einer paketorientierten Vermittlung. Das heißt: Der Nutzer zahlt, was er überträgt.
Bei HSCSD (High Speed Circuit Switched Data) werden dagegen mehrere Mobilfunkkanäle zu einem Minutenpreis gebündelt. Beide Technologien erreichen Übertragungsraten um die 50 kBit/s pro Sekunde, wenn nicht gerade wieder die eigentlich schon lange überlasteten GSM-Netze streiken.

Schwerer als die Übertragungsraten wiegt noch der Preis. Bei Paketübermittlung können 100 KByte je nach Tarif schon mal 1 Euro kosten. Insofern gilt, dass eine Seite für mobile Endgeräte nicht größer als 5 KByte sein sollte. Wer sich in die Anfangszeiten des Web zurückversetzt fühlt, hat nicht Unrecht.


Standardvielfalt

Webdesign für PDA & Co.

Home

Zu Kontakt

Kontakt


Medienübergreifend

Webdesign für PDA & Co.

Im Prinzip stellt es kein Problem dar, Daten sowohl in WML als auch in XHTML und cHTML bereitzustellen. Sie müssen nur Datenschicht und Geschäftslogik sauber von der Präsentationsschicht trennen. Wenn die Daten dann beispielsweise in XML-Form ankommen, lassen sie sich mit XSLT einfach in WML und cHTML umwandeln. Dazu ist natürlich eine Server-seitige Technologie wie PHP, JSP oder ASP.NET notwendig.

Die schwierigste Aufgabe besteht darin, festzustellen, was der Browser kann. Hierzu müssen Sie den jeweils vom Browser zurückgelieferten Mime-Type auslesen. Text/html weist auf einen normalen Webbrowser hin, text/vnd.wap.wml dagegen auf einen WML-Browser. Diese Informationen stehen im HTTP-Header und lassen sich mit jeder beliebigen Server-seitigen Technologie auslesen. In PHP greifen Sie beispielsweise folgendermaßen darauf zu:

$_SERVER["HTTP_ACCEPT"]

Nun bleibt nur noch ein Problem: Sie müssen sich davon überzeugen, dass die von Ihnen produzierten Seiten ? ob nun dynamisch oder statisch ? auch auf den gewünschten Endgeräten laufen. Die Handy- beziehungsweise Handybrowser-Hersteller stellen dafür SDKs zur Verfügung, deren wichtigster Inhalt eine Browsersimulation ist. Die bekanntesten sind Openwave (developer.openwave.
com/dvl
) und Nokia Internet Mobile Toolkit (www.forum.nokia.com/main/0,6566,033,00.html). Direktlinks zu den I-Mode-Toolkits finden Sie bei E-Plus (www.eplus.de/frame.asp?go=/topnav_imode/gateway.asp). Der Openwave-Browser ist beispielsweise in Siemens-Handys integriert. Das Nokia-Toolkit simuliert Nokia-Handys.


Design

Webdesign für PDA & Co.

Hat man diese ganzen Restriktionen im Kopf und die Testsoftware auf dem Rechner, geht es an die Gestaltung. Bei den meisten Firmenauftritten im mobilen Web ist das Logo die einzige Grafik. Hier beginnen aber schon die Probleme: Für WML sollte die Grafik idealerweise als WBMP vorliegen. Dafür gibt es zwar eine Menge an Konvertern, allerdings ist ein WBMP monochrom. Für iHTML und XHTML ist dagegen GIF das geeignete Format. Am besten ist es hier, das Logo in zwei Varianten zu verwenden.

Das zweite Problem betrifft die Logo-Größe. Der wichtigste Faktor ist die Höhe, denn dadurch wird dem Nutzer der Zugriff auf Informationen erschwert. Bedenken Sie, dass Scrollen auf einem Handy meist kein Vergnügen ist. Das Logo sollte also angemessen klein sein. Dafür kann es aber die Breite durchaus ausnutzen.

Bei der weiteren Gestaltung heißt das Prinzip eindeutig: Back to the Basics. Der wichtigste Inhalt ist Text, Formularelemente stehen kaum zur Verfügung, auf Bilder sollte aus Rücksicht auf die Datenmenge verzichtet werden. Die wichtigsten Empfehlungen: Benennen Sie Rubriken und Links prägnant, vermeiden Sie längere Texte und gliedern Sie die Inhalte logisch. Bei längeren Texten sollten Sie harte Umbrüche mit br vermeiden, da dies auf einigen Displays im Umbruch gar nicht gut aussehen wird. Wollen Sie Texte gliedern oder Teile hervorheben, bietet sich fette oder kursive Schrift an. Aber Vorsicht, auch dies unterstützt nicht jedes Handy beziehungsweise jeder Browser.

Wenn Farben zum Einsatz kommen, sollten Sie auf hohen Kontrast achten. Dies ist gerade bei PDAs wichtig, bei denen in der Sonne oft kaum noch etwas zu erkennen ist. Als Gestaltungselemente bieten sich Farbbalken an, da sie gerade als GIF-Grafiken nur eine geringe Datenmenge benötigen.


Kommunikation hilft!

Webdesign für PDA & Co.

Wenn Sie Spiele, Klingeltöne oder bezahlte Informationen mit größeren Datenmengen anbieten, sollten Sie nicht mit Text geizen. Geben Sie unbedingt an, wie groß der ganze Spaß ist, wie lang die Übertragung ungefähr dauert (mit verschiedenen Übertragungsgeschwindigkeiten) und vor allem, was es kostet. Schließlich muss auch im mobilen Web das Ziel sein, Kunden langfristig zu binden. Und wer kommt schon gern wieder, wenn er bei der Handy-Rechnung von einer immensen Summe überrascht wird.

Wenn Sie Dienste anbieten, die nur auf manchen Handys klappen, sollten Sie darauf auch hinweisen. Wenn ältere Handys den polyphonen Klingelton oder das Java-Spiel nicht bewältigen, der Nutzer sie aber dennoch herunterlädt, werden sie ihm womöglich abgerechnet, obwohl er sie gar nicht nutzen kann.

Fazit

Die mobile Welt befindet sich im ständigen Wandel. Dank günstiger Wechselangebote ändert sich die Endgeräte-Landschaft alle zwei Jahre. Und UMTS verspricht, das Bandbreiten-Problem endgültig zu lösen. Wer daran teilhaben möchte, sollte sicherlich schon heute mitmischen. Wenn Sie ein paar einfache Design-Regeln beachten, sollte es Ihnen nicht schwer fallen, Ihre Inhalte auch in das mobile Web zu stellen.


Mobile Controls in ASP.NET

Webdesign für PDA & Co.

Damit dynamische Websites in Zukunft leichter auf mobile Geräte portiert werden können, hat Microsoft die Mobile Controls entwickelt.

Mobile Browser herauszufiltern und entsprechenden WML- beziehungsweise HTML-Code zu liefern, erfordert ein wenig Mühe. Verständlich, dass die Anbieter von Server-seitigen Technologien sich über einfache Lösungen Gedanken machen. Microsoft ist hier mit ASP.NET einer der Vorreiter: Die Mobile Controls sind vorgefertigte Elemente, die an mobile Browser WML zurückliefern. Im .NET-Framework 1.1 sind sie direkt integriert, für 1.0 benötigen Sie das separat erhältliche Microsoft Mobile Internet Toolkit.

Und so funktioniert es: In der Konfigurationsdatei machine.config ist eine Liste mit mobilen Browsern und Endgeräten hinterlegt. ASP.NET liest automatisch den jeweiligen Browser aus und produziert dann für diesen Browser entweder WML oder XHTML.

Dieser Ansatz spart immens viel Zeit, hat aber auch Schwächen gegenüber einer handgeschriebenen Lösung: Die XHTML-Ausgabe ist nicht mit der von Web-Controls vergleichbar, da nur ein Teil von deren Funktionalität in den Mobile Controls enthalten ist. Für einen Webbrowser benötigen Sie also noch eine zweite Variante der Präsentationsschicht. Außerdem unterstützen einige mobile Endgeräte den Code mancher Mobile Controls nicht.

Und zu guter Letzt fehlen auf der Liste der mobilen Endgeräte noch so manche ? hier bemüht sich Microsoft allerdings redlich, über häufige Device-Updates mit dem schnell wachsenden Markt der mobilen Geräte Schritt zu halten.