Weniger ist mehr

Teil 2: Mobiles Webdesign

  1. Mobiles Webdesign
  2. Teil 2: Mobiles Webdesign
  3. Teil 3: 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.

<li><a href="produkte.html"
accesskey="2">Meine Produkte</a></li><span class="beschreibung">Infos
ueber meine Angebote</span><li><a href="about.html"
accesskey="3">Ueber mich</a></li><span class="beschreibung">Ich,
der Entwickler</span>

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:

<a href="tel:+498947110815">
+49 89 4711 0815</a>

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.

<form method="post" action="meine_
verarbeitung.cgi"><dl><dt>Ihr Kommentar fuer uns:</dt><dd><input type="radio" id="cat1"
value="mich" accesskey="1" /><label for="cat1">Ueber mich</
label></dd><dd><input type="radio" id="cat2"
value="dich" accesskey="2" /><label for="cat2">Ueber dich</
label></dd><dd><input type="radio" id="cat3"
value="anderes" accesskey="3" /><label for="cat3">Etwas anderes</
label></dd><dt><label for="bemerkung">Bemerkung:</label></dt><dd><textarea id="kommentar"
name="bemerkung" rows="5" cols="20"></textarea></dd><dt><input type="submit"
value="Send" /></dt></dl></form>

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:

<input type="text" format="N"
style='-wap-input-format: "N"'/>

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.

<input type="text" style='-wap-input-
format: "N"; -wap-input-required: false'/>

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:

<p style="display: -wap-marquee"><img src="smile.gif"... />

-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):

<p style="display: -wap-marquee;
-wap-marquee-dir: ltr">Internet Magazin</p>

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:

<body><p style="display: -wap-marquee;
-wap-marquee-dir: ltr; -wap-marquee-style: slide; -wap-marquee-speed: fast"><img src="im.gif" alt="Logo"
height="52" width="149"/></p><p style="display: -wap-marquee;
-wap-marquee-dir: rtl">Internet Magazin</p></body>

Mehr zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".