blogs.teztech.com

For web site designs, I like a simple, clean look. I also favor a flow (also called fluid or liquid) page layout with no big margins wasting space around the edges. These things make sense to me on a technical basis and I like the aesthetics and usability of these kinds of sites. However, they don’t always lead to the most pleasing look for some tastes.

Here is an article I found interesting: http://politics.slashdot.org/article.pl?sid=07/02/25/1935215

Notice how the high brow, traditional designers favor fixed width layouts with lots of wasted space in the margins. Every single one of these sites is fixed width. Most have top and bottom margins – a waste of valuable screen real estate, IMO

So why do traditional designers favor these kinds of layouts? I’ve seen lots of arguments, some lame and some worthwhile, but who cares what the designers prefer? Most designers are as much a part of the “typical audience” as I am – no part at all. The job of the web site to please it’s audience, not it’s designers. That is easy to say, but how do we really figure out how to best please the “the audience”? It’s something I’m still working on. Listening carefully to the client is one idea – often they have spent years working with their clients. Over those years, they have built up instincts about what will and won’t work. For interactive sites, I’ve got a stack of books that explain, in painful detail, how to create user interfaces that function well. These books are backed up with actual studies of end user actives. But web sites need to be both functional and pleasing to the eye.

Another related thing I’ve realized: Designers prefer smallish fonts. I guess, to their tastes, small fonts look better in the layouts. However, over and over again I’ve found that most end users (well, the ones that actually read the content) prefer larger font sizes. If you ever want to be a hero for a day, find an office with lots of 17″ 1280×1024 LCD monitors and switch everybody from “Small Fonts” to “Large Fonts” (under the Windows, it’s under Advanced Display Properties). They’ll be cheering you as you walk out the door! Overall, I find flow layouts work better with larger font sizes. With a small font size, you can cram lots of stuff into small layout boxes. Flow layouts and larger fonts force you to work out other solutions. Flow layouts also allow you to support the brower’s ability to change font sizes (YUI fonts has nice support for this). This is a great way to easily accomidate low vision and older users.

Most designers probably don’t know how to make flow layouts, so they think they are too hard. Once you learn the skills, flow layouts really aren’t so much harder than the tricks you have to use to brow beat your HTML into a cross-browser fixed layout. They’ll also make translating your site into other languages a whole lot easier, if you think this might ever occur.

I’ve also read that fixed layouts have to be done to get content to fit properly into the boxes in the layouts. For busy sites, like the presidential candidate site home pages and sites with paid advertising, the need for a fixed layout makes some sense, but I’m not sure it’s something that can’t be worked around with a different design philosophy.  Advertisers expect their ads to appear in certain locations. However, Google, Slashdot and many other sites run on ad revenue have showed us that ads don’t have to be flash or bitmaps or be fixed at a pixel precise location. “We have to direct the reader’s attention” is a common cry. “Focus them on the buy button”, they say, as if a clever graphic design could really fool somebody into buying something. And as if amazon.com has not been showing us how to do this properly in a fluid design for the last 10 years.

Yes, a flow layout won’t look like a printed brochure, but so what? Only us geezers and designers that lived through the days of printed sales literature find comfort in layouts with portrait style proportions. Look at the proportions of your monitor – wider than tall, yes? New wide screen TVs and monitors are even wider. My teenage kids spend way more time looking at at the wide, fluid web pages of their favorite interactive web sites than narrow, glossy sales slicks. What do you think they will prefer when they grow up and get jobs (and the money and power to buy things)?

I’ve heard it said that columns of text need to be kept narrow because “wide columns of text are hard to read”. This is just a weak excuse. If I ever find a web page uncomfortable to read because it’s too wide, I’ll just make my browser window narrower. Power to the people, I guess. I’ve heard lame excuses about how users don’t know how to resize browser windows. Maybe users with 800×600 screens don’t know how, but flow layouts (and worries about too wide columns of text) aren’t for them, anyway.

When you design software user interfaces, you have to trade off between first time users and users of intermediate ability. Research shows, for a typical application, there will be far more users of intermediate ability (users that might, for example, know how to resize a window). But the proper audience to design for really depends on the application. For a presidential candidate web site, I could argue either way: Sure, you have the obvious sales brochure aspect of the site, but a good presidential candidate web site will truly be devoted to interactive activities such as volunteer sign up, forums and polls. For a web site that is just a slick brochure with limited interactivity, I can almost grasp the argument that users might not know how to resize their browser windows. Thus, we need to force a width to keep the columns comfortable to read. However, in the particular case of presidential web sites, aren’t the candidates hoping to draw you into the interactive part of their site? Interactive sites are much better with flow layouts. What type of layout is used behind the home page of your favorite interactive site?

A final consideration I’ll leave you with: What happens when your site is viewed on a device like the iPhone (or a Sony PS3, XBox360 or Nintendo Wii)? In the limited space available, it’s important to make the most of screen real estate. Only a fluid design can accomplish this (without having a site dedicated to each device). My brother has an iPhone. I was interested to find out that he uses it often to do the kind of web surfing that I associate with sitting at a desk. His iPhone lets him web surf in a lot of situations where I would be reading a book or magazine. It’s interesting to consider my web sites viewed this way. Fluid designs work now and have the benefit of being ready for the future. 

When I get a chance, I’ll post some pictures of flow sites that I’ve worked on running on the my daughter’s Wii and my brother’s iPhone.  They look great ( considering the limited resolution available).