Haupt-Reiter

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

Bewertung: 
5
Durchschnitt: 5 (1 Stimme)

Kommentare

Es gibt zudem die  Mobile Web Application Best Practices Cards und die ausführlichere Mobile Web Application Best Practices als W3C Proposed Recommendation 21 October 2010. Aber wie man sieht, ist dieses noch sehr "frisch" - quasi erst einen Monat alt in seiner jetzigen Fassung. Darin wird den geänderten Verhältnissen auf dem Markt der mobilen Endgeräte mehr Rechnung getragen. Allerdings ist das derart neu, dass ich nicht glaube, dass das schon auf die Prüfung Einfluss hat.

Hallo und danke für den tollen Beitrag!

Ist die Drill-Down-Navigation eine Facetten-Navigation?

 

LG deniz

Keine Ursache. :o)
"drill-down" heisst soviel wie nachforschen. Eine Drill-Down-Navigation ist demzufolge jede Navigation mit Verschachtelung, z.B. ein Drop-Down-Menü. Wenn ich drüber nachdenke, kann eine Drill-down-Navigation wahrscheinlich auch eine Facetten-Navigation sein. (Sofern ich das richtig verstehe, ist das diese Kategoriennavigation mit Einschränkungskriterien, wie sie bei Amazon, Ebay etc. linksseitig zu finden ist? Falls nicht, kannst Du mal eine Definition dessen geben? Ist ja im Zusammenhang mit dem Prüfungsthema Navigationsbutton auch ganz nett zu wissen.)

Wenn man sich http://mobil.ebay.de/ genau anschaut, dann sieht man Tabellen als Layoutmittel!

Wie beim Newsletter werden auch hier Tabellen zum Gestalten genommen. Damit die Website auch wirklich auf jedem Handy gleich aussieht.
Floats oder position relative/absolute kann ich hier nicht finden – also Tabelle.

Das mit den Tabellen bei mobilen Seiten ist absoluter Schwachsinn. Das gilt nur bei Newslettern!

 das kann ich unterschreiben.

Hallo,

die Zusammenfassung entstand bei einer der letzten Prüfungsvorbereitungen, wenn ihr Fehler findet, etwas ergänzen wollt, so könnt ihr das jeder Zeit direkt im Artikel tun. Funktioniert wie bei Wikipedia. Geht oben auf Bearbeiten und nehmt die entsprechenden Änderungen vor. Vielen Dank.

Grüße

Peter

Hallo crabeaux,

vielen Dank für Deinen Hinweis!

Ich hab als einzigen letzten Standard vom W3C den folgenden entdeckt:

http://www.w3.org/standards/history/mobile-bp

Dort wird vor dem Einsatz von Tabellen gewarnt, über geschachtelte müssen wir glaube ich nicht reden. ;-)

Hier noch zwei weitere Links zu diesem Thema:

http://www.thestyleworks.de/tut-art/layout_handheld.shtml
http://www.htmlgoodies.com/beyond/css/article.php/3642151/CSS-Layouts-Without-Tables.htm

Allerdings sind wir für alle Hinweise zu aktuellen Entwicklungen dankbar! Wenn es also etwas neues dazu gibt, bitte einfach posten. Hier ändern sich Dinge natürlich sehr schnell.

Viele Grüße

Thomas Hagenhofer

Ich bin hier recht ratlos.

Muss ich alle mobilen Endgeräte draufhaben, die es so gibt? (zB Handhelds, etc.)

Und was genau soll man zu diesem Thema lernen.

Reicht das, was oben schon steht aus?

 

Freue mich über Rückmeldungen.

... für die kompakte Zusammenfassung!