Tipps für die Erstellung einer Mobilen Website

[Ralf]

Hallo,

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.

Es ist also Zeit für einen mobile Version.

Gibts irgendwo eine gute Zusammenfassung aller Aspekte auf die man achten sollte?
Also: Schriftarten und -größen, Bildergrößen, Design und Grundsätzlicher (gestallerischer) Aufbau, JavaScript Bibliotheken die man verwenden kann/sollte, solche, die man sich verkneifen sollte, etc...

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

Wie macht ihr das?

Gruß

Ralf

[Gunnar Bittersmann]

@@Ralf:

nuqneH

Es ist also Zeit für einen mobile Version.

Nein. Es ist Zeit für eine Seite, die sich auf allen Geräten ansehen und bedienen lässt.

Design und Grundsätzlicher (gestallerischer) Aufbau

Responsive.

JavaScript Bibliotheken, die man sich verkneifen sollte

Alle überflüssigen. Braucht man sowas wie jQuery? Oft nicht.

Conditional loading: Bei Geräten, für die man ein Widget nicht einbindet (sondern auf die Inhalte verlinkt), brauch man auch das JavaScript dafür nicht.

Qapla'

[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.

[Gunnar Bittersmann]

@@Das Ursel:

nuqneH

2. Alle anderen Schriftgrößen beziehen sich auf die Standardgröße, d.h. in % oder em.

Oder rem. Oder vh, vw, vmin, vmax.

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

Und wenn man Bilder bei großen Bildschirmen nicht vergrößern möchte, verwendet man nicht width, sondern max-width: 100%.

überflüssige Elemente gegebenenfalls ausblenden.

Bei Inhalten, die auf einigen Geräten nicht anzeizeigt werden sollen, sollte man überlegen, ob man sie mit diesen Geräten überhaupt laden und im DOM haben will.

Qapla'

[Das Ursel]

2. Alle anderen Schriftgrößen beziehen sich auf die Standardgröße, d.h. in % oder em.

Oder rem. Oder vh, vw, vmin, vmax.

Angesichts der Daten unter http://caniuse.com/#search=vw, möchte man das für die letzteren Vier lieber nicht - schon gar nicht angesichts der Spalte "Android Browser" und der Fragestellung Mobilunterstützung: Wenn der an Nutzerzahlen gemessene Großteil der Mobilbrowser mit so einer grundlegenden Angabe nichts anfangen kann, könnte man sich die Mobilunterstützung im Grunde auch gleich komplett sparen.

überflüssige Elemente gegebenenfalls ausblenden.

Bei Inhalten, die auf einigen Geräten nicht anzeizeigt werden sollen, sollte man überlegen, ob man sie mit diesen Geräten überhaupt laden und im DOM haben will.

Sollte diese Überlegung wieder darauf hinauslaufen, eine Browserweiche, gesonderte Mobil-Seiten oder eine wie auch immer geartete Durch-die-Brust-ins-Auge-Methode zu nutzen: Nein.

[Gunnar Bittersmann]

@@Das Ursel:

nuqneH

Oder rem. Oder vh, vw, vmin, vmax.

Wenn der an Nutzerzahlen gemessene Großteil der Mobilbrowser mit so einer grundlegenden Angabe nichts anfangen kann,

… ist das kein Grund, diese Angabe für Browser, die damit etwas anfangen können, nicht einzusetzen. Progresssive enhancement.

Bei Inhalten, die auf einigen Geräten nicht anzeizeigt werden sollen, sollte man überlegen, ob man sie mit diesen Geräten überhaupt laden und im DOM haben will.

Sollte diese Überlegung wieder darauf hinauslaufen, eine Browserweiche … zu nutzen

Nein, nicht browser detection. Sondern feature detection.

gesonderte Mobil-Seiten

Nein.

Qapla'

[molily]

Hallo,

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.

Die Standardschriftgröße ist nicht sakrosankt, sondern einfach eine willkürliche Einstellung im Browser-Stylesheet. Sie drückt in aller Regel keine Wahl des Nutzers aus. Sie gewährleistet nicht, dass der individuelle Nutzer auf dem jeweiligen Gerät in der jeweiligen Nutzungssituationen Text in dieser Größe gut lesen kann.

Mit wie vielen Device-Pixeln der Text letztlich dargestellt wird und wie groß ein Device-Pixel physikalisch ist, hängt ohnehin von dem Gerät ab.

Grüße,
Mathias

[Gunnar Bittersmann]

@@Das Ursel:

nuqneH

1. An der Standardschriftgröße, diejenige, in der der meiste Text auf der Seite dargestellt wird, wird niemals rumgefummelt.

Das ist Quatsch. Verschiedene Schriftarten erscheinen bei gleicher nominaler Schriftgröße verschieden groß – sei es wegen unterschiedlicher x-Höhe oder einfach nur, weil die Schriften so entworfen wurden, dass die Glyphen die Höhe unterschiedlich ausfüllen (Vgl. Impact und Haettenschweiler). Leichte Anpassungen (Faktor 0.8 bis 1.2) sind da geradezu angesagt.

Qapla'