Please provide me pointers for css guide lines for mobiles.

Question

Please provide me guidelines for css for mobiles. The specific questions are:

1. What are the recommendations for the width? Should it be fluid?
2. Any recommendations for usage of Ajax in them.
3. Can Jquery be used. Does all the fancy methods supported
4. Any emulators that I must be using?
5. Any framework that would ease the pain?
6. Recommendations for the interaction. Any specific type of interaction to be avoided or to be exploited. For example say is dragging and dropping kind of interaction good for the mobile app.
7. Any websites that I must see before even I think about coding css for mobiles.

Answer 1

I'd suggest reading Cameron Moll's short book, Mobile Web Design. It came out right before the iPhone and other smartphone explosion, but it's a good primer. This is especially true if your goal is to write mobile websites for the majority of mobile phones.

Generally, you have a lot to consider when coding mobile. The most important is context. Another thing to consider is that the user's 'pointer' (their finger) is a 40px oval, not a 1px mouse point.

For inspiration and tips, see this Smashing Magazing article: http://www.smashingmagazine.com/2009/01/13/mobile-web-design-trends-2009/

Answer 2

Well, everything depends a lot on which mobiles are you targeting. A lot of the mobiles out there are pretty dumb and have simple browsers. Will you target them? Everyone is targetting iPhones and other browsers with sophisticated browsers. Would that make sense for you?

What are the recommendations for the width? Should it be fluid?

You probably want a single column design which uses the whole width of the screen. No sense in making it fluid

Any recommendations for usage of Ajax in them.

I would not recommend it. The non-sophisticated browsers do not support it- a lot of them have no Javascript. Some sophisticated browsers will not. Also, with lightweight websites, Ajax does not make so much sense.

Can Jquery be used. Does all the fancy methods supported

See above

Any emulators that I must be using?

Opera Mini. Lynx (or any other text-mode browser). You can also use some JS bookmarklet or extension to resize your browser to a narrow (240px) width.

Any framework that would ease the pain?

If you do target dumb browsers, take a look at WURFL. It's a server-side user agent-based browser sniffer which tells you what does the user's browser support, screen resolution, etc.

Recommendations for the interaction. Any specific type of interaction to be avoided or to be exploited. For example say is dragging and dropping kind of interaction good for the mobile app.

Again, it depends on your target. I would suggest using just links if possible. All content should be accesible following links. Forms should be reduced to the bare minimum. Text-input doubly so.

Any websites that I must see before even I think about coding css for mobiles.

http://mobiforge.com/ is rather good.

p.d.: I suggest you try out a dumb phone browser...