A while back, I saw an awesome redesign of Facebook done by Information Architects. I’m not really a fan of hiding content in the third pane until a user clicks on a specific story (see also: twitter.com), but I loved the idea of stretching the content horizontally to increase visibility. We have a curious situation of monitors stretching horizontally while websites stretch vertically, which I think can be amended with some new design principles. To my understanding, that redesign didn’t make it past the conceptual stages. But I thought it should be possible to capture at least the general idea through some custom CSS tweaks. Here’s the result of my initial baby steps:

There was a limit to how much I could do with pure CSS, so I think next I’ll play around with some JavaScript to make more exciting changes. This is essentially just pushing half of the content over to the right, and fixing all the little things that were broken because of it. It seems to work without any major eyesores now, and I still use this whenever I browse Facebook. In case you’re interested, here’s a link to download the CSS file. Some disclaimers:

• I had no use for Facebook’s right column, so I removed it entirely. Mileage for you may vary.
• Some of the less-visited Facebook pages aren’t properly handled, so some parts might look weird
• I’m not very good at CSS, so the gross code will probably make you shudder.

By the way, is there an easy way to set the browser to use a custom CSS file for a specific webpage? I installed Personalized Web for Chrome, which does regex URL matching to apply scripts and styles, and for Safari I bundled it up into a separate extension. If there’s a more simple way of doing things, I’d love to hear about it.