Taylor's Rules for Cool Web Pages
Dave Taylor
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.
---------------------------------------------------------------------------
(C) Copyright 1995, Dave Taylor / Intuitive Systems
Copyright must be retained on all electronic or print versions of this
document, which can otherwise be freely distributed.
---------------------------------------------------------------------------
At this point in the evolution of the Internet -- and its multimedia spawn,
the World Wide Web -- sufficient content has become available to see a
bewildering variety of different designs and layouts. From the most
appealingly simple text-only layout to eye catching graphics and post-
Photoshop artwork, hundreds of different designers clearly envision
publishing on the World Wide Web quite differently.
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...
Rule #1:
Understand the intended users and uses of your Web site then
focus the design and layout around their needs and
interests.
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.
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...
Rule #2:
Be sparing with graphical elements.
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.
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 ...
Rule #3:
Pages should load within no more than thirty seconds,
including all graphical elements.
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.
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...
Rule #5:
Design horizontally-oriented graphical elements where
possible.
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.
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...
Rule #6:
Web sites should always be content-centric.
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 #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.
Rule #8:
Ensure your site constantly changes and your information is
up-to-date.
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.
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.
---------------------------------------------------------------------------