CSS-Formatierung für mobiles Web
XHTML-MP dient zur Strukturierung der Inhalte, liefert aber wenig Unterstützung für das Layout oder die Formatierung. Dies wird im mobilen Web durch CSS erledigt. Versuchen Sie nicht eine mobile Website mit einem Tabellenlayout zu formatieren - Mobile Browser haben schon so genug Probleme mit Tabellen, das pixelgenaue Positionieren mit Tabellen funktioniert erst recht nicht.
Der Sprachumfang von CSS für mobile Devices ist um einiges kleiner als die aktuell produktiven Standards für CSS 1.0 oder CSS 2.0. Weitere CSS-Elemente sind zwar im Sprachstandard enthalten, verhalten sich aber im mobilen Browser anders als erwartet.
Positionierung von Elementen mit CSS
Aufgrund der schmalen Displays ist die Nutzung von float nicht erlaubt. Dies schließt die zweispaltige Darstellung mittels eines links oder rechts fließenden <div> aus.
Leider fallen diesem Umstand auch die für eine Menueleiste in einer Reihe positionierte Div's und Span's zum Opfer. Als Alternative sollte man die Texte die in einer Zeile nebeneinander stellen und mit Pipe-Symbolen trennen. Die zumindest spaltengenaue Positionierung bleibt dabei aber genauso auf der Strecke wie eine feste Breite eines Text-Eintrags. Einzige Möglichkeit einer geordneten Positionierung wären Bilder als Schaltflächen, die aus naheliegenden Gründen (zusätzliche Dateien, mehr Datenübertragungsvolumen) auch nicht gewünscht sind.
Den Eintrag "position=relative;" oder "position =absolute;" können Sie sich sparen: Die meisten mobilen Browser erkennen diesen Eintrag nicht oder nehmen ihn zum Anlaß die Box abweichend von der Position des Inhaltes zu setzen. Das Boxmodell der meisten ab Werk implementierten mobilen Browser läßt hier deutlich zu wünschen übrig.
Die Angabe von "display: block;" und "display: inline;" funktionieren nicht oder werden falsch interpretiert. Wenn Elemente nicht bereits die "natürliche" Eigenschaft eines Inline- oder Block-Elementes haben, sollte man nicht versuchen dies zu erzwingen.
Größenangaben
Größenangaben in Pixel sind zwar grundsätzlich möglich, werden aber von Dotmobi und dem dortigen Testtool nicht gerne gesehen.
Aus gutem Grund: Während man sich beim klassischen Macintosh darauf verlassen konnte das der Bildschirm mit 72dpi gerechnet wurde, sind es beim Windows-PC schon 96dpi und mehr. Bei Apple's iPhone gibt es Hinweise auf beachtliche 168dpi Auflösung im Display. Eine absolute Angabe wie "9px" bedeutet hier eine winzige, kaum lesbare Schrift.
Zeichen Sie die Font-größen grundsätzlich mit "em" oder in Prozent aus. Diese relativen Angaben beziehen sich immer auf die Default-Einstellung der Schriftgröße im Browser und ergeben auch bei unterschiedlichen Pixeldichten ein einheitliches und vor allem lesbares Bild.
Auch bei Boxen ist die Größenangabe in Pixel nicht gerne gesehen: Von einigen Browsern werden diese Angaben ignoriert, vor allem wenn das Element dadurch einen horizontalen Scrollbalken hervorrufen würde. Weglassen ist hier zur Zeit die sicherste Methode.
Leider gilt das auch für die Höhe(height). Eine Logo-Grafik mit der richtigen Größe schafft hier im Einzelfall Abhilfe. Nutzen Sie jedoch keine Blindgifs: Obwohl die Datei winzig ist, verlängert sie die Ladezeit der Seite überproportional. Sie sollten aus diesem Grund auch einen zusammenhängenden Grafikbereich nicht in mehrere Dateien teilen, sondern nach Möglichkeit eine etwas größere zusammenhängende Grafik verwenden.
Und jetzt?
Im Developer-Bereich von Dotmobi (Links für Entwickler) gibt es eine etwas genauere Aufstellung der einzelnen CSS-Elemente für mobile Geräte.
Das Design von mobilen Seiten unterliegt noch einer Menge Einschränkungen. Versuchen Sie nicht das letzte aus Ihrem CSS-Layout herauszuholen. Aufgrund der Vielfalt der Endgeräte und ihrer Darstellungsmöglichkeiten ist es im Moment sicherer nur fließende Layouts mit sehr konservativem Einsatz von CSS zu gestalten. Pixelgenaues Positionieren bringt dagegen im Moment mehr Probleme als es lösen kann.
nach oben