Media queries that check for things like orientation and screen width are CSS3, which varies in support. However, using them won’t hurt CSS2 browsers.
The idea is to start with mobile setup: flexible boxes, simplest layout ideas that get your information across, an eye on “fat fingers” when looking at buttons, menus etc, and not adding in various bandwidth hogs like loads of JS or large images.
Then use media queries to check for if screen are larger and whatnot, where you can change your assumptions about the device and add things like more Javascript, floated elements, and large images.
This is really too basic to be accurate, and dealing with images in particular is a huge, hot topic right now (search “responsive images” to find countless techniques, attempts and ideas floating around right now).
However, the idea of “mobile-first” is pretty good, though it’s easiest to do when you’ve either got a simple site, or are re-writing a site anyways. The idea is that older devices may have crappy CSS support, little or no Javascript support (or they may support it well, but as it’s CPU-hogging, people may disable it to preserve battery), and no media query support. So if you start with a “mobile”-acceptable version of your site, with basic CSS and low Javascript or none if not really needed, those crappy, older, or deranged devices (and feature phones, who aren’t going away anytime soon) will generally get something appropriate that Just Works.
Newer mobiles with faster, fancier and newer browsers, better CSS support and Javascript capabilities etc, are more likely to support @ media queries: the mobile webkits out there running on Androids and iThings tend to support them, as well as Operas Mobile and Mini. They will be able to support Touch events, landscape orientation (which is a wider screen width) and whatnot, and they’re very likely to get your @media queries and show a richer experience.
Most desktop browsers support @ media queries. IE as usual is the one out. You can get around this with a <!–if lt IE9–> style conditional comment that tells IE to load the “desktop” stylesheets and scripts. But Safari, Chrome, Firefox since 3.0? or 3.5, Opera and derivatives support the media queries and desktop users would get your “rich” version of your site. It’s not always true those folks have better bandwidth; you only know they have bigger screens. But that’s the general idea behind “mobile first”.
If you can stand Slideshare, a mobile-attent company called Yiibu has a ton of absolutely fantastic slides they’ve made about mobile and the problems and solutions.
This was the first one I saw, and it’s influenced many top web developers today: http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
The images show you exactly some common pitfalls and how “mobile-first” would ideally work.
They have other slides at http://www.slideshare.net/yiibu: pragmatic responsive design, the trouble with context, and letting go.
What’s great about these slides is that you can show them to clients and bosses and they can see the issues themselves, and there are plenty of juicy statistics about mobile use as well.
http://stephanierieger.com/a-plea-for-progressive-enhancement/ I kinda like how she rips at the obama site. Someone there did what a lot of web developers are doing: thinking only about small screens and only about iThings, and not testing.
PPK has been doing research on mobile devices for a few years now. He lists compatibility tables and excellent articles like [url=http://www.quirksmode.org/blog/archives/2009/10/there_is_no_web.html]There is no webkit on mobile on his site quirksmode.org.
http://www.quirksmode.org/presentations/USTourApril11/albany.pdf is also great to page through.