Teil 2: Mobiles Webdesign

Der Accesskey ist nur für die vier Elemente a, label, input und textarea gültig. Weisen Sie das Attribut einem anderen Tag - beispielsweise - zu, so bleibt dies ohne Wirkung.

Zur detaillierten Beschreibung, was Ihre Besucher hinter den einzelnen Links zu erwarten haben, bietet sich ein erklärender Text an, der sich jedoch optisch vom Link abheben sollte.

Dazu eignet sich hervorragend eine spezifische Formatierung über CSS. Diese Deklarationen können Sie entweder direkt mit in die Seite in den Kopfteil oder in eine eigene Datei einbinden, in welcher Sie alle Formatierungen sammeln.

Die externe CSS-Datei verlinken Sie, wie unter HTML bereits gewohnt, im head-Bereich oder über direkte Style-Definitionen. Nun müssen Sie im Anschluss nur noch die Beschreibungen zu den einzelnen Links hinzufügen. Nutzen Sie dazu das span-Tag und verknüpfen Sie dieses mit der Formatierung beschreibung.

Spezifisches für Mobiltelefone

Der Anchor-Tag ist für die mobilen Geräte nicht nur um einen Accesskey erweitert worden, sondern bietet Ihnen auch noch an, Telefonnummern direkt zu verlinken. Diese können Sie dann, nach Aufruf des Links, direkt anwählen. Der Aufbau des Links ist denkbar einfach:

Dateneingabe über Forms

Wenn Sie bereits einmal im Internet mit einem mobilen Gerät unterwegs waren und versucht haben, einen Anmeldedialog oder ein Formular auszufüllen, haben Sie sicherlich gemerkt, wie sehr Sie Ihre Tastatur vermissen. Gut bedient sind in diesem Fall natürlich die Besitzer von Smartphones mit einer vollwertigen Tastatur, wie Sie viele Blackberrys oder etwa der Nokia Communicator bieten.

Setzen Sie also Formulare nur dann ein, wenn es unbedingt notwendig ist.

Für alle, die keine vollständige Tastatur zur Verfügung haben, sollten Sie die Eingabe so einfach wie möglich machen. Gut geeignet sind dafür Optionsfelder zur vereinfachten Auswahl der Antwort. Sollten diese nicht ausreichen, können Sie immer noch als Ergänzung ein Textfeld anbieten. Der Aufbau des Formulars und der Umgang mit den Eingabeelementen unterscheiden sich nicht von dem Aufbau einer regulären HTML-Seite.

Text im richtigen Format

Speziell für Eingabefelder erlaubt WCSS eine Vordefinition der Eingabe, sodass Ihre Besucher nicht zuerst in den richtigen Modus umschalten müssen. Die erweiterte Definiton des input-Tags sieht wie folgt aus:

Für die Eingabe stehen Ihnen die in der Tabelle aufgelisteten Formate zur Verfügung. Sie können für das Eingabeformat auch beliebige Platzhalter kombinieren. Die Formatierung -wap-input-format: "NN" beschreibt beispielsweise die Eingabe zweier Ziffern, -wap-input-format: "AAA-AA" die Eingabe von fünf Großbuchstaben.

Für jedes Textfeld können Sie darüber hinaus noch festlegen, ob eine Eingabe erforderlich ist oder nicht - dazu steht Ihnen das Attribut -wap-input-required zur Verfügung, welches die Werte true und false haben kann.

Fliegende Objekte

Die WCSS-Marquee-Funktionalität erlaubt Ihnen, mit einfachen Mitteln Elemente über den Bildschirm scrollen zu lassen, wobei manche Browser Probleme mit fliegenden Grafiken aufzeigen und diese nicht unterstützen. Die Marquee-Erweiterung besitzt insgesamt vier Eigenschaften und einen Wert, den Sie individuell zuweisen können: Die display-Eigenschaft sorgt dafür, dass das Element über das Display scrollt:

-wap-marquee-dir legt die Richtung fest, in welche sich Grafik und Text bewegen: von links nach rechts (ltr) oder von rechts nach links (rtl):

Mit -wap-marquee-loop geben Sie an, wie oft die Animation wiederholt werden soll. Keine Angabe oder infinite wiederholt die fliegenden Objekte beliebig oft. Die Art der Bewegung - scroll, slide oder alternate - geben Sie über die Eigenschaft -wap-marquee- style mit. Der Standardwert hierfür ist scroll.

Zu guter Letzt haben Sie mit -wap-marquee-speed noch einen Schalter für die Geschwindigkeit. Die zulässigen Werte hierfür sind slow, normal und fast. Eine scrollende Grafik mit einem entgegengesetzt scrollenden Text sieht wie folgt aus: