Beast-Blog.com
Killing Off Web Widows

Please, let me explain. I speak not of wives without husbands. I am instead talking about a typographers’ term that defines an undesirable situation that looks bad in print and is best avoided for reasons of both aesthetics and readability. The term pertains primarily to print as said, but it also applies to a web page situation that, in my opinion, is also best avoided. I’m not going to provide graphical example of the aforementioned malady, but I will offer a quick definition of the term I’ve introduced you to.

Widows refers to the final line of a paragraph that falls at the top the following page of text, separated from the remainder of the paragraph on the previous page. The term can also be used to refer simply to an uncomfortably short (e.g., a single word or two very short words) final line of a paragraph. — Wikipedia Entry

It is the second part of the definition that applies to the web: The term can also be used to refer simply to an uncomfortably short (e.g., a single word or two very short words) final line of a paragraph. I feel it looks tacky at best, and it could impede readability (in headings if line height isn’t right). Some might feel this is really nit-picky or “anal” of a person to worry or even think of such a small item as this, but I must ask: At which point in your designs do you stop worrying about the finer points? You may have once heard that the devil is in the details (meaning even the grandest project depends on the success of the smallest components). It’s true.

For example, as a photographer (yeah, I do that too), when I select a salable stock photo, I examine the photo carefully at 100%, sometimes even up to 200%. I do this to inspect the finer details most people would miss. It is, after all, those fine details that will ultimately define the final outcome of the composition as a whole. If you don’t pay attention to these finer points most people won’t notice or even care, but when push comes to shove and you’re giving your very best, the small details count and can make it or break it.

Where Widows Live

Widows on the web are nearly impossible to control or prevent, especially if you make accessible sites that give users the ability to enlarge their text. In such a case the very notion of control is silly and impossible to realize, but this doesn’t mean that I can’t minimize the possibility. Below are three situations that might suffer from widowing, shown in the order of importance in my opinion.

Heading Widows

Have you ever seen a heading that has one or two words on a new line? I have and I think it looks less than lovely. Some will argue that it is the heading and that’s what it is so that’s what it will be, regardless. See the example image. Note that the last word of the heading is on a new line.

Long headings can be somewhat effective to share meaning with users and to apply specificity for search engine spiders, but I feel they’re best avoided unless really necessary. The main reason is they can look bad. But they can also make a site less consistent (if all other page headings are on one line) and possibility have an adverse effect on some readers.

Link Widows

Inline links cannot usually be dealt with. One can only do so much to perfect the initial, default look of the page. But links in menu can be addressed. Let’s say, for example, that you have a navigation menu with links for Home, About, and Contact. Adding a link to that menu that read, “Site Map, Search, and Accessibility Page,” just wouldn’t fit the flow, it would ruin the nav menu consistency, and break the overall look of the page.

Text Widows

If you look at just about any of my posts (assuming you’re using the common browser default text size of 16px), you may notice that is either a pretty big coincidence or I actually try really hard to keep paragraph widows to a minimum. You should notice that the last line of just about all my paragraphs is between one- and two-thirds the length of a full line. I aim for that length to help prevent browser inconsistencies from messing up my manufactured look. If the line is too short, it might end up being a one-word widow on some browsers. If the line is too long, other browsers might create a widow. This range I aim for prevents most of this.

Avoiding Widows

All of this is perhaps a bit silly, especially when one realizes that users can change my look at will, but my extensive print background makes me think of stuff like this. Maybe I’m being nit-picky or anal. Maybe I’ve elevated perfection to an unhealthy level, but to me this little stuff is all part of the larger package we call a web page, and to me, it’s all important.

So, how does one actually avoid web widows. Try the following:

Change your wording.

If it doesn’t look right, maybe the content can be reworded to effect the change you’re after. Only take this step if the text can be and should be edited for brevity or clarity. If this won’t be a natural fix, then maybe try one of the others. But you may find this is the smartest, fastest, and easiest method.

Adjust letter spacing.

This is one of those fixes that you must be careful with unless your style sheet edit will only affect the text you’re concerned with. If you do have that option, or care to add a new class just for this (not recommended unless you’ll get more use out of it), this is an easy fix that won’t be very noticeable unless the text is very short. An inline style could also be used, but I am trying to promote practical aesthetics here.

Adjust word spacing.

This almost identical to the suggestion above except instead of elongating (or shrinking) the spaces between letters, you’ll be adjusting the gap between words. If for some reason your text is justified, especially if you have narrow column widths, use this method and not the one above. Better yet, left-align your text… it’s more readable that way.

Change text size.

You could change the text size to make it fit, but you will have to be careful to apply your changes to the text in question only if you are to avoid global changes as would be the case if you increased the text size to a common structural or container element.

Expand copy width.

I admit you’d have to be desperate to employ this method, but since it will work, I did want to mention it as a viable options. This method, like the methods above, must be used, if at all, with great care as your changes may be global.

Headings and Links in WordPress.

I’m mentioning this method because a friend of mine, David Zemens (who I suspect also cares about the small stuff like this) came up with a cool method of manipulating page/post titles in WordPress to fix this specific issue. It uses WordPress’s Custom Fields function, which, combined with a little theme work, allows users to create a specific title for the post (and title element of the page), while offering a short title for the nav menu. David credits me for the idea, but it was he who thought of using it for titles/headings. I’m grateful; I use it on just about all my WordPress sites now.

On a scale of one to ten, with ten being the most important, this topic will likely be a one, But that doesn’t mean I can’t be bothered. Some developers can’t be bothered with small stuff like this (got bigger fish to fry), but when you’re trying to create the best possible site you can — as you do on all your projects — little stuff like this can tip the scales in your favor.

Photo credit: iStockphoto|Alija

Filed under Beast Ramblings —

Bookmarking Links » del.icio.us | Digg | blogmarks | StumbleUpon | Technorati |

These posts may be related:

The Best of the Beast in 2008 »

On Becoming a Photographer »

Supporting Legacy Browsers, or Not »