It's not about slick coding or flashy graphics, it's how well you understand the medium and exploit its strengths, while avoiding the pitfalls of large, clunky, static design.
Yet not all of these designs are working. Is the Web most appropriately used for conveying textual information or rich multimedia? Or, to put it another way, since the underlying page description language supports a wide variety of formatting elements, should they perforce all be in use?
That's the question I grapple with in this piece; what works and what doesn't work on a Web page, and how do the constraints and characteristics - social, cultural, and technological - necessarily affect the design of a Web page and Web site. I have no doubt that you won't agree with all of my comments; that's okay - I don't purport to have all the answers and the medium is dynamic and evolving at such a rapid pace that I doubt anyone can credibly claim omniscience regarding Web design and layout.
Further, as with an architect designing a building, the purpose of the building and intended use is tantamount. Environmental factors must be considered (a deconstructionist poured-concrete design located in a neoclassical block will undoubtedly appear out-of-place, for example. An effect that might - or might not - be sought-after by the architect) and both livability and a sense of playfulness help distinguish great buildings from boring derivative works or even outright failures.
So that's...
Too many sites today are designed to impress the boss, or to show off the skills of the graphics department, not to convey compelling and timely information to a potential visitor.
- Rule #1:
- Understand the intended users and uses of your Web site then focus the design and layout around their needs and interests.
This seemingly simple idea has far-reaching consequences for Web page design and layout. For example, of the perhaps two million people who have some level of access to the World Wide Web, it's apparent from surveys and ecological analysis that the majority are on slow connections, and indeed a surprisingly sizable majority (perhaps as much as 30%) of Web browsers view only the textual portion of Web pages, opting not to load the graphics at all.
This suggests...
You must think carefully about how graphics are deployed on your site. Use the least graphics you can to accomplish your design and appearance goals. Ensure that viewers who opt not to load the graphics still have a meaningful and enjoyable visit to your site, and can still find the content that is at the heart of every good Web page.
- Rule #2:
- Be sparing with graphical elements.
A quick visit to different Web sites makes it glaringly clear, perhaps embarassingly clear for some firms, that this simple rule is ignored on a daily basis. Indeed, poorly designed, graphic tour-de-forces like the Time-Warner Pathfinder Web site clearly state to visitors "don't bother coming here unless you're on a very fast connection." Is this technologically-elite message appropriate for the online branch of a publishing firm? I certainly don't think so.
Yet graphics are part of what makes the Web fun and compelling as a new publishing medium. The trick, then, is to use graphics appropriately. Monolithic screens that offer all navigational elements buried within are a disservice to the majority of the Web user community and can alienate users quickly. Hence ...
If you seek to appeal to the entire Internet community, then clock graphical elements and page size against a 14,400 baud modem, a speed at which I estimate describes 25% or more of todays' Web users. A rough calculation suggests that thirty seconds offers no more than 45Kbytes of information, total, including the textual information and all graphics.
- Rule #3:
- Pages should load within no more than thirty seconds, including all graphical elements.
If you're designing for an internal corporate network and are assured the vast majority of users are directly on the local area network, then 56Kbytes or faster is a safe assumption, and the thirty-second rule lets you include 235Kbytes of information, quite enough to send very long documents and complex layouts. Consider the danger of designing inappropriately for the faster speed, however, then finding that your users are connected through slower systems. A 200Kbyte page of information would take over two minutes to load - if you're lucky - on a 14.4 data connection. Will users wait for that long? I don't think so. The Web crowd is fickle and easily distracted, most victims of our hyper-kenetic culture.
The good news is that an understanding of the way Web browsers process graphical elements can open up options beyond being constrained to tiny graphics. The most important capability is that you aren't forced to an 8- bit, 256-color graphic palette. Hence ...
- Rule #4:
- Minimize color palettes.
To understand this tip, a quick explanation: black and white line art is 1-bit deep: any given spot in the picture is either on (black) or off (white). To convey four colors would require two bits of information per point: 00 = color 1, 01 = color 2, 10 = color 3, and 11 = color 4. The format used for sending graphics, GIF, or Graphics Interchange Format, allows use of 256 different colors, but then each spot requires 8 bits of information. Multiply this out and a 1-inch square full color graphic (at screen resolution of 72 dots-per-inch) requires 41Kbytes, or about 27 seconds to transmit at 14.4 baud).
Fortunately, most graphical elements in use today can work just as well with a smaller color palatte. Is blue on beige a corporate color scheme? You can build graphics with those two colors that are only 1-bit deep, 'on' is blue, and 'off' is beige: a graphic the width of a Web browser screen and one-inch tall can be saved in a file as small as 28Kbytes or smaller. That same size graphic as a full 8-bit graphic is over 230Kbytes. Again, work with your graphics team to minimize color palattes; even going from 8-bit to 4-bit (which offers 16 colors) can dramatically speed up your page.
A more subtle aspect of Web graphics, and in particular the graphics interchange format (GIF) that is common on the Web, revolves around how information is encoded within the image. Rather than simply specifying the value of each point - or pixel - in the graphic, the GIF format has some smarts, and can dramatically shrink the size of graphics by having what I'll call repeat factors. Consider if you were painting a series of wall panels in a hallway. Instead of saying "paint this one white, then paint this one white, then paint this one white, then paint this one white" you'd naturally say "paint this white, then paint the rest the same color." That's exactly what the GIF format allows, and it means that if you have a graphic where horizontal expanses are a single color, it's able to save space by specifying the color once, then the repeat factor, perhaps "white, repeated for the next 745 pixels".
This can dramatically reduce the size of graphics, and, even better, you can design graphics to exploit this feature. So...
Because the GIF format is oriented from the top-left across each line then down to the subsequent until the bottom-most right point is reached, vertical expanses of color do not see anywhere near as much savings in graphic size. Smart use of this feature can cut graphic size by fifty-percent or more, allowing you to use large graphical elements on what remains a very small, quick loading Web page.
- Rule #5:
- Design horizontally-oriented graphical elements where possible.
Graphics aren't the end-all of Web page design, as is clearly demonstrated by a variety of excellent text-only pages like Yahoo. Indeed, this realization suggests...
Unless you're a graphic arts firm, people aren't likely to find value in your online presence because of virtuoso displays of Web page design or a crack team of graphic artists. Instead, what appeals to most users is information - content - the true, if unsung, lingua franca of the Web. Most organizations have a surprising amount of information that would be of interest to potential visitors and that's the compelling content that can lure people to your site not just once, but multiple times. And even better, those are just the people you want to have visit. Hence...
- Rule #6:
- Web sites should always be content-centric.
Rule #7: One qualified visitor is worth a dozen anonymous browsers.
Sites shouldn't live or die by their hit count, or by demonstrating that they garner more visitors than competing sites, though it's clear that a blind obsession with traffic, any traffic, for its own sake, is an important - and misguided - driving force in the business today. That's the catch-22 of competitions and give-aways on the Web too: if the freebie is relevant to your business and helps draw in qualified, relevant visitors, then they're a boon. If they just bog down your server with thousands of visitors who couldn't care less about the actual content of your site, or your business, then they're a failure.
Magazines, for example, can reach a point where the cost to garner new subscribers is higher than the advantages of a higher circulation base. It's a number that most publishers recompute each month to ensure a maximal match of reader needs, advertiser needs, and the requirements of the publishing firm.
One more guideline before I wrap up.
If the Web site focuses on your firm, press releases and product information, particularly pricing, should always be current. Even if you're just creating a home page for yourself, keep it reasonably current.
- Rule #8:
- Ensure your site constantly changes and your information is up-to-date.
You can exploit your timeliness too: datestamp your home page, so when people come to your Web site, they can instantly be reassured that it isn't exactly the same information they saw during a prior visit. Weekly updates, or monthly quasi-magazine editions of Web pages are an effective strategy that can be seen on pages as diverse as Sun Microsystems and The Internet Mall.
This set of rules is unquestionably just the tip of the proverbial iceberg with Web page and site design. Certainly it's also critical to establish a cohesive visual identity for your entire site - just as the logo on your business card matches that on your letterhead - and to offer simple navigational cues on all pages, often just a consistent set of jump buttons running along the bottom of each page. Nonetheless, I hope these provoke some thought when next you design a page. Even better, I encourage you to revist your existing Web pages with these guidelines in mind, and ask yourself what changes you could make to help users have a more rewarding and enjoyable visit.
Dave Taylor is President of Intuitive Systems and author of the best-selling book "Creating Cool Web Pages with HTML" and co-author of "The Internet Business Guide, 2nd Ed." He can be reached electronically at taylor@intuitive.com or you can visit his home page.