Go here: http://www.arsenalfirearms.com/
Now change the width of your browser. Did you see that? That almost magical™ change to the site's styling? That nice (if not slightly odd) middle-ground between desktop and mobile compatibility?
Here's a couple of screenshots in case you missed the obvious or you were too lazy to click on the above link and roll through my relatively simple exercise:
 |
| The Arsenal Firearms website when viewed in a standard browser window. |
 |
| The Arsenal Firearms website when viewed in a tighter browser window. |
I've seen a lot of different development techniques used to address the issue of mobile browsing over the years, and it's always nice to actually find new and unique examples of this functionality.
There are some small flaws and potential issues with the Arsenal site's specific application (mobile functionality creeping into the desktop experience being one). But the catch-all approach of enabling/disabling the mobile stylesheet based on the viewport width helps polish out a long list of potential usability issues that come up when making a website as browser agnostic as possible. Not the least of which is the imperative need to consistently find that "sweet spot" across an always expanding list of smartphone, netbook, and tablet SKUs.
I'm not shy in saying that I have every intention of duplicating something similar for some of my clients (where appropriate).