W3C home > Mailing lists > Public > w3c-wai-ig@w3.org > July to September 1999

Insight from Web Experts?

From: Charles F. Munat <charles@munat.com>
Date: Fri, 6 Aug 1999 14:47:25 -0700
Message-ID: <008201bee055$46e1d5c0$2f621c26@ujj9y>
To: "WAI Interest Group" <w3c-wai-ig@w3.org>
I received this newsletter a day or so ago. This is the sort of thing that
just makes me sad. A new generation of web site designers filled with the
same bad advice I got when I was starting out three years ago...

Charles F. Munat


W  E  B    S  I  T  E    J  O  U  R  N  A  L

[Jennifer Burrows editor@websitejournal.com ]

Vol.2, No.31

http://WebSiteJournal.netscape.com
"Delivering Insight from Web Experts to Web Site Owners"

August 4, 1999

THE ART OF GOOD WEB DESIGN

It's beginning to get a little crowded out in cyberspace don't
you think? Everything all jostled together, pixel-to-pixel,
crammed into that one tiny space called the browser with no
breathing room. I'm not talking about the exponentially
exploding number of web sites but rather the increasing amount
of sheer stuff that keeps appearing on an already jam-packed
site near you. Elaborate plug-ins like Quicktime and
Shockwave, flash animations and java applets, not to mention ad
banners and plain ol' animated gifs. It seems like only
yesterday that <BLINK> was the only kid on the block.

What we need is some breathing room, a bit of zen-style
emptiness, in short a little more space. The print industry
refers to places on a given page lacking either text or images
as "white space" because in print the background is almost
invariably white. Good judicious use of white space is one of
key elements of print design. On the web empty space doesn't
necessarily need to be white but it is still an important aspect
of good design and should be visible. Or not visible. Depending
on how you want to (not) look at it.

White space is important because it allows the eye to be guided
along a page in a fluid seamless manner. Without white space the
viewer is confronted with an enslaught of options all appearing
equal and overwhelming. Too many images, too much color, too
many fonts or just simply too much text will confuse and
aggravate your visitors, more
readily enticing them to close the browser window rather than to
click further into your site.

There are quite a number of layout tricks you can use to add
clean appealing open spaces to your web site and the simplest of
them all starts with the non-breaking space, otherwise known as
&nbsp; or &#160;.  A whole group of non-breaking spaces
functions like a small block of emptiness. You can put five of
them together at the front of a paragraph to make indents or use
groups of them to push images and words father apart from
one another. You've probably seen the non-breaking space at work
in  w i d e l y  s p a c e d  w o r d s  where a &nbsp; is
placed between each letter to add roomy variety to headlines and
titles.

Along with spacing your words and letters horizontally you might
also decide to add some vertical distance between them in order
to help delineate sections, title headings or just break up
large potentially monotonous blocks of text. You can give your
text a break with the <BR> tag (BR stands for BReak, get it?).
The <BR> tag adds a single empty line wherever it goes. So to
push standard paragraphs farther apart from each other simply
put a <BR> in between each one. Another trick is to wrap a font
tag around a <BR> tag which effectively resizes the Break to be
larger or smaller according to your specified FONT tag SIZE
attribute. This trick is not strictly speaking proper HTML and
may not work on all older browsers but is fine for the 4.x and
up majority.

Even a lot of nicely spaced paragraphs can look funny if their
individual lines are too long so it's important to strike a
balance between width and height by adjusting your horizontal
margins to keep up. The <BLOCKQUOTE> feature gives you a quick
and dirty way to pad paragraphs with wider left and right
margins. This tag has been around forever and most browsers
will indent both sides but some choose only to indent on the
left.

Of course these days the most popular way to control both
horizontal and vertical margins is through tables. Tables were
not intended to be used as a layout tool but with the release of
HTML 3.2 in 1996 designers far and wide jumped at the chance to
layout their text more precisely when finally given a tool to
abuse. While this kind of layout need is exactly
what Cascading Style Sheets are meant to fill, Tables still
provide a decent means of separating sections of text despite
the fact that it was not their original intent to be used in
such a manner. (I don't want to run through a whole table
tutorial right now so if you can't understand the following you
might want to run through Webmonkey's Basic Tables Tutorial at
http://www.hotwired.com/webmonkey/html/96/47/index3a.html.)
Putting your text into a table cell surrounded by empty cells on
either side is an obvious way to set margins on the fly.  For
example:

<TABLE border=0>
<TR>
<TD>&nbsp;</TD>
<td>Main Text Goes Here.</td>
<TD>&nbsp;</TD>
</TR>
</TABLE>

Points of interest in the above example: Set the table border to
zero or else you won't have the invisible margin effect so much
as you'll have a "look I'm formatting with tables" effect. The
second thing to note is that some browsers have difficulty with
empty cells so since you want the cell to look empty without
actually being empty the ideal candidate for the job is our new
sneaky friend the non-breaking space.

The last trick for inserting empty space is in some ways the
most precise. The infamous 1-pixel gif. The beauty of this
method is that you can insert exactly as much nothingness as you
want, one pixel at a time, simply by setting the tiny graphic's
<IMG> tag HEIGHT and WIDTH attributes to exactly what you want.
Because the gif is a scant 43 bytes (that's .04
K) it takes no time to download itself into your visitors'
browser cache and can be used as many times as you'd like. A
slightly less precise method but one that works in an even more
behind-the-scenes manner is to set the HSPACE and VSPACE
attibutes of the 1-pixel <IMG>. Sizing the invisible graphic
this way prevents the loading-graphic-square from appearing on
those truly slow server days.  Many browsers show a "outline"
of images before they're fully loaded. If your image has been
sized to be 200 pixels wide visitors will probably notice such a
square whereas a 1 pixel image with a 199 pixel HSPACE border
will likely slink by unseen. The HSPACE/VSPACE attribute is far
less consistent cross-platform but the choice is yours.  If
you're not up to creating your own invisible gif you can copy
one courtesy of web design guru Dmitry Kirsanov at
http://www.design.ru/ttt/empty.gif.  (Remember if you load that
page you won't see anything--which is after all the whole point-
-so don't panic, just choose Save from your File menu and you'll
download the image to your local drive.)

Well I know I've made it through this whole article without once
giving in but I honestly don't think I can end this without
succumbing to the temptation so I apologize in advance but it's
just too much for me, it's a cliche but it's still good advice
and anyway I can't resist, I have to say it, don't forget:  Less
Is More.




ABOUT THE AUTHOR:

Heidi Pollock (heidipollock@netscape.net) is a frequent
contributor to Web Site Journal and can also be found dispensing
her Web site knowledge to the masses on HotWired and iVillage.
In her spare time she likes to conjure up images of baklava and
wreak havoc on her netizen friends.
Received on Friday, 6 August 1999 17:48:41 UTC

This archive was generated by hypermail 2.3.1 : Wednesday, 5 February 2014 07:13:33 UTC