Is it good to have CSS in <head> for mobiles site? because there will be not much css to write and maintain.
Like this http://www.emirplicanic.com/uploaded/tutorials/mobile/
<head>
<style type="text/css">
css here...........
</style>
</head>
It will save one HTTP request. We can keep one common header.php for site.
Or keeping css in <head> is still a bad idea on mobile websites?
Wouldn't recommend it.
You might save one HTTP request initially (remember a CSS -file- is cached), but in the long run clicking around I think you'll find the gain is minimal if any, AND you're adding extra text to be sent through with every request. Maintenance is important to consider too.
Check out the size of the HTML on that page, more than half of it is CSS.
External css saves bw but i came across situations where some phones were unable to process external css. If you want to cover broad range of devices it may be good idea.
I've just recently had this discussion within our team. Our conclusions were to inline the CSS (against having them as separate downloads and relying on expires headers to cache on the phone). some of our key considerations were:
There is a lot of latency establishing a connection, so inlining the CSS has a big advantage on feature phones that do not support caching the files locally with expires header.
For phones that support expires generally also support payload compression, so using compression compensates for the additional css in each download.
This strategy loses out on phones that support expires, but do not support compression. We figure this is a pretty small % of our users.
Addressing @Bob's maintenance point, we keep all the css in separate files on the server, and it is injected into the HTML as this is being generated (serverside is JSF). If you don't have this option, then I agree with Bob - it will become a maintenance nightmare.
Note: We cater to both smartphone users with WIFI (20%), smartphone over 3G/Edge (40%) and feature phone users over 3G/Edge (40%).