We do it too. You put together an incredible visual design in Photoshop. It's got sweet details, perfect balance and layout, and fits right onto the grid of your choice. Code it up like a boss, then QA it like crazy so your design looks exactly the same in every browser (well, maybe not IE6). Take a step back. Every pixel is in place. Looks good.
We do this for our clients and our own development, and we bet you do. Well, it's time to stop. The era of perfect control is over, and has been for a while.
The First Hurdle: Desktops
Do you remember Chrome 1? Probably, it wasn't all that long ago. Did you know Chrome is on version 12 now (14, if you're in the dev channel)? Chrome does a pretty good job of masking its versions, but the fact is that the Chrome of today is quite a bit different from the first release. Firefox is advancing faster than before, and you can already check out builds of IE10 (so if you were waiting for hell to freeze over before Microsoft managed to make headway on browsers again, too bad).
Desktop browsers are adding new features, new rendering tweaks, and new CSS and HTML elements all the time. We've never seen the web advance so fast in terms of tools and technology available. Still, preserving a design across all these browsers is...feasible, but not ideal.
The Second Hurdle: Mobile
So you got your design just right on desktop browsers. That's nice, but adoption of mobile devices has already far outstripped desktop machines. Alright cool, you say — I'll check it on an iPhone and be good to go.
Not so fast. While the iPhone is by far the most homogenous mobile platform, there are still two distinct iPhones in use today: retina and non-retina display phones. That's not even the worst of it. By all accounts Android is as large a market as the iPhone for web content, and you know how many types of Android there are?
Neither do we, but it's a lot.
Android has different screen resolutions, DPIs, aspect ratios, and operating systems. Some Android tablets (did we mention tablets, too?) use Chrome, while others use the Android browser. Phones and tablets can be in landscape or portait. Multiply all that out and you could check your design in 100 configurations and still not be done.
The Third Hurdle: Apps
For a while now Apple has been playing up Safari Reader, a feature to strip out the cruft of webpages and just give you the content. Instapaper has been doing this for a while, and there's a few more apps out there that are taking that approach. RSS readers have been positioning your content in a similar way forever now.
How about Flipboard? What does your content look like there? Or how about on the Wii browser (now perhaps soon to be the Wii U browser)? Or the PS3 browser? Or the Kindle? Or Smart TVs?
Building for the Shifting Landscape
For years we've been designing for what we felt like was an annoying abundance of browsers, but that's nothing compared to what's happening now. We're going to be talking more about how to design and build for these new media, but this is what you need to know and plan for right now:
You will never know what device someone will use to view your website, or read your content.
You won't know the dimensions, the screen size, the colors available, or the technology it uses. That means giving up the idea that we're in control of presentation. We can influence, and shape, but not control.
Going forward it's going to be interactions and experience that we shape, more so than the visual presentation of sites or apps. That's good - those have always been the critical, memorable parts of an online product. Start thinking about how what you're working on holds up when you let go of the pixels.