» Designing for thinness | information rain

Designing for thinness

I discussed the idea of getting rid of the container and a few other ideas relating to simplicity in my previous article.There’s a cool side benefit to this strategery. Thinness.

I finally found a use for the pre-installed Comic Life!

This Website is just too fat

Pick 2 out of these 3.

* Standard font size

* Less than 800 pixels wide

* Colorful background container

It is nigh impossible to reasonably design a two-column site for 800-pixel wide monitors AND use standard font sizes AND have a background container at the same time . Getting rid of any sort of container allows you to fit content reasonably while keeping a decent amount of white space between columns.

Smush it against the wall

If you had some type of background container, you wouldn’t be able to shove text up against it like so. You’d have to move the text to the right a few dozen pixels so there’s a modicum of white space there and it doesn’t look horrible.

problems when smushing text against a wall with a background

But if you remove that useless color, then you have the ability to do this without making the site look screwed up.

Without a background container stuff works out easier

And by doing this you save a few dozen pixels worth of width that can be used towards giving you more whitespace between columns over on the right. The first version of my site had to be 950 pixels wide to have that black background around the content and maintain a reasonable amount of whitespace and have standard font-sizes. Once I realized why that was problematic, I set out to change it.

But why design for 800?

It certainly isn’t necessary for every single type of project. If you were building a site for 3d-artists to display their creations for instance, you’d design as big as you could get away with to let large visuals be the focus. But for many types of business applications, this isn’t the ideal.

Sacrificing legibility for style doesn’t help your users, does it?

When you build sites for small businesses, you learn that some of them rely on older equipment. That means really old and really small monitors. And because horizontal scrolling on the web is a pet peeve of mine, I’d tend to try and design as thin as possible in a situation where it may be encountered. But I definitely don’t want to sacrifice legibility by making the text tiny to do so. That is the easy way out, but I don’t think it is the right way.

That is a small additional touch, but something important for a percentage of users who might be on the go.

Also, in terms of mobile web design, which I really need to learn more about to be honest, particularly designing for things like the iPhone that have a real browser, designing as thin as possible while still using decent sized text allows a user to read a page without zooming in.

Conclusion

Those are some notes to semi-conclude that idea about getting rid of the background container and thinness.

Now a small personal note. This week or three I had planned to work on a few personal projects that I wanted to release soon, two websites and what I think is a very creative web application. But those things are on hold for the moment as I’m going to be busy with some contract work for a larger company over the next few weeks/months, but I’ll still post some articles and things that I have planned. Writing about things that interest me is too much fun to stop even when I am busy.

Cheers.

Posted on September 26th, 2007 by Chris Papadopoulos.

Subscribe to the RSS feed, Trackback, or contact me privately.

Spread the Love These icons link to social bookmarking sites where readers can share and discover new web pages.