Wednesday, July 30, 2008

Mobile Style

I recently redesigned my portfolio website just to make it more simpler in terms of design elements and xhtml markup so that it scales to render on mobile devices too. What I had in mind was to use separate style sheets for the desktop screen and mobile defined using the media="handheld" parameter. Everything was done and uploaded only to realize that my Nokia E51 browser was a wannabe desktop browser who refuses to use the handheld style sheet and instead use the screen style sheet. I asked some of my friends and confirmed that there is no standard defined among the mobile browsers to use the handheld style sheet and all of them try to behave like the full blown desktop browser. But whatever it was I didn’t want to give up. As usual I decided to ask my friend to help me with this; I was sure that he would have a workaround for this…

Friend: You should recognize the user agent at the server side and serve the appropriate style sheet to the browser to fix this problem.

Me: But how is that done? Can you please help me…

Friend: Ok. So what you have to do is to have two separate style sheets, screen.css and mobile.css in the server but attach style.php to your xhtml page instead of the css file. Style.php will decide which style sheet to serve the browser according the user agent from which the request comes in. ie For all mobile phones, ipods and iphones it will serve mobile.css and others will get screen.css. Also you have to have in your server which will recognize your user agent and inform style.php.

Me: Oh ok I kinda get it now. Just one more question. Can the iphone/ipod use a seperate css file?

Friend: yeah try to change the logic in style.php

Me: Come on you know that I don’t do coding

Friend: Ok so you use this version of style.php which allows you to use the file iphone.css for iphone/ipods

Me: Thanks a lot man
Yipee now my site works well on my E51 and also iphone, haven’t checked other devices though. There is still more work to be done on the site, little more play around with pictures and more portfolio updates etc.

No comments: