xHTML/CSS voor mobile devices

Voor alles is er een eerste keer, ook voor Mobile webdesign. Persoonlijk zag ik het nut niet er niet van in om voor Mobile te gaan xHTML en CSS te schrijven, ik ging ervan uit dat enkel geeks deze media zouden gebruiken, maar als ik nu zo zie wat het allemaal zo kan, en vooral wat het niet kan!!

Wat het niet kan

Ik gebruik TopStyle om mijn CSS te schrijven, deze heeft namelijk een optie dat je kan instellen om enkel CSS voor Mobile te schrijven (of andere editors dit ook kunnen is mij onbekend, maar je mag het altijd laten weten in de reakties), en deze zijn beperkt, zéér beperkt zelfs.

Line-height bestaat niet, display enkel block of inline, position is niet gekend, etc. …

Microsoft

Ja, ze hebben ook een Mobile apparaat en daarop staat natuurlijk Internet Explorer, nu deze heeft er een probleem mee als je je CSS toevoegd via @import, dus je bent beter af met <link> te gebruiken voor de stylesheet toe te passen.

Testing

Ja, testing, hoe in hemelsnaam test je Mobile sites zonder jezelf in de kosten te gooien door het gebruik van verschillende devices, telkens page-refresh te doen? Opera beweert een ingebouwde functie hebben die Mobile device nabootst door shift+F11 te gebruiken, niet dus.

Een speurtocht op het internet leverde mij 4 Mobile device simulators op, een Iphone, Pre, Blackberry en Windows Mobile Internet Explorer 6 welke ik nog steeds niet aan de praat heb.

Gelukkig kon ik rekenen op verschillende personen die via Wifi met hun Mobile op onze test-server konden, zodat ik toch na Iphone, Pre en Blackberry ook nog kon testen op Nokia en konsoorten.

Waarop moet je letten

Standaard W3c xHTML schrijven, dit is al zeker, en naargelang je wensen welke HTML je wil schrijven, de juiste Doctype kiezen ( er zijn er 3 ):

  1. XHTML MP 1.0 ondersteunt naast de modules van xHTML Basic ook ondersteuning voor Formulieren (gedeeltelijk), Presentatie (gedeeltelijk) en CSS
  2. XHTML MP 1.1 biedt daarnaast ook ondersteuning voor scripts, vooral ECMAScript Mobile Profile (ESMP)
  3. XHTML MP 1.2 biedt volledige ondersteuning voor xHTML formulieren en ondersteuning voor het object element.

Semantische xHTML schrijven, voor het geval om de een of andere donkerbruine reden de CSS niet wordt toegepast.

Dat het design fluid is, dus geen pixelperfecte toestanden, geloof mij wat er goed uitziet op een Blackberry of Iphone, ziet er op een Nokia geheel anders uit heb ik mogen ondervinden. Maar je kan dit probleem wel omzeilen door Mobile device specifieke CSS te schrijven, dus als het ware Movile device sniffing. Maar er zijn zo onnoemelijk vele variaties dat je ze bijna onmogelijk allemaal kunt coveren.

Don’t go wild

Het is aangeraden zo weinig tot geen float te gebruken, maar soms kan je niet anders, en poging tot mij te verlagen tot het niveau van tabellen als structuur wierp godzijdank ook geen vruchten af, dus als je je Mobile site zelf gaat designen, of een designer maakt een Mobile versie van een site, Don’t go wild!!

Al iemand ervaring met Mobile device xHTML en CSS?