Mobile Webseiten: Techniken, Einschränkungen und Möglichkeiten

iPhone 4 in vorderer und seitlicher AnsichtInternet – immer und überall. Das ist die Devise jedes Mobiltelefonherstellers. Seit der kommerziellen Einführung des UMTS-Handynetzes in Deutschland verbreitet sich die Möglichkeit der Herstellung einer Verbindung zum Internet über GPRS rasch in allen modernen Mobilgeräten. Die Nutzung der Dienste hält sich jedoch in Grenzen, da der Surfspaß weitestgehend eingeschränkt ist: winziges Display, niedrige Auflösung, kaum CPU und wenig RAM-Speicher, sowie meist keine JavaScript-Unterstützung. Die Revolution kommt 2007-2008, als in San Francisco das Apple iPhone der ersten Generation vorgestellt wird. Größeres Display und mehr Leistung machen fast grenzenloses mobiles Internetvergnügen erhältlich. Andere Hersteller versuchen in den neuen Markt einzusteigen und entwickeln eigene Touchscreen-Multimediageräte, PDAs, Organizer und Smartphones. Die Beliebtheit mobilen Internets steigt.

Und hier kommt der Webdesigner ins Spiel: Rund 70 Millionen iPhone-Nutzer weltweit sind für einen erfolgserstrebenden Webmaster eine gute Möglichkeit Nutzer zu gewinnen. Leider versäumen die meisten ihre Chance, indem sie Mobilbenutzern überdimensionierte Maße, große JavaScript-Anwendungen oder zu umfangreiche Inhalte zumuten.

In diesem Artikel möchte ich auf Techniken und Möglichkeiten, sowie die Einschränkungen von Webentwicklern bezüglich mobilen Webseiten aufmerksam machen.

Problematik

Damit ein Webentwickler eine Internetseite auf mobile Geräte optimieren kann, muss er die Tücken derer kennen. Die größten Einschränkungen liegen im folgenden:

  • wenig Speicherplatz
  • kleines Display
  • geringe Leistung
  • wenig Zwischenspeicher
  • geringe Energie
  • limitierter Datenempfang
  • geringe Bandbreite
  • teure Verbindung
  • instabile Verbindung
  • begrenzte Navigationsmöglichkeiten: Navigationskreuz und Zehner-Tastatur

Techniken

Ich werde zwei MarkUp-Languages (Auszeichnungssprachen) vorstellen, welche diese Probleme größtenteils umgehen:

Es handelt sich zum einen um WML (Wireless Markup Language), eine XML-basierte Auszeichnungsprache, welche die wichtigsten Elemente aus HTML übernimmt und über WAP, dem Wireless Application Protocol, übetragen wird. Zum anderen um HTML 4.0 Mobile (HyperText Markup Language), welches überwiegend auf HTML 4.0 basiert, aber für mobile Geräte optimiert ist und über HTTP, dem HyperText Transfer Protocol übertragen wird.

HTML 4.0 Mobile

Wie bereits erwähnt, handelt es sich hierbei um HTML 4.0, welches auf die oben genannten Anforderungen reduziert wurde.

Die erste Eigenheit der Mobile-Version ist die DTD (DocumentType Declaration), welche den Webbrowser anweist, HTML 4.0 Mobile-kompatibel zu handeln.

<!DOCTYPE HTML SYSTEM "html40-mobile.dtd">

Es stellt sich nun die Frage, wie sich eine HTML-Seite auf die Anforderungen herabsetzen lässt? – Die folgende Checkliste erklärt, was zu tun ist:

  • Unwichtige Inhalte entfernen (Banner, JavaScripts, )
  • Auf Grund der wenigen Navigationsmöglichkeiten, bietet es sich an das sogenannte accesskey-Attribut zu benutzen ->SelfHTML
    Tasten 0-9 oder # sind bei Mobiltelefonen meistens vorhanden
  • Seiten auf HTML 4.0 Strict validieren, um Kompatibilitätsprobleme zu mindern
  • Den oben ganannten Doctype verwenden
  • Kein JavaScript oder andere EventHandler verwenden, auf Grund der begrenzten Leistung und des Speicherplatzes
  • Keine Inline-Styles nutzen (style-Attribut)
    Um Inline-Styles und EventHandler dennoch nutzen zu können, muss diese DTD genutzt werden: 

    <!DOCTYPE HTML SYSTEM "html40-mobile.dtd" [
    <!ENTITY % Preparation "INCLUDE">
    ]>
  • Externe Stylesheets nutzen:
    <link rel="stylesheet" href="verzeichnis/style.css" type="text/css" media="handheld">
  • Formulare können genutzt werden, allerdings nur Input-Felder oder Select-Auswahllisten – Uploads können Schwierigkeiten mit den Dateisystemen haben
  • Keine Frames verwenden: Die Bilschrimgröße ist stark begrenzt und sie sind nicht in HTML 4.0 Strict enthalten
  • Imagemaps meiden: Bilder werden nicht so gut gerendert wir an einem Computer
  • Kleine Tabellen können genutzt werden, sollten aber nicht zu groß sein
  • Grafiken und andere Objekte sollten auf Grund des geringen Speicherplatzes sparsam genutzt werden

Soviel zum HTML 4.0 Mobile. HTML-Kenner sollten mit diesen Inforationen ihr Seiten rasch optimieren können. Der folgende Link zeigt noch ein paar andere Kniffe im Umgang mit mobilen Geräten:
Mobile Webseiten / Metatags / HTML- und CSS-Emulatoren

Sie möchten jedoch eine perfekte Website für mobile Endgeräte? – Lesen Sie den Artikel weiter: WML

WML

WML (Wireless Markup Language) basiert auf XML, aber ist vom Grundbauplan verschieden zu HTML. Eine WML-Website besteht nicht aus mehreren WML-Dateien, zwsichen welchen verlinkt wird, sondern aus einer, welche mehrere sog. Cards enthält, in welche die Unterseiten aufgeteilt sind. Der Aufbau einer WML-Seite ist somit folgendermaßen:

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card>
...
</card>

<card>
...
</card>
</wml>

Links können auf andere Cards verweisen, oder aber auch auf andere Dateien. Allgemein bietet WML andere Möglichkeiten als HTML, wie zum Beispiel dem direkten Aufrufen von Telefonnummern. HTML-ähnliche Elemente sind tablep oder img. Formulare mit input- oder select-Tags gibt es, aber leider keine Stylesheets und Formatierungsmöglichkeiten sind global stark begrenzt.
Anders als HTML wird WML über das Wireless Application Protocol übertragen. Browser wie Mozilla Firefox können es nur mit einem Plugin lesen.
Wer sich die Sprache WML aneignen möchte, ist mit diesem Tutorial gut geholfen:
WML Tutorial

Vergleich

HTML 4.0 Mobile:
Viele Möglichkeiten, vorallem was das Design betrifft. Zudem ist es HTML ähnlich und benötigt somit kein explizites Lernen einer neuen Sprache. Unterstützung findet es in fast jedem modernen mobilen Gerät.
WML:
Vorallem bei Mobiltelefonen sehr unterstützt und bietet viele mobilspezifische Funktionen. Auch EventHandler mit WMLScript sind möglich. Leider sind die Design-Möglichkeiten nicht besonders groß.

Übrigens

Es gibt etliche andere Auszeichnungssprachen für mobile Endgeräte, wie zum Beispiel Mobile XHTML.

Dieser Artikel wurde vertaggt mit , , , , , , .
Kategorien: CSS, Grafik und Foto, Internet, JavaScript, Mobilität, PHP, Tutorial, Webdesign

Hat Ihnen dieser Artikel gefallen? - Dann abonnieren Sie vlblog um über neue Themen rund ums Web informiert zu werden.

Hinterlasse eine Antwort