Focusing on Mobile-phone usability - Needs Help


Well I’m pretty new to mobile phone web browsing and development, but I understand that this concept is growing… FAST. The thing is, I know almost nothing about it. I’ve looked around on YouTube, Google, but all I get really is a website to go to that makes designing “easy” and I want to be able to look at the code, not drag and drop.

Is there a way to add something in my header that would relay mobile phone users to a different CSS/HTML file?

My site actually looks fine on my Sprint/Android, except the home page looks like crap because everything is crammed together and I am also using a flash slide show that doesn’t work, and obviously won’t on iPod/iPad.

Anyone know any good resources?


There are various ways to approach this, from creating a separate website (only really practical for very large sites) to browser detection (not generally recommended) to offering up different styles depending on the device. The latter is certainly growing in popularity. Some mobile browsers now recognize CSS media queries, which are fun to use. The CSS is targeted to certain screen sizes/resolutions. Normally, you design your site for the desktop and then offer up different mobile styles via an @media query. However, this leaves mobile devices that doesn’t support them in the dark. So there was a recent proposal to design for mobiles first, then use media queries for desktop browsers that understand them. It’s worth a look:

Rethinking the Mobile Web by Yiibu