Das Darstellungsproblem

Der Bildschirm eines mobilen Gerätes ist wesentlich kleiner als der eines Desktop-Rechners. Obwohl die Auflösungen mittlerweile relativ groß sind – als Beispiel seien die 960 x 640 Pixel des iPhone4 angeführt – sind Schriften mit einer festen Höhe von 10 Punkt nicht gescheid lesbar.
Die Pixeldichten mobiler Gerät zeigen eine deutliche Tendenz nach oben. Sehr deutlich zeigt das die Entwicklung beim iPhone von der 3GS-Version zum iPhone4 hat sich die Pixeldichte verdoppelt. Problematisch ist dabei, dass es kaum Geräte mit gleicher Pixeldichte gibt.

Die Grafik verdeutlicht das Problem.
Sie zeigt, wie viel Platz eine Div-Box mit einer festen Breite von 72 Pixel im Verhältnis zu 1 Zoll auf den Displays der entsprechenden Geräte einnimmt.
Während 72 Pixel auf dem iPhone 3GS 0,4 Zoll einnehmen, sind es auf dem iPhone 4 nur mehr 0,2 Zoll.

Dieses Problem führt dazu, dass das Design nicht auf fixen Pixelangaben basieren darf.
Der Schlüssel zum Erfolg liegt an dieser Stelle beim Viewport. Der Viewport gibt mobilen Browser an, wie breit das Browserfenster angenommen werden soll.
Wird dieser Meta-Tag nicht mitgegeben, setzen webkitbasierte Browser einen virtuellen Viewport – beim iPhone liegt der bei 980 Pixel, bei Android variiert er je nach Gerät zwischen 800 und 1000 Pixel.
Beim Gestalten einer mobile optimized Website muss die Bildschirmauflösung der verschiedenen Geräte nicht berücksichtigt werden, sofern man folgende Punkte beachtet:

• Festsetzung des Viewports (sichtbares Browserfenster) auf die eigentliche Screengröße
• Elemente nicht absolut definieren, relative Angaben wie Prozent (%) und em bevorzugen

Die Festsetzung des Viewport wird mit folgendem Code erreicht: <meta name="viewport" content="width=device-width" />
Hier macht es dann auch Sinn das Zoomen zu unterbinden. Relative Angaben wie Prozent oder em sollten bevorzugt werden, um die Website für möglichst viele unterschiedliche mobile Geräte mit ihren verschiedenen Bildschirmauflösungen nutzbar zu machen.

Auf Grund der geringen Screenbreite und der zumeist vertikalen Ausrichtung kann man eine mobile Website als ein vertikales Scrolldokument bezeichnen. Vertikales Scrollen an einem mobilen Endgerät stellt kein Problem dar. Horizontales Scrollen ist jedoch problematisch. Muss man als User sowohl vertikal als auch horizontal Scrollen verlirrt man schnell den Überblick. Demnach wird das Einspalten-Layout empfohlen, wenn keine Fixgrößen verwendet werden. Fixe Breiten könnten horizontales Scrollen jeder Zeile bewirken. In diesem Fall sind Mehrspalten-Layouts auf mobilen Geräten besser zu lesen. CSS3 Media Querys ermöglichen die Festlegung des Spaltensatzes anhand der Screenbreite.

Wer sein Smartphone gerne outdoor verwendet, wird einen weiteren Teil des Darstellungsproblem kennen. Websites sind bei direkter Sonneneinstrahlung grundsätzlich schlechter zu sehen als bei Dunkelheit. Deshalb sollte beim Design aller Optimierungsansätze auch starke Farbkontraste geachtet werden.