TSHolden.com

Rant 01 - Width

The subject is boring for most, if it exists at all. How does width affect you? I'm not talking about physical width, determining whether you have to turn sideways to get through certain doors. I'm not even talking about image or model width, used to represent you in Facebook or Warcraft. I'm talking about web width.

If you have a webpage, chances are that you have tweaked how it looks. Some, like myself, have written the whole thing from the ground up- utter control. Others, seduced by Angelfire and its ilk, have made customized webpages that vary one to another, but the underlying aspects are the same. Still more people simply have a DeviantArt page which they can call their own, a page which is made unique only by its content.

I've been to all three. I know the ups and downs. For DeviantArt, my concerns about width never went beyond "Is this image too big to be uploaded?" During my very shortlived time at Angelfire, I learned to use moderately sized images and fonts and then trust that width="100%" would keep me covered. But now that I have a real page, which doesn't use cheap tricks to make itself work, I have come into contact with a surprisingly large and difficult problem.

Width.

A good webpage will look roughly the same on any browser, text-only browsers exempted. This means you have to control your pixels, using hard numbers that add up. td width="28", my friend. That cell is 28 pixels wide or someone needs some hurt. Naturally, telling it to be 28 pixels in the source doesn't always cut it- if you stick a 30 pixel wide image in there, guess what? Someone needs hurt, and it's you, the designer.

So already width is determining what size our images are, boiling down to resizing the image somehow or changing the cell size. Good design is consistent, so if you can't resize the image (30 pixels doesn't have much elbow room), you need to plan ahead and compensate. This very site is designed so that I can drop a large section of it at any time, changing the appearance significantly but giving us an additional 270 pixels of space. When that isn't enough, I break the consistency rule, and the site spreads rampantly to the right.

This is bad practice on several levels. Obviously, I broke the consitency rule. As my brother pointed out, it makes the text hard to read, because the user has to scroll left and right, something which irritates many to no end. And worst of all, it creates a blip in the site code that can lead to stupid mistakes and very poor first impressions.

But as most people know, this is a really, really common problem. Most sites, when they have an image larger that standard browser size, just provide a straight link to the image and let the individual browser do what it can- in most cases, size it down until the user clicks it to its full size. So you've got the image, but the text is on another page- bad juju.

Worse for everyone's juju, what is this "standard browser size" that I just mentioned? Do we go for the lowest common denominator and assume that its IE running at 640x480 resolution, with all the yahoo toolbars still taking up space? Do we assume that people are using a streamlined version of Firefox at 1920x1200 pixels? (my roommate has that. I hate it, with a burning jealousy.) Do we assume they're using Linux, Windows, or a Mac? Aarghh!!!

I am, for this site, assuming that most people are using Windows, with a resolution of 1024x768, with IE or Firefox, hopefully without too much clutter. That way they can see the whole default page, no scrolling left or right, and the navigation image is entirely visible from the first load. If they're running at just 800x600, shame on them, but the content portion of the site will still be entirely visible once they scroll right. If they're like me (honor to their family), then they're running at a cozy 1280x1024 pixels. The site is visible, with some reassuring white space, and most of my images pages are fully visible too.

(Just to clear up, "fully visible" and variations thereof doesn't mean you don't have to scroll down- it just means that scrolling down is expected.)

But wait, that was a ton of assumes, what if any one of them is wrong? Well, then that user isn't getting exactly what I intended, but hopefully they'll be getting something close. I try and test my stuff on all kinds of crazy setups, but there's a definate limit on how much I am willing to do. It sucks, but strange setups are going to get the short end of the stick just about every time. Really old setups in particular are going to get shafted, because the medium of the internet has moved on.

Which brings me to a special and alarming aspect of width. The ideal is not constant- in point of fact, you can rely on it to be inconstant, every fluctuating. As computer resolutions go up, so does the ideal webpage width. At first this seems stupid- why not stay at the old width and just let the whitespace build up?

Several reasons. First, white space has limits too. Too much and the user will get frustrated by the seemingly purposeless scrolling. It's also a easy way to spot n00bish websites- they'll have a background texture that'll work fine up to a certain width, but after that it just looks like crap. I can name a tone of sites like this. Second, legibility becomes an issue. People actually use the "text size plus" features found everywhere- that's why you can find them everywhere. If your website was intended to be viewed at low resolution on a 15 inch screen, then your font will be pretty small.

But if your webpage is being viewed on a 15 inch monitor at very high resolution, then the previous font is illegible. A much larger font is called for, which is a problem for text inside of images. Should artists republish their work every decade so that people can still see what they should be seeing, read what they should be reading?

It's a weird set of questions, but I've thought about them a lot. What is the width of your webpage? How does that affect your images? How do they affect your layout in return? And how does that ultimately affect your content?

-Tentus