For as long as mobile sites have been around the conventional wisdom has been: build your website first and then create a mobile site as an add-on; creating a distilled, streamlined version of the desktop site. This makes sense, no? A few weeks ago I discovered that we've been doing it wrong*. Here's why:
The first point is the most important: the use non-desktop (mobile) devices to browse the web will soon outpace access by traditional computers. I've been predicting within the next two years domestically within the United States - although new results regarding iPad adoption may mean this is conservative. It may be even faster in developing countries.
Rather than trimming websites down via CSS or JavaScript detection, the default experience should be the simplest (aka mobile) one. Functionality can then be layered on via progressive enhancement, depending on the device capabilities. If you don't, you're relying on less capable devices to filter information, rather then taking advantage of devices than can easily integrate more complex content.
This one is tricky. With the advent of of the iPad, netbook & GoogleTV browser detection is starting to fail and there is no way to accurately predict what devices the future holds in terms of non-traditional computing. On the other side of the spectrum, with the inclusion of locative information in html5, laptops and desktops are now expanding into realms previously reserved for smartphones. By way of example, what would you call my laptop if I'm using wi-fi on a plane or train? What would you call a computer built into a car?
Look at device capabilities - not devices - and layer on functionality that they accept. The key metrics would be:
There are certainly other things that could be detected here, but with those four cornerstones you can progressively build a site that will work on any device, no matter what viewable area, connection or features that are currently available. There's still the problem of implementation for most content management systems, especially those that are beholden to WYSIWYG editors for large chunks of their markup (thanks to @grigs for pointing this out), but some CMSs - like Drupal - could be retrofitted to make this possible. Design also becomes more challenging and would require flexible, modular designs.
All told, this brave new process is not for the faint of heart - or your local floral merchant. It has the biggest impact on the biggest sites out there. However even when designing for your local floral merchant if you want a site retain its value past 2012, you may want to go mobile and build the desktop site as an add-on.
* Credit for this epiphany belongs to Bryan Rieger. His epic slideshow (140 slides) is both beautiful and mindblowing.