Tipps für die Erstellung einer mobilen Website

[Das Ursel]

die Analyse der logfiles einer (Shop-)Website ergab, dass es zwar relativ viele Besucher mit Mobilgeräten (iPhone, Android) gibt, aber nur relativ wenige Käufer mit selbigen.

Das wird sicher daran liegen, dass sich die Site auf den kleinen Dingern nicht sonderlich gut bedienen läßt.

Das kann ein Grund sein, ein anderer kann aber genauso gut sein, dass man auf dem Klo nicht so viel einkauft und an der Bushaltestelle zwischen zwei Zigarettenzügen noch weniger.

Es ist also Zeit für einen mobile Version.

Es ist Zeit für CSS.

Gibts irgendwo eine gute Zusammenfassung aller Aspekte auf die man achten sollte?

Hier: Die Seite sollte sich so darstellen, dass man ohne Umstände den Überblick behält. Noch unbeliebter als Zweiwegewischenmüssen soll nur ewiges Vergrößernmüssen sein.

Also: Schriftarten und -größen,

Grundsätzlich:
1. An der Standardschriftgröße, diejenige, in der der meiste Text auf der Seite dargestellt wird, wird niemals rumgefummelt. Für Mobilbrowsern nicht und für "normale" PC-Browser auch nicht.
2. Alle anderen Schriftgrößen beziehen sich auf die Standardgröße, d.h. in % oder em.
3. Ausnahmen bestätigen die Regel.

Bildergrößen

Bilder passen sich mit der CSS-Angabe width:100% automatisch an zu kleine Bildschirme an.

Grundsätzlicher (gestallerischer) Aufbau

Weniger ist mehr. Mit @media lässt sich auf die Bildschirmgröße reagieren und überflüssige Elemente gegebenenfalls ausblenden.

Arbeite davon unabhängig so viel wie möglich mit % und em.

Desweiteren möchtest du <meta name="viewport" content="width=device-width, initial-scale=1.0"> in deinen Seiten haben. Mobilbrowser erwarten bei einer Seite ohne solche Angabe, dass sie für einen großen Bildschirm gestaltet wurde und stellen sie mit einer Breite von 800 bis 1000 Pixel dar (je nach Browser), die komplett auf den Bildschirm des Telefons gequetscht wird. Deshalb sehen viele Webseiten auf dem Mobiltelefon so aus als hätte jemand einen PC-Monitor geschrumpft.
Die vollständige Erklärung findest du bei MDN, Apple und Quirksmode.

JavaScript-Bibliotheken

.. gibt's wie Sand am Meer. Mit den üblichen Verdächtigen kann man nicht viel falschmachen.

Auf Grund der Vielezahl der Geräte ist das Testen des Ergebnisses wahrscheinlich noch schwieriger als bei der Browservielfalt auf PCs.

Um so wichtiger ist das Einhalten der Webstandards.