IT-Academy Logo
Sign Up Login Help
Home - Mobiles - Handhelds - Software - Websiteoptimierung für PDA's



Websiteoptimierung für PDA's

In letzter Zeit erobern eine immer größer werdende Zahl von PDA's (Personal Digital Assistents) unseren Alltag. Sowohl im Geschäftsleben, als auch im Privatleben sind die Taschencomputer nützliche Helfer. Viele Personen entdecken nun auch die stetig wachsenden multimedialen Fähigkeiten dieser mobilen Geräte. Wieso also nicht auch internetsurfen über den PDA? Erstellen Sie ihre eigene optimierte Website!


Autor: Mathias Schindler (neo)
Datum: 30-05-2002, 12:48:32
Referenzen: keine
Schwierigkeit: Anfänger
Ansichten: 6190x
Rating: 9 (2x bewertet)

Hinweis:

Für den hier dargestellte Inhalt ist nicht der Betreiber der Plattform, sondern der jeweilige Autor verantwortlich.
Falls Sie Missbrauch vermuten, bitten wir Sie, uns unter missbrauch@it-academy.cc zu kontaktieren.

[Druckansicht] [Als E-Mail senden] [Kommentar verfassen]



Wie verbinde ich meinen PDA mit dem Internet?

Hier gibt es wie bei einem normalen Desktop PC verschieden Möglichkeiten. Die im Moment wohl gängigste ist es, sich über ein Handy mit Infrarotschnittstelle ins Netz einzuwählen. Bei manchem PDA's (z.B. Compaq iPAQ) kann man auch direkt am Pocket PC surfen, wenn er sich in der Docking Station befindet. Weitere Möglichkeiten: Verbindung zum Handy via Bluetooth, Verbindung über eine Netzwerkkarte, Verbindung über ein normales Modem (z.B. via CompactFlash Modem Karten).

Welche Internetbrowser stehen zur Verfügung?

Unterschiedliche Browser existieren für jedes Pocket Betriebssystem. Für Palm OS betriebene Geräte ist meist Avantgo der Standardbrowser, für Windows CE betriebene der Pocket Internet Explorer. Ist kein Browser standardmäßig vorinstalliert, lässt sich der gewünschte meist gratis downloaden und installieren. Je nach Browser werden mehr oder weniger HTML-Funktionen unterstützt. Bei der Optimierung muss auf die einzelnen Funktionen der jeweiligen Browser Rücksicht genommen werden.

Die Websiteoptimierung

Gleich zum Anfang möchte ich erwähnen, dass es keineswegs schwierig ist, eine Website für die Ansicht auf mobilen Geräten zu optimieren. Jeder der eine normale Website erstellen kann, kann auch eine für PDA's erstellen. Es sind nur einige wenige Dinge zu beachten:

  • es muss die geringere Bildschirmgrößer der PDA's beachtet werden
  • Manche Programmierungen, die auf "großen" Browsern funktionieren, funktionieren auf den mobilen nicht. (Dhtml, kompexes JavaScript, usw.)
  • Browserweiche am Anfang der Website

Dies sind die grundlegendsten Punkte. Optimiert man nun eine Website wirklich für alle gängigsten mobilen Endgeräte, so muss man sich auch speziell mit dere Browser ausseinandersetzen, da die verschieden Browser der verschiedenen Betriebssysteme auch unterschiedlich weit entwickelt sind und demnach auch unterschiedliche Funktionen unterstützen..

Ich behandle jetzt als Beispiel die Optimierung für einen Pocket PC mit Windows CE (mind. 3.0) und Pocket Internet Explorer. Dieses Betriebssystem besitzen unter anderem: Compaq iPAQ, Casio Cassiopeia, usw. Eine Auflistung der meisten Pocket PC's findet man auf www.pocket.at.

Die Optimierung für einen Pocket PC

Die Navigation

Wie schon weiter oben erwähnt ist das Wichtigste worauf man achten muss die Bildschirmbreite. Bei Pocket PC's mit Windows CE beträgt die Bildschirmauflösung 240x320 Pixel. Man muss also die Breite der mobilen Seite auf 240 Pixel optimieren (abzüglich Platz für die Scrollbalken). Demnach scheidet ein Element aus, welches bei vielen normalen Websites verwendet wird: eine Toolbar am rechten oder linken Bildschirmrand. Dies würde einen viel zu großen Teil des jetzt schon kleinen Bildschirms beanspruchen. Also bleiben eigentlich zwei Möglichkeiten der Navigation. Eine Top-Navigation oder eine auf der Startseite der mobilen Website auf welche immer wieder ein Back Button verweist.
Entscheidet man sich für eine Top-Navigation kann diese entweder in einem Top-Frame eingebunden werden, sodass sie immer am oberen Bildschirmrand sichtbar ist, oder man kann sie einfach am oberen Bildschirmrand einbinden.
Die andere Möglichkeit, mit der Navigation auf der Startseite erlaubt eine, falls gewünscht, grafisch aufwendigere Ausführung. Man kann, da die Startseite eigentlich ausschließlich der Navigation dient, sich eine Grafik designen welche den gesamten Bildschirm ausfüllt. Diese Grafik beinhaltet die gewünschten Links. Über die Links kommt man auf die Subseiten. Von diesen führt dann immer ein "Back" Link zurück auf die Startseite. Hier ist zu entscheiden welche Methode der Usability ihrer Seite eher zusagt. Ist eine schnelle Navigation notwendig, so empfehle ich ein Top-Navigation. Ist eher die grafische Ausführung und das Design im Vordergrund, so lässt einem die Startseitennavigation größeren kreativen Spielraum.

Dies Zeigt als Beispiel eine optimierte Website mit Startseitennavigation

Die Verwendung von Frames

Der Pocket Internet Explorer unterstützt zwar die Darstellung von Frames, allerdings sollten diese für mobile Sites nicht im überfluss verwendet werden, da dies zu einer kompletten überladung der Bildschirmes führt. Wenn die Verwendung von Frames unbedingt gewünscht ist, kann ich nur ein Frameset empfehlen, welches aus verschiedenen Zeilen besteht. Einzelne Spalten würden wiederum wie eine linke oder rechte Toolbar, zu viel vom Bildschirmplatz wegnehmen.

Hier ein Beispiel für eine optimierte Website mit einem Frameset, welches aus 3 Zeilen besteht. Im oberen Frameset befindet sich einfach ein Logo und ein Back Link um zur Startseitennavigation zurückzugelangen. In der mittleren Zeile wird der Content dargestellt und die unterste Zeile dient praktisch als Fußzeile. Man sollte immer darauf achten, dass der Bereich, der zum Darstellen von Content gedacht ist, möglichst groß bleibt.

Hier sehen sie als Beispiel eine Seite, bei welcher der dargestellte Inhalt durch zu viele Framesets absolut unübersichtlich wird. (dies ist keine optimierte Website, allerdings würde eine Seite mit zu vielen Framesets etwa so aussehen).

Serverseitige und Clientseitige Applikationen

Alle Serverseitigen Applikationen können auf dem Pocket Internet Explorer ausgeführt werden. (dies bezieht sich auch auf die meisten anderen Browser). Dies eröffnet natürlich eine große Anzahl von Möglichkeiten. Php, ASP, und andere Sprachen können also verwendet werden. Natürlich muss die Ausgabe der gewünschten Daten, wiederum auf die geringe Bildschirmgröße optimiert werden. Was leider nicht funktioniert, bzw. logischerweise nicht funktioniert ist komplexes JavaScript und Vergleichbares. Die Verwendung von Layern (und weiteren dhtml Programmierungen) funktioniert nicht. Es benötigt etwa keine Erklärungsbedarf wieso Rollover Images nicht funktioniert...
Hiermit meine ich auch Clientseitige Programmierungen. Also komplexe Spiele auf JavaScript Ebene oder etwa gesamte Seiten die auf JavaScript basieren werden nicht, bzw. unbrauchbar dargestellt. Einfache JavaScript Programme funktionieren. Z.B. Formularfelderabfragen, Browserweichen usw.

Browserweiche am Anfang der Website

Womit ich nun schon beim nächsten Punkt angelangt bin. Man muss sich eine prinzipielle Frage stellen: Sollen User die auf meine Seite kommen direkt auf die optimierte Seite weitergeleitet werden, oder sollen sie erst nach eingabe der URL der optimierten Seite auf die angepasste Seite weitergeleitet werden? Ersteres empfehle ich, wenn der Inhalt der optimierten Seite mit dem Inhalt des klassischen Auftrittes ident ist. So "verpasst" der User nichts. Findet man jedoch auf der normalen Seite mehr Informationen, sollte man dem Benutzer auch erlauben diese Informationen abzurufen. Er kann also zunächst die normale Seite betrachten und wenn er es wünscht kann er auf die optimierte, leichter zu lesende Site wechseln. In diesem Fall muss man sich natürlich eine Methode überlegen, mit welcher man den Benutzer darauf aufmerksam macht, dass es für sein Endgerät auch eine optimierte Seite gibt. Die andere Möglichkeit ist, dass er ersteinmal auch auf die mobile Seite weitergeleitet wird und danach die Information bekommt, dass auf der richtigen Seite mehr zu sehen ist.

Möchte man also den User gleich auf die optimierte Seite weiterleiten, nachdem er die normale URL der Website eingetippt hat, benötigt man eine Browserweiche. Diese kann so aussehen:

<script language="JavaScript">
<!--
var strNav = navigator.userAgent;
// Check for Windows CE (Pocket PC, Palm-size PC, Handheld PC, Handheld PC Pro)
var isCE = strNav.indexOf("Windows CE");
if(isCE > -1)
{
window.location.href="http://mobil.echo-citythai.cc";
}
// Check for Pocket PC
var isPPC = strNav.indexOf("240x320");
if(isPPC > -1)
{
window.location.href="http://mobil.echo-citythai.cc";
}
-->
</script>

Hier wird das benutzte Betriebssystem, bzw. die Bildschirmgröße abgefragt. Je nach Ergebnis wird der User an die passende Startseite weitergeleitet. Dieser Code kann beliebig nach Browsertypen und Betriebssystemtypen erweitert werden.

Allgemeine Hinweise

- Achten Sie darauf, dass die optimierte Seite nicht mit Grafiken überladen ist. Die meisten mobilen Verbindungsmöglichkeiten mit dem Internet bieten leider noch eine sehr geringe übertragungsrate. So kann eine lange Wartezeit einen Benutzer leicht "verscheuchen".
- Die Verwendung von Imagemaps ist möglich.

Die mobile Internetseite von welcher die Screenshots genommen wurden, finden sie unter www.echo-citythai.cc. Falls Sie direkt mit einem Pocket PC auf diese Site kommen, werden sie weitergeleitet. Wollen sie die Site von ihrem normalen Computer aus betrachten, können sie dies direkt unter mobil.echo-citythai.cc.

Falls sie an weiteren Beispielen optimierter Websites interessiert sind, finden Sie hier eine Linkssammlung. (PDA-Friendly Links von www.pocket.at)



[back to top]



Userdaten
User nicht eingeloggt

Gesamtranking
Werbung
Datenbankstand
Autoren:04508
Artikel:00815
Glossar:04116
News:13565
Userbeiträge:16552
Queueeinträge:06246
News Umfrage
Ihre Anforderungen an ein Online-Zeiterfassungs-Produkt?
Mobile Nutzung möglich (Ipone, Android)
Externe API Schnittstelle/Plugins dritter
Zeiterfassung meiner Mitarbeiter
Exportieren in CSV/XLS
Siehe Kommentar



[Results] | [Archiv] Votes: 1154
Comments: 0