This morning, as I do on most mornings, I eased the transition between my peaceful slumber and the mayhem of conscious life by lying in bed, catching up on the goings-on of humanity on planet Earth with the help of my iPhone and the Internet.

This usually consists of checking Twitter, Facebook, and my Google Reader feeds, but when that isn’t enough, I’ll occasionally search the web for whatever random piece of information crosses my stream of consciousness. Today that happened to be the Tim and Eric comedy tour that’s currently underway, since I’ll be seeing it when it arrives in Minneapolis on Wednesday. So I googled Chrimbus Tour review and one of the first links that came up was a review on BuddyTV.

BuddyTV is not a site I think of often. I believe I was vaguely aware of its existence before today, but I didn’t know what it was all about and I never had any inclination to visit it. But I was certainly happy and willing to click the Google link and read its review of the Chrimbus Tour.

Unfortunately, the site did not reciprocate that happy willingness. Instead of taking me to the desired review, it detected I was arriving via iPhone, so it shunted me off to an annoying splash page imploring me to download the BuddyTV iPhone app. No thanks, I really just want to read the article I came here for in the first place. Oh, great! You’ve provided an “Or continue to BuddyTV.com” link at the bottom. Thanks!

But — and this is so often the case in this scenario — that link did not helpfully take me to the article I wanted. (And as a web developer, I can tell you it is not at all difficult to make it do that.) Instead it just went to the BuddyTV home page. Now what? I’ll tell you now what: I closed Mobile Safari and got out of bed. Not only did I not download their app; I didn’t expose my eyeballs to any of the ads that pay for their website; I didn’t get to read the article I was interested in; and I was left with such a negative impression of the site that it drove me to this public rant.

All of this is not really to single out BuddyTV for its bad behavior, though. BuddyTV is just one site among many I’ve encountered over the past couple of years that all adhere to this same pattern of deplorably ill-conceived UX design. Surely this is not the reaction the owners of these sites hope to elicit. But it’s exactly what happens with me, every time, and I’m sure I’m not alone.

There is a solution.

We frequent users of web browsers on mobile devices just want to see your site. We want to see the same pages we’d see on our computer. The same content. But it doesn’t hurt to have that content optimized for the mobile browsing experience. Resized to the smaller screen. A streamlined layout that’s easier to navigate with a touchscreen. But, fundamentally, the same experience.

While there are some tools out there to help turn a regular website into a mobile website (most notably Mobify), there’s a far easier solution: CSS3 media queries.

CS-what media what now? CSS3 media queries are, simply, a set of stylesheet definitions that are applied to a web page selectively depending on certain characteristics of the media the page is being viewed on, most notably, screen size.

With CSS3 media queries, you can define an entirely separate set of stylesheet attributes to be applied only when the user is visiting the site from a small screen. Or an extra large screen. Or you can describe a bunch of intermediate sizes, so with the exact same HTML content the user will see a perfectly laid-out page, optimized to their screen, whether that’s an iPhone, a netbook, a “standard” computer monitor or a 30-inch Apple Cinema Display.

I’ve begun working more extensively with CSS3 media queries on some of my own projects lately, and I am very excited about the potential. If you’re a web developer or designer, you should learn about CSS3 media queries now. And if you’re a website owner, you should know that “mobile” sites are sooo 2008. Now you can have your cake and eat it too. You can have the best of both worlds. Insert cliché here. Just don’t subject your site visitors to any more obnoxious plugs for your iPhone app, or dump them thoughtlessly on your mobile home page with no way of tracking down the article they were coming for. It’s not fair to your users, it’s not fair to your public image, and if you’re supporting your site with ads — or, for that matter, if you’ve been convinced to drop a ton of extra cash on developing a separate mobile site, or an iPhone app that just displays your site’s content anyway — it’s costing you money.