Liquid Courage

Don't get me wrong, I'm no designer. I try, but all developers try at one point or another to design websites. Few of us try and are successful. I've heard there are even some of us that can do both really, really well. There should be a category in the Webbys for these people and their talent, because it makes others look at them with such awe in their freakish rarity.

Inevitably, even when there is a true designer presence in the mix for the countless rounds of website planning discussions, the engineer responsible for constructing the site is faced with the question of going with a liquid layout versus a fixed-width layout. It's never an easy discussion.

With the browser perspective constantly changing with new browsers being introduced and upgrades always on the horizon, good design feels like a moving target. Whether they will admit or not, designers naturally lock-in to the mindset of a fixed-width layout because it is one variable they can control. Display resolutions might vary dramatically, but as long as you account for the lowest resolution that a significant share of the global user base is using, then nobody can complain. You're meeting that 98.5% accessibility threshold.

Wisdom of Crowds

As technology rapidly improves, our expectation bar moves up as well. For a long time, the minimum resolution best-practice was to accomodate for an 800 x 600 resolution. Now, it's more like 1024 x 768, and we're beginning to see websites flirt with 1280 x 1024.

Are we really moving in the right direction, though?  Aren't we just letting design popularity dictate the presentation of the medium? Here is a really ugly graph I made in two minutes representing a study done on this topic with a small subset of popular websites.

Mobile Changes Everything

The biggest problem with the fixed-width approach is the mobile web. Sure, mobile resolutions are gaining just as rapidly as standard resolutions, but as our minimum acceptability bar increases, we continue to alienate our small screen friends. One can argue that many high-end phones today have browsers based on the mobile Webkit, but this still isn't an optimal experience. You have to admit, double-tapping just to read the content takes away from the visual experience because you can no longer see the imagery. The idea of keeping content "above the fold" is also completely lost.

As for the devices that don't have the mobile Webkit, it's a huge challenge, as their rendering engines react very differently and a browser-targeted CSS hack isn't necessarily going to fix the issue.

Websites not optimized for mobile devices also take much longer to load. Engadget's primary website took me 21 seconds to load on an iPod Touch over wifi, whereas their mobile-optimized site took less than two seconds.

Somewhat Ironic

I don't get any brownie points for doing this well myself. If you look at my portfolio, every website is fixed-width. Some may look like they are liquid layouts, but these are just design tricks using repeated images.

It would be great to see a mobile design challenge like those that were issued back when pure CSS design started to gain momentum. That, or a clever contest to see who could make the best liquid layout that is compatible with mobile devices. Maybe there could be potential for sponsorship?