Antworten zum Thema "Webdesign für mobile Endgeräte"

[LX]

Hallo, Gunther

Dann versuche ich mich doch mal an einer Antwort:

• Welche Auszeichnungssprache (in welcher Variante) sollte ich idealerweise verwenden (z.B. HTML 4 oder HTML 5)?

Eindeutig (X)HTML5, teilweise so reduziert, dass jene älteren Browser, die nichts mit den neuen Elementen anzufangen wissen, darunter nicht leiden. Außerdem kann man mit ausgeblendeten hr-Tags eine Strukturierung für reine WAP-Geräte erreichen.

• Eine Version für "alle" oder doch besser eine eigene "Mobile Version"? Und wenn ja, wie (UA- / Browser Sniffing)?

Je nachdem, wie komplex die Seite aufgebaut ist. Wenn es wirklich nur um einfache Inhalte mit einer ebenso einfachen Navigation geht, kann man durchaus die gleiche Seite verwenden - aber schon bei etwas mehr Komplexität oder Daten, die im mobilen Umfeld viele Umbrüche verursachen, muss man sich überlegen, bei entsprechenden UA-Strings eine mobile Version zur Verfügung zu stellen. Die Unterscheidung per RegExp->Rewrite bietet sich an.

• Welche Besonderheiten gibt es/ gilt es zu beachten (bspw. meta viewport tag)?

Es gibt 3 maßgebliche Meta-Tags, viewport, handheldfriendly und mobileoptimized. Zudem verstehen viele modernere Browser media queries, so dass man diese zur Optimierung auf die jeweilige Auflösung nutzen kann.

• Welche Aspekte spielen eine besondere Rolle (Anzahl Requests, Datenvolumen, Bildgrößen) und wie setzt man sie am besten um?

Jeder Request kostet Zeit - mit deutlich mehr Latenz als auf dem Desktop. Das Datenvolumen spielt jedoch im mobilen Kontext auch eine größere Rolle. Grundsätzlich gilt also: weniger ist mehr. Ein zusätzlicher HTTP-Request kann schon mal 1-2 Aufrufe (einschließlich DNS-Auflösung) mit insgesamt 3k Datenvolumen ausmachen, die zu einer spürbaren Verlangsamung führen.

Dementsprechend gilt: weniger ist mehr: weniger und kleinere Bilder, Reduzieren der optischen Elemente auf das Wesentliche, Darstellung vorwiegend untereinander statt nebeneinander.

• Mit welchen Besonderheiten und Bugs muss man bei den (gängigen) mobilen Versionen der jeweiligen Browser umgehen?

Am Schlimmsten ist die Formular-Formatierung - da haben selbst moderne Browser teilweise Probleme. Danach kommen diverse Probleme mit Floating im Mobilen IE und im Blackberry (in letzterem teilweise mit dem Effekt, dass Elemente nicht mehr klickbar sind). Opera hat zudem noch einen Fehler im Schriftrenderer, der Breiten teilweise nicht korrekt erkennt und umgebende Nodes abschneidet.

Übrigens sind nicht nur Browser schuld an Bugs: besonders Vodafone neigt zur Filterung der Seiten, wobei der CSS-Code überschrieben und Werbung eingeblendet wird, was man jedoch mit entsprechenden Cache-Policy-Headern verhindern kann.

• Wie kann ich die Anzahl der HTTP Requests reduzieren/ möglichst gering halten?

CSS und HTML in eine Datei. Images sofern es Vorteile bringt in Sprites. JS sparsam einsetzen, ggf. auch mit ins HTML.

• Worauf sollte ich bei der Bedienung auf einem Touchscreen besonders achten?

Der minimale Platz, um ein Node zu treffen, ist bei normal großen Displays 16x16px². Elemente, die klickbar sind, sollten mindestens so groß bzw. so weit vom nächsten Element entfernt sein.

• Wie handhabe ich die verschiedenen Displaygrößen_und_Auflösungen am besten (Stichwort "Media Queries")?

Relative Maße wo möglich, media-queries wo nötig. Solange es keine Schmerzen bereitet, dem Browser die Formatierung überlassen.

• Welcher Browser versteht was und wieviel (HTML5, CSS3)?

Die Frage macht nur dann Sinn, wenn man wirklich jeden dieser Browser einzeln unterstützen möchte.

Gehe davon aus, dass es 3 Klassen gibt:

Moderne Browser
Webkit-basierte Browser, Opera Mini/Mobile, Blackberry Torch, Netfront Access 5, Obigo W10 und IE9 (ab Sommer), Fennec: HTML5 ja CSS3 teilweise

Ältere Browser
mobileIE6/7, Obigo, Netfront Access 4, Opera Mini 4: HTML5 nein HTML4 ja CSS3 nein CSS2 teilweise

Rudimentäre Browser
OVI Browser/Novarra, PocketIE, (auch Blackberry vor 2008:) UP, Teleca, WAPfront: HTML teilweise WAP ja CSS nein

• Welche (zusätzlichen) Möglichkeiten/ Optionen bieten die Endgeräte? Und wie kann ich ggf. darauf zugreifen?

Insbesondere iOS Safari bietet die Möglichkeit, Seiten als WebApps zu betreiben. Google hilft. Safari und der Android Browser kennen touch-Events.

• Worauf kann und sollte ich bei einer Webseite achten, wenn ich_keine_eigene "Mobile Version" davon erstellen möchte?

Semantik.

• Wie wirken sich evt. "Manipulationen" durch zwischengeschaltete Server (z.B. Opera Turbo) aus? Und wie kann ich diese ggf. unterstützen oder vermeiden?

Nicht wahrnehmbar, außer dass es im Opera Mini keine Events in dem Sinne gibt.

• Wie kann ich trotz unterschiedlichster Displaygrößen und Auflösungen die Anzahl an Grafiken durch die Verwendung von CSS Sprites minimieren?

media queries nach dpi (iphone4 retina display) iVm CSS3 background-scale.

Gruß, LX