It's Always Something

The Web has bred various design dilemmas that print designers never dreamed of. How should hyperlinks be handled? There are many ways to indicate a hyperlink other than the traditional purple underlined word, for example the very nifty way they do it here at the WDVL. One principle that most people seem to agree on is that punctuation should never be included in the highlighted link. For example:

Wrong:

Please visit the Web Developer's Virtual Library.

Right:

Please visit the Web Developer's Virtual Library.

The biggest compatibility headache for Web designers is not different browsers - it's different screen resolutions. It would be wonderful to design for 1024x768, and take advantage of all that extra space, but if you do, those using lower resolutions will have to scroll horizontally to see the whole page. While vertical scrolling is perfectly normal, most designers seem to agree that horizontal scrolling should be avoided if at all possible. People who use 640x480 are not all behind-the-times losers - they may have poor eyesight, or a small monitor, or may simply prefer to view text in a larger size. So, it seems likely that for the foreseeable future, the vast majority of Web pages will be designed for 640x480. This means that anyone with a larger resolution will see your page over to the left of the screen, with a big white space to the right. Do you think that looks good? If so, fine. If not, simply center the entire body of your page, either by using CENTER tags or the more modern <DIV align="center">.

Columns are used in print because text is more difficult to read if each line is too long. On the Web, this is less of a problem, because by the time you take 640 pixels and subtract a scroll bar or two and a generous margin, you're just a little wider than the perfect width for a column. While a newspaper might need 6 or so columns to keep things readable, a Web page can look fine with just one. The reason columns are so popular with Web publishers is that they allow you to put two or more articles or other groupings of text side by side "above the fold," to present visitors with more choices. A very popular layout is to have one medium-wide column of body text, with a sidebar containing related information on the left, right or both. Alas, our only tool for creating columns is a flawed one - tables. Yes, I've read all the HTML purists who preach that "tables should not be used for formatting," but I've yet to hear from one who has any other suggestions. Many Web sites choose to use columns, and tables are the way to do it for now.

The problem with tables is that unlike with desktop-publishing software packages, you can't make text automatically flow from one column to the next. This means that you have to figure out exactly where in the text you want each column to end. Well now, how does one do that? Why, one can't! Netscape and Explorer have differing opinions about how much leading (space between lines) is proper, and the same column of text will often come out different lengths in the two browsers. If you'd like your text to line up perfectly with graphics or other elements in another column, you are out of luck. Live with it.

Another headache involves paragraph justification. Frankly, forget it! Print designers take great care that every paragraph looks nice and neat, with no widows, orphans or other poor relations hanging about. Web designers have no choice but to simply smile and accept the fact that any text appearing in a narrow table cell may end up looking ragged on some systems. The problem arises because we're dealing with very limited space, and type can only be made so small. Consider a sidebar, created using tables, perhaps 200 pixels wide. If you use tiny size 1 text, then your paragraphs will probably come out looking okay. If you use readable size 2, then any long words may cause line breaks in less-than-optimal places, and quite possibly make the whole paragraph look like hell. For example:

This paragraph, with
words of average size,
looks nice and neat.

This one,
transparently
contrived, but a
good
over-dramatization of
our example, might
give a print
typographer a case
of apoplexy.

The first paragraph looks nice and neat. The second one looks as ragged as a dog's favorite blanket. Why? Sheer chance. Long words force line breaks. If you jiggle the line breaks around so that it looks right in one browser, it will look abysmal in the other. There's nothing you can do about it, so learn to like it. Using <P align="justify"> will not save you. Justification only looks good when the column width is fairly wide, and in the situation described above, it would probably screw things up even worse.

I'll conclude with a note about accessibility. It's important to keep in mind that it takes all kinds to make a Web, and you never know what kind of a system someone may be using to access your page. People using something other than the latest Explorer and Netscape may have good reasons, and not simply be behind-the-times losers. Disabled people in particular sometimes use unusual means to browse the Web, and if your site is too dependent on brower-specific design tricks, they may not be able to access it. Avoid using graphic elements as the only way to get somewhere, and always include descriptive ALT tags. People using text-only browsers, and blind folks using text-to-speech converters, will thank you (and maybe even buy your products). Never set up your pages so that they override users' browser settings - a lot of people simply can't read tiny size 1 type.

The bottom line is that content is king. If you keep the intended purpose of your Web site firmly in mind at all times, you won't go far wrong. Design that interferes with the content is bad design, so keep it simple and resist the urge to be a control freak.

Other Resources

Style guides tell you how to safely use things like punctuation, page layout and yes, split infinitives (they're acceptable only if the alternative sounds worse). A list of various online style guides is at:
Webspinner's Workshop

The Chicago Manual of Style is one well-known printed style guide. You might just find a list of print style guides at:
Amazon.com

There are several good Web-design books out there, by which I mean books that concentrate not on the technical how-to of HTML coding, but on aesthetic design techniques. They tend to be preachy and opinionated, but what else is new?

My favorite is Creating Killer Web Sites, by David Siegel:
Web Developer's Journal:Book Review

Web Sites That Work, by Roger Black:
Web Developer's Journal:Book Review
is pricey and not very meaty, but it does contain some good advice.

Web Sites That Suck professes to teach good design by spotlighting bad design. This entertaining and instructional site has a companion book, too:
Web Pages That Suck.com

Yours truly also penned a how-not-to article, How to Build Lame Sites:
How to Build Lame Web Sites

...and a rant about sloppy or non-existent editing, A Plea for Editors:
A Plea for Editors

Dmitry's Design Lab - Contains a wealth of articles about all aspects of Web-related design.

If Content is King, The User is God: Redesigning The WDVL - This article explains why we decided to redesign the 'look and feel' of The WDVL, what design principles we adhered to, and how we implemented and tested the new design.

Yale Style Manual - simple, straightforward practical guidelines backed up by HCI (human-computer interface) research.

Web Developer's Style Guides

Timeless Typography
Designing Attractive Web Pages