Archive for the ‘Web Design’ Category

Fixed-Width Websites

Sunday, January 31st, 2010

If you browse the web today, you’ll most certainly run into a fixed-width website on a day-to-day basis. Yahoo, YouTube, even Facebook and Microsoft have adopted fixed width websites. keep in mind These are all among the most visited websites today.

Why bring this up? They are bad for the future of the web. With the distribution of widescreen monitors increasing, most cell phones gaining the ability to access the web, and the netbook boom, vertical space, or space in general isn’t widely available. Think back to web 1.0, in this example, the first website. While simple, it still stretches out to fit your widescreen monitor without needing much vertical space, yet is still fairly spaced on your netbook. Fixed-width styles do not adapt like this, they assume you are running at least a certain resolution and fix it there. If you are below that resolution, you have to scroll horizontally to see all the content, if you are above that resolution, you get huge side margins and the content is squished to that fixed-width.

Why do they do it? My best guess is it makes styling easy. Knowing exactly how wide your website is really helps ease the complexity of your style sheets, but is it worth losing all that flexibility? When PCs were the only devices connecting to the web, it was easy to predict what the viewers resolution was going to be and create a style that would work well. But with the dynamic array of devices now accessing the web, from your cell phone to your Wii, or even your car, the flexibility of your website is more valuable then ever.

How do we fix this horrible trend? well, one solution is to turn your monitor 90 degrees and reap the benefits of tons of vertical space, but I’m guessing that’s not a great solution for everyone. Quite simply the solution is to stop using those designs. reflect upon dynamic width designs such as Wikipedia or Amazon. There are also some really interesting hacks out there too, such as the personal site of Eric Testroete, who simply solves the problem by allowing the page to scroll horizontally thus never dealing with vertical space.

Web 3.0 has started, and the defining aspect is semantics, lets just hope one of those semantics is forward/backward-compatibility with different resolutions and display types.