AMPS211 | Websites that rock

Over the weekend I was flipping through a copy of JPG magazine. I turned to one page that looked exactly like a modern web layout … chunky image header section, a wide column content area, and a narrow column sidebar. There must have been other subtleties that I’m not describing now, but my first impression was definitely, “this is a website, not a magazine page.” (The image above is not the page I’m referring to, but its a fair example.)

I’m sure this won’t be a revelation to some people, but I find it interesting how print design and web design are cross-pollinating each other’s gene pools. This is probably quite natural; web and print are both text and image based, and we’ve always used print-like references to solidify concepts of the virtual web, which is why sites have “pages” and we move “forward” and “backward” between them, as if we’re navigating a book instead of a sewer system.

When I first started paying attention to web design styles, it seemed important to forget the limitations of print when working with web pages. A book has a fixed width, there’s no way around it, but on the web, a site’s available page width depends on each visitor’s browser window dimensions. This difference in “physics” introduces a variable and requires flexibility; the web is fluid. This difference distinguishes web from print. It creates a world of possibilities, but also creates a few headaches. Your design must work in any browser sizing, and must flow correctly when resized. And I’m not even getting into differences among browsers (I’m thinking of one in particular that seems to get everything wrong, but is still popular enough to require supporting — IE6 — which, at this point in time and in this analogy, is like a rich kid who only made it through school because his parent’s were rich, and now he just keeps hanging out in the parking lot trying to pick up high school girls, because even though he gets older, they stay the same age. Please, don’t be a dumb high school girl).

The alternative to natural fluid layout is to impose a fixed width restriction and work within a boundary you set. Its consistent, making it possible to divide the space into predictable pieces, just like in a book or magazine. The trade off is the visitor is forced to view the page at your chosen dimensions, even if they have a 3-foot wide monitor … but who can actually read comfortably on a canvas of that size? I never maximize the browser window when I’m using the iMac with its wide view. Its unnatural; we’re used to reading “page” portions. The real trick with fixed width is not to set the size larger than a visitor’s screen dimensions, which would give them an annoying horizontal scrollbar and generally frustrate them away. While my first reaction to that is, “I’m sorry you suck, but 800×600 is just so 1995,” I know that doesn’t really fly. Luckily most people are browsing the web with their screens set at least to 1024×768. That might still seem narrow to some, but we’re forced to go with some averages here.

I’ve been interested in, and experimenting with, “magazine-style” layout on websites for a little while now. This usually means a fixed page width, multiple columns, big framed (and often captioned) images, and lots of white space. I think I’m attracted to print designs used on websites for several reasons including personal taste, but also something philosophically post-modern. Its easy to be overloaded with information, especially on the Internet now. Enforcing fixed spaces to work inside gives us some rigidity, something stable to stand on, to hang our information from. We’re not as overwhelmed by infinite possibilities when we have a fixed view port, a reference to the finite and the physical, perhaps a more human perspective. I know I’m stretching it a bit here, but I don’t think like this every day, so a little exercise shouldn’t hurt right?

Thanks for reading.