Weniger ist mehr

Mobiles Webdesign

Seit dem iPhone ist mobiles Surfen keine graue Theorie mehr. Wie Sie Ihre Website für den Mobil-Hype vorbereiten und welche Regeln Sie beim Seitenaufbau beachten sollten, zeigt dieser Workshop.

Mobiles Webdesign

© Archiv

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.

Mobiles Webdesign

© Archiv

Die eigene Navigationsstruktur ist schnell umgesetzt. Nicht immer wird die Webseite aber auf allen Geräten korrekt dargestellt.

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.

Mobiles Webdesign

© Archiv

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:

<?xml version="1.0" encoding= "UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

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:

<div id="inhalt"><ol><li><a href="news.html">News</
a></li><li><a href="produkte.html">Meine
Produkte</a></li><li><a href="about.html">Ueber
mich</a></li><li><a href="kontakt.
html">Kontakt</a></li><li><a href="impressum.
html">Impressum</a></li></ol></div>

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:

Mobiles Webdesign

© Archiv

Auf der Website von Dotmobi finden Sie verschiedene Emulatoren zum Testen.
<li><a href="news.html"
accesskey="1">News</a></li><li><a href="produkte.html"
accesskey="2">Meine Produkte</a></li>

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​".