Stop! You are doing mobile wrong!

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:

1. Mobile devices will outpace traditional computers.
2. Devices with fewer capabilities need to be the default.
3. There is no mobile.

1. Mobile will outpace traditional computers.

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.

2. Devices with fewer capabilities need to be the default.

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.

3. There is no mobile.

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?

So what can we do?

Look at device capabilities - not devices - and layer on functionality that they accept. The key metrics would be:

1. Javascript - Combined with AJAX this opens the door for dynamic progressive enhancement.
2. Resolution - Certain functionality should be reserved for larger screens.
3. Bandwidth - With the advent of EDGE and 3G networks, we're not quite back to the days of dial-up but we should be aware of bandwidth before trying to push large files.
4. Location - If a device provides you with location, this can dictate specific functionality.

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.