Mobiles Webdesign

Die Durchdringung der Business-Welt mit Blackberry, Windows Mobile und Symbian hat bereits einen hohen Grad erreicht. Immer mehr Leute rufen unterwegs E-Mails ab, checken Blogs und holen sich beispielsweise Informationen von Preisvergleichsdiensten per Handy aus dem Web.Dies gelingt allerdings nur, wenn die angesteuerten Websites auch für die kleinen Displays optimiert sind. Ansonsten vergeht Ihnen schnell die Lust auf den Ausflug ins World Wide Web, denn Sie verbringen die meiste Zeit mit Scrollen. Zahlreiche Beispiele guter Mobil-Websites finden Sie bei Dotmobi.

Die steigende Bedeutung wurde auch durch die Icann entsprechend gewürdigt - seit Juni 2006 können Sie nun bei einer Vielzahl von Webhostern .mobi Domains registrieren. Diese sind jedoch nicht zwingend notwendig, damit die Inhalte von einem mobilen Gerät angezeigt werden können. Die Verbreitung der Inhalte ist nicht auf spezielle Domains oder Provider beschränkt.

Vor dem Start

Bevor Sie in die Realisierung Ihrer mobilen Website einsteigen, sollten Sie sich als Erstes mit der Fragestellung beschäftigen, welche Inhalte Sie den Besuchern präsentieren möchten und wie der Aufbau der Site aussehen soll. Machen Sie sich Gedanken, welche Ihrer Inhalte die Besucher auch mobil lesen möchten und welchen Nutzen dies für sie bringen könnte. Dieser Content sollte die Basis für Ihre erste mobile Website sein.

Neben der Auswahl der Inhalte ist auch die Navigationsstruktur ein weiteres Erfolgskriterium für Ihre mobile Website - es gilt der Grundsatz: je einfacher, desto besser. Versuchen Sie unterhalb Ihrer Startseite für den Anfang mit nur einer Navigationsebene auszukommen.

Die richtige Plattform

Zwei weitere wichtige Aspekte, die Sie bei der Entwicklung berücksichtigen müssen, sind die unterschiedlichen Auflösungen der am weitesten verbreiteten Geräte und die Hardware mit ihren Fähigkeiten an sich. Moderne Smartphones besitzen einen leistungsfähigen Browser, wie beispielsweise den mobilen Internet Explorer, Opera mobile oder den Safari Browser für die Apple iPhones.

All diese Geräte unterstützen sowohl HTML, XHTML als auch Wireless CSS. XHTML- Mobile Profile (MP) ist eine Ausprägung von XHTML zur speziellen Unterstützung von mobilen Geräten und liegt aktuell in der Version 1.2 zur Verabschiedung vor.

Wireless CSS ist eine Unterart von CSS und hat wie die Desktop-Version auch die Aufgabe, Layout von Inhalt zu trennen. Das CSS-Coding können Sie wie auch bei der Desktop- Variante in einer eigenen Datei kapseln oder direkt in das Coding integrieren. Im Folgenden sehen Sie dazu einige Beispiele.

Die erste mobile Website

Geben Sie Ihrer Webseite als Erstes die Informationen über die Codierung mit. Als Nächstes benötigen Sie noch den Doctype, damit der angesprochene Browser weiß, wie er die Webseite rendern soll. Und als letzte übergreifende Information legen Sie noch den XML-Namensraum fest:

Der Aufbau des Content-Bereichs einer mobilen Webseite unterscheidet sich bis auf die allgemeinen Deklarationen nicht von einer normalen HTML-Webseite. Sie sollten lediglich ein wenig gewissenhaft beim Umgang mit den Tags sein, denn XHTML verzeiht nicht so viel wie HTML ().

Layout und Navigation

Tabellen sind - trotz CSS - immer noch ein sehr beliebtes Mittel, Inhalte zu platzieren und anzuordnen. Auf mobilen Geräten führt Gestaltung mit Tabellen aber fast immer zu auf den kleinen Displays unlesbaren Layouts. Durch CSS und die Trennung von Inhalten und Layout spielen Tabellen keine Rolle mehr und werden durch CSS-Formatierungen ersetzt.

Durch die meist kleinen Displays ist jede Zeile kostbar. Deswegen sollten Sie sich bei der Navigationsstruktur auf die wesentlichen Elemente beschränken, die für die aktuelle Webseite relevant sind und aus Platzgründen darauf verzichten, auf jeder Webseite eine globale Navigation anzubieten. Eine einfach aufgebaute Navigation für eine Webseite kann unter diesen Gesichtspunkten folgendermaßen aussehen:

Alle Navigationselemente sind gut verpackt innerhalb des Bereichs inhalt. Sie sind deutlich als Link identifizierbar und selektierbar.

Navigationshilfe

Anders als beim PC stehen Ihnen bei den meisten Smartphones keine Hilfsmittel wie Maus oder Cursortasten für die Navigation zur Verfügung. Dafür bietet Ihnen XHTML-MP so genannte Accesskeys an, mithilfe derer Sie Links über Ziffern ansteuern können. Die ersten beiden Navigationselemente aus obigem Beispiel mit einem Accesskey versehen, sehen dann folgendermaßen aus: