Ten Tips For Web Designers

Inexperienced web designers consistently make mistakes in the same areas of web design when they start out. I was once a novice, and I experienced the same difficulties with my sites until I learned how to correct them. Now, after a couple of finished websites behind me, I can safely say that certain design principles come into play during the creation of a website. In my opinion, these are the top ten tips that I can give for amateur web designers.

#10 Plan it, plan it, plan it

Consistency plays a major part in design. Having a consistent look and feel for the major elements of a website serves many purposes.

Since consistency demands fixed elements for administration purposes, having to change an element or two for a certain page would mean having to change it for all pages. This may be easy for sites with few pages, but it becomes a hassle for sites with a hundred pages or so. Dreamweaver offers template and library tools for such cases, but it isn't enough (you can only change <body> elements, for example; what would you do if each page should have a distinct title, as on this site?).

The best solution, according to my experience, is to thoroughly plan the site before writing it. Plan it, plan it, plan it. I know that designers can't really take into account surprise bugs or unexpected opportunities, but, at some point in the site's creation, the site's sheer size simply discourages changes that would reflect throughout the site.

In effect, even though the site's design may be fluid enough to accommodate tweaks at the early stages, the site will eventually freeze and make drastic changes impossible. A site-wide bug can drive a designer out of his wits as soon as his site design freezes; the sheer difficulty of removing that bug per page will discourage even the toughest designer.

According to my experience, the site starts to freeze upon the creation of graphics; after that, the site becomes less malleable with each completed page. The more consistent elements that a site has (navigation elements, site identity elements), the more frozen it is. It's the classic trade-off between malleability and consistency.

#9 Horizontal scrollbars are evil

I dislike horizontal scrollbars immensely; it doesn't break a page when viewed, but it dampens the emotive experience on the part of the reader by:

Reducing amount of viewing space: Twenty-five to forty percent of the viewing screen is already alloted to the browser's and the operating system's sundry elements. Yet another scrollbar takes away more.
Forcing unimportant decisions: The reader is forced to think in two-dimensions. Users don't like to think; the best thinking that a designer can do for them is: "if you want more, just look down". No mention there of "look down and right". If the navigation elements are extended to the right past the browser's viewing space, the user would have to shuttle back and forth between the content and the navigation.
Looking just plain ugly: I'm serious. You can't control what it looks like because it's browser/os dependent.

This problem crops up because many designers make assumptions about their users. They think that, if the horizontal scrollbar doesn't pop up on their 1024x768 monitor, the site's width won't cause any problems. However, let them try it on an old Macintosh, with a screen width of only 600 pixels or so, and see them cry their heart out when their design breaks.

My solution to this problem is to use liquid layouts, which adapt to the monitor size. All my layouts are specified in terms of percentages; e.g. the content block's width is 70% of the viewing area, and the distance of its left side from the left edge of the screen is around a fourth of the viewing area's width. In this way, my layouts will work on whatever monitor, whether on a 1024x768 or an older Mac, and that evil horizontal scrollbar will never appear.

#8 Color is cheap;
images are expensive

To render an image, a browser must first download it off a server. This takes a significant amount of time, and time is money, so website readers consider images expensive. In contrast, a browser can read a simple color instruction made of six, easily downloadable, hexadecimal numbers and then render that color in less than a second. Color is cheap.

Many designers tend to rely on images alone for their sites' visual flair. This thinking leads to bulky pages that nobody wants to read because it just takes too long to download. It also offers less accessibility for the handicapped. To those designers, all I can say is: nobody gives a damn about your bulky images, no matter how "cool" or "cute" they are; readers will surf somewhere else.

My solution is to provide a cheap alternative. By playing with colors, I can achieve design goals, such as placing emphasis or segregating navigation elements from content, without resorting to heavy use of images. Concrete example: the numbers for this article's headings. They have a different color than the text, which gives them emphasis. Imagine the increase in page size if I were to use ten different images instead! As a result, my pages look good without taking too much time to load.

#7 Don't forget to ghost

The term ghosting in interface design means to set apart a normally interactive element from others like it to indicate that it is not functional, as based on the program's context or state. Oftentimes, the interface element is set to look just like its ordinary counterpart, but with an observable increase in translucency or offset in color, thus the reference to ghosts.

For instance, a navigational menu hyperlink for the "corporate info" page, supposedly present for all pages of an imaginary site, would not make sense if the reader were already on the corporate info page. If the designer were to remove that hyperlink, the navigational menu would change for that particular page, destroying consistency. I've had my own share of the confusion that arises from hyperlinks that mysteriously disappear, and it's not pretty.

The right thing to do is to place a "ghost" of the hyperlink instead. The ghost serves two purposes:

The ghost informs the reader that he is on the corporate info page
The ghost informs the reader that, if he is on any other page besides the corporate info page, he can always go to the corporate info page by clicking at that particular spot

This site's navigational menu offers ghosts at the specific sections designated by the hyperlinks (e.g. "extras", "works", etc).

#6 Know your typography

Font control (or the lack of it) on the web usually frustrates print designers. The truth is that the rules of typography on print differ markedly from those for the web. Designers just can't play around with fonts as much as they would want to. On the other hand, novice designers, experiencing font control for the first time, tend to stylize their pages with too much font control, as if to say "Look at me! I can do this and I can do that! Mwa ha ha ha ha!"

A true web designer must strike a balance between these two diverging philosophies. In order to do this, he must know the exact purpose of each font and how he can integrate it into his site. This section is actually a collection of tips about typography, accumulated through years of experimentation and field observation.

Make sure your text is readable over the background

I can't emphasize this enough. What's the use of having text if you can't read it? The site's background should enhance the site's content, not distract from it. Thus, designers should avoid busy backgrounds; unsaturated colors (relative to the background color) and low-opacity figures should suffice.

Don't use too many fonts

Most novice designers have the tendency to use all available fonts without considering the purpose of each font. Thus, their pages look cluttered, having a different font for each phrase or sentence. Two fonts are enough: one font for regular text and another font for emphasis. A third font should only be used if it's really, really necessary.

Don't use too many font styles

Each font style and variant has a purpose; using all available font styles distracts the readers from the content. Real web designers don't render their whole page in italics; they keep their italicized text at specific portions of the site, because they know what italicizing really does and how it can help them.

Bold text calls attention, so it should only be used for emphasis. Same is true for all-caps. I don't set the whole page in boldface type, even though I could, because:
1. it's hard to read
2. it takes away the emphasis, because nothing gets more special treatment than the others
Italic text slows down reading speed. If you want to slow down the reader at key moments, such as plot twists in a short story, you should use italics. Italics is also used for foreign phrases.
Centered text gives clarity (because of the whitespace on either end) but it reduces readability (because the reader still has to scan to find out where the next line starts, given that the left side is unjustified). This trade-off suggests that centering is best used for captions, not for the body text.

Use sans serif fonts for text

The primary difference between print and web typography is resolution. Paper has a much better resolution than a computer monitor, so reading print is a lot easier than reading a website (reading too much text on a monitor hurts the eyes). The serifs (a fine line finishing off the main strokes of letters) are highly useful in print because of their ability to delineate shapes given high resolution. However, they are a hindrance in web design because pixels weren't made for visual clutter; they should be avoided at all costs. My technique is to use sans serif fonts (highly readable on the web) for my text and monospace fonts (better readability than serif fonts because of increased volume) for special cases.

Thou shalt not specify fixed sizes for fonts

Fixed-size text on your PC may look readable to you, but it certainly isn't for people with different font settings, Mac owners, and the visually-impaired. I highly sympathize with Mac owners, having made my very first webpage on a Mac; the Macintosh renders type closer to actual print settings, so text always looks smaller on those computers. The visually-impaired often tweak their font settings so that text will render at a larger size for easier reading. By providing relative font sizes, such that they adjust to the font settings on that computer, the webpage becomes accessible whatever the font setting may be on that particular computer. For my website, I used percentages, specifying 100% for the default text size, and 300% for headers.

Long lines are hard to read

Ever wonder why newspaper columns are narrow? Narrow columns make reading easier because the eye does not have to go as far in order to find the next line. Designers who use text that run from the left side of the browser to the right actually force readers to scan a long sequence of words in order to continue reading, a task that is always error-prone. Line length and line spacing may not seem much, but they play an important part in page readability (it's the same reason why your college teachers ask you to submit required essays as double-spaced instead of single-spaced).

Ten Tips for Web Designers, part two