We are working on a site right now which is designed to be tailored to Phones, Tablets, and Desktops. (once it's in the wild, i'll update this post with the link.) I have personally been producing things using HTML since 1996 and was a witness to and victim of the The First Browser War, the second browser war, and everything since. Those were some crappy times for trying to deliver a good experience - and that was only concerned with desktops!

Now we have the challenge of 3 silos with 3 different sets of concerns and challenges.

  1. Desktops.
    The old standby. Tons of horsepower, tons of screen real estate. There is still a vibrant competition going on here, but aside from OS-makers producing inadequate minefield-laden browsers as they typically do (here's looking at you Microsoft and Apple), Firefox, Chrome and Opera are delivering a pretty good set of features without too much adjustment or hacks between them when delivering a site.

  2. Tablets
    Things start getting interesting here. You basically have the screen real estate of a desktop or notebook but you're now in the territory of crippleware OS's, walled gardens, and heavy market penetration by the worst mobile browser out there - iOS Safari. I'm not saying it's absolutely atrocious, but out of the pack, i've found it to be easily the worst as soon as you step off the beaten path and i am greatly reminded of the IE6 days. Tablets also lack the sheer horsepower of a desktop, but they are pushing some serious pixel counts these days. It makes for some end-user expectations. And now with Windows 8 tablets sporting a full OS, and IE 10, things are shaking up again. Great!

  3. Phones
    Phones have been left out in the cold. If you do as much couch surfing as i do on a phone, you know what i mean. 95% of sites i hit are not tuned to the phone. The phone traditionally offers the least horsepower and the smallest pixel counts, but that's changing rapidly. The one main interface issue is one of size. You don't want text to get but so small, and you interface with your fingers - your fingers aren't going to shrink so you need reasonable large hit-targets for navigation and other links on a device with limited visual real estate. So the device is small, but everything on it needs to be proportionally large. Fun!
    And again you're dealing with crippleware OS's and browsers with similar penetration and quality as on tablets.

So now that the stage is set - back to our implementation. I decided to take an approach which increases the number of files we deal with but maximizes our flexibility and options. Early in the initial site request i put work into trying to make my best determination about your user agent - are you a Desktop, Tablet, or Phone? From there i deliver completely isolated render paths. We don't share html, css, javascript, images or any resource that we don't need to share. We can share of course, but we are not systematically required to.

While this seems like excessive work and files - essentially tripling the number of resources we are generating, i will say unequivocally that this has been the right choice for us. There is easily enough variance across devices to demand this. Heck, i've been resisting the urge to further segment out Safari and Silk. This way we can go far beyond media queries for show/hide of aspects, resizing elements and text, etc - we can deliver tailored experiences per device.

This is not to claim that all is sunshine and roses - even with the flexibility afforded us, UI/UX, user expectations, and browser capabilities are still in massive flux on phones and to a slightly lesser degree on tablets. It's a brave new world.