When I am talking about mobile css, I am looking for safari in iphone, blackberry default browser and this new born but the mobile browser for majority to be - opera mini. These days, in spite of the fact that the third generation phones - smart phones have made the majority share of cell phone market in US, unfortunately the mobile web hasn’t come to a universal standard that we can apply like we do to those modern computer browsers. As a result, when designing a website for mobile, it usually takes more effort to find a solution to browser compatibility and accessibility. And funnily, most smart phones don’t consider themselves as handheld device, thus this “handheld” media for CSS doesn’t work for them:
<link media=”handheld” href=”mobile.css” type=”text/css” rel=”stylesheet” />
First of all, iphone and its default browser Safari.
Yes, iphone made everything easy for everyone, not just consumers but also iphone application developer as well as web designers 
So this approach is rather simple comparing to all other smart phone devices.
<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
In order to include all other devices which consider themselves as handheld, we tweak this line to be more general:
<link media=”handheld, only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
To be even safer, there are times, the device width is 320 pixel or less. So here we are:
<link media=”handheld, only screen and (max-device-width: 320px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
Everything works perfectly well with these two lines, except when you come to W3C CSS validator. Yes, W3C doesn’t recognize the mobile style lines, and it doesn’t let them pass through validation. And there is really nothing you can do about it. for more info, you can see some discussion here: http://csscreator.com/node/28171
Blackberry and its default browser.
Blackberry doesn’t pickup any mobile style sheet no matter what media you set to it, not handheld, not width 480px or 320px. There is only one way to give blackberry a mobile looking page - using javascript and direct the page to a blackberry. Below is the script that works. I also tried to apply some mobile style sheet without directing the page to another, but unfortunately didn’t work. more details hereinafter:
<script type=”text/javascript”>
var deviceBB = “blackberry”;
//Initialize our user agent string to lower case.
var uagent = navigator.userAgent.toLowerCase();
var cssFile = “mobile.css”;
//**************************
// Detects if the current browser is a BlackBerry of some sort.
if (uagent.search(deviceBB) > -1) {
//document.getElementById(’blackb’).href = ‘mobile.css’; // this doesn’t work
window.location = ‘home_bb.html’;
//document.write(’<link href=”‘+cssFile+’” type=”text/css” rel=”stylesheet”>); //this doesn’t work either
}
</script>
Opera Mini
It’s a cool mobile browser, which works well with most smart phones - blackberry, iphone, treo palm, etc. To display your mobile CSS on this browser, all you need is still the two lines:
<link media=”handheld, only screen and (max-device-width: 320px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
<link media=”only screen and (max-device-width: 480px)” href=”mobile.css” type=”text/css” rel=”stylesheet” />
There is this Opera Mini simulator http://www.opera.com/mini/demo/, which makes it possible to test your mobile styles without a mobile phone, however, it only gives you FALSE result. So don’t use it for testing. Install it to your mobile phone and do the real test from there!
Issues you see in real mobile phones but not in simulator:
Opera Mini doesn’t pick up the font size setting in css. Here is the sentence I got from wikipedia: Opera Mini supports only one font, which can be set to “Small”, “Medium”, “Large”, or “Extra large” size.
http://en.wikipedia.org/wiki/Opera_Mini
The default setting of font size in mobile phone is “medium”. Be aware of this issue when you design the mobile styles, if you are targeting Opera Mini as your mobile browser - use one font size - medium for all text and let it fit in the page.
Delicious
Stumbleupon
Digg
Working on a printing CSS today, and I found when I tried to print or print preview the page in FF, it only prints/shows the first page, the rest are just blank. This issue only exists in FF browser, all others (IE6-8, Safari) are just fine. So what causes the problem and what’s the solution?
It’s not hard to implement a semi-transparent block by CSS in all modern browsers. The code is something like this:
When it comes to free CMS, people usually think of Joomla, Drupal, openSourceCMS, etc. Yes, those are good CMS, and we have made a few websites by using those systems and they all turned out to be great in terms of usability. However, what impressed me the most is the open source PHP/MySQL based Wordpress. With a false impression of a blog CMS, it won’t come up to many un-geeky people’s mind when they want to have a CMS for their regular static page based website. However, as a web professional, I would strongly recommend wordpress as the first CMS choice for most of my clients, because it’s simply great and powerful to develop and use, not just as a blog CMS, but also in all. You can certainly use it for a regular blog free website.
One thing I have to admit is that I am not an active trend follower, which might not be good for a web designer. So when twitter has become a trend, I didn’t pay much attention to it, until one day I found it’s already everywhere that I can’t even avoid it any more… Yes, it IS everywhere, all TV news, celebrities, everyday enormously growing amount of random people, and even US governments, are all using twitter. It’s not just another social networking website, it is a phenomenon of the generation. It’s quick, short and full of information that you are interested in…. this is exactly what we are for.