Mobile Endgeräte (Webdesign)

Mobile Endgeräte (Design)

 

Im mobilen Webbereich ist der nutzerorientierte Ansatz am vielversprechendsten.

• Wie und wo werden die Nutzer mit dem mobilen Inhalt interagieren?

• Welche Zielen/Inhalte wollen sie dadurch erreichen?

Aber auch der anbieterorientierte Ansatz sollte nicht unbeachtet gelassen werden:

• Welche Ziele verfolgt die Institution/Firma?

• Inwieweit können diese durch die Erstellung einer mobilen Webpräsenz erreicht werden?

• Welche neuen Geschäftsfelder bzw. -chancen ergeben sich dadurch?

• Gibt es Innovationsmöglichkeiten?

Als letzter Ansatz darf die Technik nicht außer Acht gelassen werden. Durch die Vielzahl der mobilen Endgeräte und deren unterschiedliche Internetunterstützung sind Ressourcen und Technologien zur Umsetzung eingeschränkt.

 

1. Webdesign

Die verfügbare Bildschirmgröße bei Handys ist sehr unterschiedlich, aber generell gilt, dass v.a. die Screen-Breite limitiert ist. Design für mobile Endgeräte bedeutet Design im Hochformat (empfohlene Max-Größe: 200x250px).

 

Da eine Seite nur so gut ist, wie der Browser, der sie darstellt, ist zu berücksichtigen, dass Handybrowser

• lange Antwort- bzw. Ladezeiten

• unterschiedliche und verringerte Kompatibilität zu den diversen Handymodellen

• uneinheitliche Stylesheet-Unterstützung

haben.

Das führt zu den folgenden Regeln und „Best Practice“.

 

Regeln und „Best Practice“

• nur „well formed“ Code (bevorzugt XHTML) benutzen

• Character Encoding auf explicit auf UTF-8 setzen

• Seitentitel:

  • kurz halten (wird potentiell abgeschnitten)

  • ein hilfreicher Seitentitel besteht aus dem eigentlichen Seitentitel evtl. gefolgt durch den Seitennamen, Bsp. <title AGB | Hans Müller GmbH</title>

• Navigation:

  • „Keep it Simple“:

    • Wahlmöglichkeiten beschränken. Nur den Inhalt anbieten, der für den Handynutzer relevant/von Interesse ist. Das reduziert Wahlmöglichkeiten und verringert die Gefahr, dass der Nutzer sich verirrt.

    • nur für die aktuelle Seite und den aktuellen Inhalt relevante Navigation zeigen, um die Datenmenge der Seite und damit die Ladezeit der Seite zu verringern

    • bei Drill-Down-Navigation den Inhalt in gut benannte Kategorien schachteln und die Kategorien sowohl in Breite und Tiefe auf ein Minimum reduzieren

    • Links auf maximal 10 pro Seite beschränken

    • Acesskeys für die Haupnavigation, um einen schnelleren Zugriff auf die Links via Handytastatur zur ermöglichen

• Priorisierung der Links nach Aktivität oder Popularität

• geordnete Listen (ol) zur Darstellung der Navigation nutzen, kurze Erklärungen zu den einzelnen Unterpunkten können via span-Attribute eingefügt und damit stilistisch von der eigentlichen Navigation abgehoben werden

• Navigationsmöglichkeiten am Seitenende einfügen (Home, Back, etc.), um dem Nutzer das Weitersurfen zu erleichtern

• Nutzung von externen Stylesheets, um die Seiten konsistent zu halten und die Seitengröße zu verringern

• Verzicht auf Skripte und eingebettete Objekte

• Deklaration von Stylesheets und Logo als zu cachendem Inhalt reduziert die zu transportierende Datenmenge

• Strukturierung des Seitencodes entsprechend der Leserichtung von oben nach unten

• Tabellen:

  • nicht für Layoutzwecke

  • so klein wie möglich halten

  • keine in sich verschachtelte Tabellen

  • nach Möglichkeit durch Definitionslisten (dl) ersetzen

• keine Frames

• Telefonnummern verlinken, dabei sollte als Linktext die Telefonnummer angezeigt werden

• Formulare:

  • nur sparsam benutzen

  • Anzahl der Eingabefelder reduzieren

  • Texteingabefelder nach Möglichkeit durch Checkboxen oder Radiobuttons ersetzen

• Bilder:

  • die meisten Handys verfügen nur über eine Bildschirmbreite von ca. 120px, daher sollte die Bildgröße sich diesem anpassen, es sei denn man nutzt „device detection techniques“ (hier fehlt mir grad ein deutscher Begriff für)

  • Breite und Höhe bei Bildern angeben, um Ladezeiten zu verringern

  • Verzichte auf Imagemaps, es sei denn Du weisst, dass das anfragende Gerät diese unterstützt

  • Alt-Tag bei Bildern immer angeben. Es kann sein, dass die Darstellung von Bildern zur Verringerung von Ladezeit und Datentransfer ausgeschaltet wurde

• keine Popups (werden eh nicht unterstützt)

• externe Resourcen reduzieren, um die Datenmenge und Ladezeiten zu senken

• Daumenregel: Seitengröße sollte unter 10 KB bleiben (incl. Markup, CSS und externen Resourcen)

 

2. Technik-Glossar

WAP = Wireless Application Protocol = Sammlung von Techniken und Protokollen, deren Zielsetzung es ist, Internetinhalte für die langsamere Übertragungsrate und die längeren Antwortzeiten im Mobilfunk sowie für die kleinen Displays der Mobiltelefone verfügbar zu machen . Die meisten aktuellen Handys unterstützen WAP 2.0.

 

WAP 1.0

Ursprünglicher Standard zu Beginn der 90er Jahre. Quasi alle webfähigen Handys unterstützen zumindest diesen Standard. WAP 1.0 nutzt WML als Auszeichnungssprache.

 

WAP 2.0

Aktuelle Version des Standards mit dem Ziel die Darstellung auf dem Handy dem PC ähnlicher zu machen. Wichtigste Neuerungen:

• Unterstützung der wichtigsten Internetprotokolle wie z.B. TCP/IP und HTTP statt der bisherigen proprietären Protokolle von WAP 1.0

• Nutzung von XHTML-MP als vorrangige Auszeichnungssprache

 

WML = Wireless Markup Language auf XML basierend. Wird oft fälschlich als WAP 1.0 bezeichnet. Mit der Entwicklung von XHTML-MP ist WML inzwischen veraltet und nicht mehr empfohlen, dient aber weiterhin als Rückversicherungs-Auszeichnungssprache, da es eine breite Unterstützung und ziemlich konsistente Darstellung quer durch alle Browser bietet.

 

XHTML Mobile Profile / Basic

XHTML-MP = Extensible Hypertext Markup Language – Mobile Profile ist eine spezielle XHTML-Variante entwickelt durch die OMA (Open Mobile Alliance) und basierend auf XHTML Basic 1.0 des W3C. Wird oft fälschlich als WAP 2.0 bezeichnet. XHTML-MP ist aktuell der am weitesten unterstützte XHTML-Dialekt. XHTML-MP wird im allgemeinen zusammen mit WCSS genutzt.

 

WCSS = Wireless Cascading Stylesheets = Untergruppe von CSS 2.0 mit handyspezifischen Erweiterungen. WCSS unterstützt viele aber nicht alle CSS-Attribute. Deshalb sollte das CSS so einfach wie möglich gehalten werden. WCSS kann nicht in Verbindung mit WML genutzt werden.

 

3. Unterstützung verschiedener mobiler Endgeräte

• abhängig von der anvisierten Zielgruppe

• mittels Anpassung der Darstellung entsprechend der Fähigkeiten des Gerätes kann das Nutzererlebnis verbessert werden

• Nutzer mit schlechter Webunterstützung surfen wenig bis gar nicht im mobile Web, die Berücksichtigung solcher Geräte kann daher in den meisten Fällen wegfallen

• die explizite Unterstützung verschiedener mobiler Endgeräte kann auf ca. 5 der hauptsächlich genutzten beschränkt werden. Ggf. kann ein Serverlog mit Device Detection angelegt werden, um auf Änderungen reagieren zu können.

 

4. Mobile Web

Um dem Handynutzer das Surfen im mobile Web zu erleichtern und ihm zu signalisieren, dass es sich um eine auf mobile Endgeräte zugeschnittene Seite handelt, gibt es mehre Ansätze:

• Nutzung der spezifischen .mobi Topleveldomain statt z.B. .net, .org, .com oder .de

• alternativ Nutzung einer Subdomain mobile.design-maier.de oder eines Unterverzeichnisses design-maier.de/mobile

• automatische Erkennung mobiler Endgeräte und Weiterleitung auf handyfreundliche Seite, so dass der Nutzer nach Eingabe von design-maier.de z.B. automatisch auf design-maier.de/mobile weitergeleitet wird

 

Quelle: Mobile Web Developers Guide von DotMobi

 

Stichworte: WAP, iPad, iPhone, XHTML, WML