XHTML/CSS for mobile devices

Design downgrading

I use the awesome program TopStyle to write CSS. This has the option (in preferences) to select to write Mobile CSS, so you have the limited available CSS properties you can choose from, and they are very, very limited.
In Mobile CSS:
line-height doesn’t work,
display only block or inline,
position is not known, etc. …

Microsoft

Sure, they also have Mobile devices, which, of course, use Internet Explorer as a standard browser.  So if you have to support these devices, do not point to the CSS with @import, because as you probably know, all IE’s have trouble reading CSS via @import if you only specify one media.
So use <link> instead.

Testing

Okay, that brings us to the most difficult task, how to test mobile sites without coughing up so much money to buy all the different devices, and if you would, how much are you willing to pay to do page-refresh and  to consume bandwidth?
Opera claims you can simulate a mobile device in a desktop version by pressing shift+F11 …. Not!

After spending a lot of time searching for phone simulators, I came up with only 3  easy to install and working phone-simulators:

1.Iphone
2.Pre (palm)
3.Blackberry

I also found a Windows Mobile Internet Explorer 6 simulator, I dare you to get this one working without having all those (3 big ones) side-programs this program relies on.
It helps if you have people around to help you to connect to your test-server by Wifi, so testing for Nokia and similar devices was possible.

You should pay attention to …

1) Writing Standards W3c’s XHTML , (that’s for sure) and choosing the right Doctype according to your needs. There are 3 Doctypes to choose from:

1.XHTML MP 1.0 – supports beside XHTML basic, forms (partially), presentation (partially) and CSS
2.XHTML MP 1.1 – supports scripts: ECMAScript Mobile Profile (ESMP)
3.XHTML MP 1.2 – full support for forms and you can use the <object> element

2) Writing semantic XHTML, if in some weird situation the CSS is not loaded.

3) Your design is fluid, no pixel-perfect designs. Believe me, what’s looking great on Iphone or Blackberry, looks broken on a smaller device. You could solve this problem by writing device specific CSS, so like browser sniffing (like back in the old days, browser sniffing during the browser-wars), but there are so many different devices, you can never cover them all!!

Don’t go wild

If you are a designer, this part is for you: it’s advised to not use floats (elements next to each other), or limit them as much as possible (less is more).
You could solve this problem by bringing yourself down to the level of table-lay-outer, but believe me, this approach, thank God, won’t work.

So if you are about to design a mobile site, or the designer has to make a mobile version of a site: Don’t go wild.

Do any of you already have experience with Mobile device XHTML and CSS?