Art & Zen of HTML
Nov 30, 1996 01:01 PM
by M K Ramadoss
Some of those on this maillist may be interested in the following I
picked up.
MKR
==========================
Art and the Zen of Web Sites
"Everything you know is wrong."
> Inside Macintosh, 1984
"Web publishing is no more about HTML than book publishing is about
type fonts."
> Henri de Toulouse-LaTech
"In building your web site, demonstrate your creativity by showing
interesting images,
saying interesting things, and making it a nice place to visit."
> Vincent van Gui
"Hyperlinks are the GOTOs of the '90s."
> Henri de Toulouse-LaTech
"Colored or textured backgrounds, weirdly colored text or links,
and a preoccupation
with appearance over content are sure signs of a "first generation"
web site."
> Pablo PigCasso
"I have yet to see a web site that was made easier to understand,
easier to navigate, or
had a better presentation of its content because of the use of
frames. In most cases, it
made things worse."
> L' Architecte Karp
"If you only have a sparse amount of data, or if it isn't very
meaningful, consider
dressing it up with Netscape tables."
> Henri de Toulouse-LaTech
"Although art can be created with a chainsaw, this is hardly a
justification for giving
every would-be artist a chainsaw."
> Pablo PigCasso, commenting on some of the newer "extensions" to
HTML
"Use the defaults, Luke. Use the defaults."
> Obi-Web Kenobi
"Try holding your breath for as long as it takes your home page to
load."
> Henri de Toulouse-LaTech
"In a successful advertisement it's the graphics that grab you, but
it's the text that does
the selling."
Pablo PigCasso
"Where were you when the page was blank?"
> Truman Capote
What is web publishing?
Putting together a web site is a unique blend of publishing, user
interface design, and
technology.
The three main activities of visiting a web site are reading text,
viewing images, and
interacting with its interface.
Web publishing is >not< an opportunity to show off your technical
prowess. Use the
technical aspect to support and enhance, but don't let it overpower
the other aspects
of your work.
Web publishing is >not< an opportunity to show off your graphic
arts skills. Use the
graphical aspect to support and enhance, but don't let it overpower
the other aspects
of your work.
Web publishing depends on an understanding of Internet science, the
same way that
cooking requires an understanding of food science. But when
gourmets meet, they
discuss the great chefs, not the great food scientists.
What are the goals of your site?
Is the goal to entertain, to provide information or graphics, or to
provide some unique
service such as an index or database? Or, perhaps, it's something
completely new.
If it's for a business, are you trying to attract new customers,
give information about
products and services, do market research, provide customer
support?
How does the design and implementation of your web site support
your goals?
For commercial sites
If your site is a commercial site, most of the people who visit it
will be there to get
some sort of information. They won't be there for "a total web
experience," or to be
entertained, or for the thrill of visiting a "killer web site."
They'll want to know things
like:
"What models are available and what do they cost?"
"What are the features of your products and services?"
"How can I contact your company?"
"Do you have any new products or services?"
"How can I get the widget I bought from your company to work
properly?"
"I want to see financial reports and other info."
"Do you have any employment opportunities?"
A commercial web site will become an important adjunct to your
company and, in
some cases, it will be the main way in which your customers and
others interact with
you in the future.
When the web was young, many companies wanted to "establish a web
presence" so
they turned to graphic arts shops, advertising agencies, and the
new crop of web
design firms that were hanging out their shingles. Although these
firms had a good
background in graphic arts, they had little experience in the many
aspects of creating
web sites. They over-emphasized the graphics aspect and tried to
entertain in the same
way as print ads or TV commercials.
However, an effective web site needs a lot more than this. It
should start with a
requirements definition that evaluates the real needs of the
company and how they can
best be served through the web. This should be followed by a
careful design and
planning stage. The next phase is to build the site.
But, unlike a print ad or a TV commercial, a web site needs
constant updating and
maintenance to evolve and stay current. A lot of sites were
designed in a way that
made this difficult. You also have to consider the operations
aspects of the site, such
as guaranteeing response time and availability.
Few recognized the need for web site statistics, so they didn't
include them in the
original plan, or design them into the site so they would give
effective information.
If your company is going to go to the trouble, effort, and expense
of building a
corporate web site, you should consider engaging the services of a
systems architect
before you contact the graphics companies or hire those Java
programmers. An
architect will plan your site as a system designed to meet your
corporate goals, rather
than just a bunch of interconnected HTML pages.
Make your site easy to navigate.
Give a lot of thought to the roadmap of your site and how its
different elements are
linked. How is this navigational information conveyed to the user?
Could someone, after visiting your site, draw a simple diagram
showing how the
different elements are connected and how you get from one place to
another?
If someone comes to your site looking for a specific piece of
information, how easy is
it to locate it?
How does a visitor figure out all of the things they can see or do
at your site?
How does a visitor figure out how to navigate your particular site?
How can the visitor tell if they have seen everything?
How can a visitor tell what they have and have not seen?
Make it easy for a visitor to determine what is new and when things
were changed.
A site that is difficult to navigate will also be difficult to
maintain.
Complexity will limit the size of your site.
Complexity will make it difficult to test your site.
Some ways to generate repeat visits to your site:
Make it large enough to require more than one visit to view the
entire site. But make it
easy to remember what the visitor has already seen.
Change it often. But make it easy for the visitor to figure out
what was changed, and
when.
Make it a source of reference material - a list, index, database.
Perhaps allowing the
user to search it for a particular topic or item.
In the world of the web, every visitor is different
Remember that there are great variations in the the computer
platform, display setup,
processor and disk speed, connection speed, and the particular
browser software
being used by each individual visitor to your web site.
There will be a great variation in how your site looks to different
users if you rely on
fancy HTML tricks and commands.
There will be a great variation in how your site looks to different
users even if you
don't use fancy HTML tricks and commands.
You have to decide whether the goal of your site is to impress the
"in crowd" with your
technical razzle-dazzle, or to make it a site for the enjoyment of
everyone. (Note: the
"in crowd" is usually very small.)
Don't create a site that only a small percentage of your visitors
can view properly.
As a result of heavy Internet traffic, web pages bloated with
gratuitous graphics, older
hardware or software, a fair number of folks a surfing the web with
the graphics turned
off in their browsers. What does your site look like without its
graphics?
You are going to lose a lot of points if you mention Netscape (or
Microsoft), in any
way, on the first page that your visitors see. (Unless of course,
you're a Netscape
employee.) This includes describing your site as
"Netscape-enhanced," telling your
visitors that your site is only presentable if they have the latest
version of Netscape, or
pointing to a site where they can download the latest version of
Netscape. Think of the
message that it sends about you and your site.
Remember that the major online services have over 10 million paying
customers. Very
soon, most of them will have web browsers, but they won't be the
very, very latest
version of Netscape. Your pages may look very strange to them.
How does your site look with Lynx? Try it to see how your site
looks with a text-only
viewer. This is the only viewer that the typical Unix user will
have. If your site is mainly
informational, don't deny access to these potential visitors.
For commercial sites, there are some special considerations. For
instance, you may
find that a high percentage of your potential customers are using
the Prodigy or the
AOL web browser. They are also the ones most likely to print out
your pages for later
reference.
The people with money to spend do not have time to fool with
getting a SLIP or PPP
connection running, and they don't have time to get and tune the
latest version of
Netscape.
They will most likely be using browsers that are integrated into a
full-featured online
service that provides a single package with news, stock portfolio
tracking, and a
seamless interface to the Internet and the web.
The real point is that if you have a commercial web site, you can
keep Netscape
around for testing, but make sure it also works with whatever
browser is provided by
Prodigy, AOL, and Compuserve.
The user interface
Consider the signal-to-noise ratio of your interface. How much is
useful and
interesting, and how much is just noise? Avoid using large or
gratuitous graphics that
don't add to the content of the page.
Remember that browsers have a lot of user-configurable features --
colors, fonts,etc.
These can really mess up your fancy interface.
Don't make the user guess where to click.
Don't replace bullets and horizontal rules with images. It eats
bandwidth and confuses
the user. If you use images as bullets, your visitors may try
clicking on them and
wonder why nothing happens.
Be very careful in using graphic elements as controls. The user has
to guess what to
do.
Try not to have two or more places to click that perform the same
action.
Use a white background. Try to set the background color to white
using BODY
BGCOLOR="#ffffff".
Don't forget that link tags show up in different colors than
regular text, and may change
color after a link is viewed. Consider how these tags will show up
against a colored
background. (And remember that these colors will be different on
different browsers
and can also be changed by the user.)
You can use a shade of gray as a background if you are not
displaying text against it.
Use as light a shade as possible.
Keep the interface uniform. Have the same controls perform the same
action
everywhere.
Don't use colored, textured, or graphic backgrounds unless
absolutely necessary. They
may look fine in your browser, but could end up looking quite
different in someone
else's browser, or on a computer with different video hardware,
color depth, etc.
They're distracting, and they really do make text hard to read.
Another problem with backgrounds is that they are handled
differently by different
browsers. On some, your page is first displayed, and then the
background suddenly
shows up, like a layer of smog descending on the page. With other
browsers, you sit
and watch a blank page until the background has been downloaded.
Use color to convey information or to draw attention to areas where
it's really needed.
Displaying images against anything but a plain background may cause
them to be
rendered incorrectly by the browser. And it may make it difficult
for a visitor to view
them.
Use the "CENTER" command for displaying graphics.
Don't blink anything unless it's to indicate an emergency such as a
life hazard. It annoys
the hell out of some people.
Don't use tricky (or undocumented) HTML to do dissolves or fades.
They look
different on every machine. And after a while, they can get
downright annoying. And
they may stop working (or work strangely) on different browsers or
on new releases
of your current browser.
Don't have something that, when clicked on, takes the visitor back
to the page they're
already on. Disorienting. This is common on sites where every page
has links to every
page.
One way to get a precise block of type, such as a name and address,
to appear
correctly in every browser is to render the type in an art program,
then save it as an
image (GIF) file. If done properly, a name-and-address block,
including email and
web addresses, should be about 2K bytes. This can actually be more
efficient than
using text if the name and address appears on several pages. (But
don't forget to
include a text alternate.)
Don't change any of the type colors -- either for displayed text or
for links. It only
disorients the user.
You can set large (headline) type, normally black, to a shade of
gray. But not too light.
Imagemaps
Avoid putting imagemaps on your pages unless you have a really good
reason for using
them. Fancy imagemaps can be far more confusing than a
well-formatted text list or a
simple set of buttons. In many cases, it's hard to tell just where
to click. This is
especially true it the map contains both images and words.
They take up a lot of bandwidth and, in most cases, add nothing to
your page.
If you use a large imagemap, your visitors may have to wait for
well over a minute
before they can begin to navigate your site.
Unlike regular text links, which change color after being clicked
on, imagemaps give no
clue about what's been seen and what hasn't. This makes it more
difficult for the user
to navigate your site.
Imagemaps limit you to a very simple site. It's difficult to
include more than a few items
in the map, especially if you are including both icons and text in
the map.
The time and effort it takes to modify both the image and the map
make the use of
imagemaps a real maintenance headache. It will take far longer to
update or change
your site if it means modifying the imagemaps as well. This is
especially true if you have
used imagemaps on many of your pages.
If you use an imagemap, make sure that you include a text list with
identical items for
those who are confused by your map or are using a browser where
images are not
being loaded. Locate this alternative list as close to the imagemap
as possible to avoid
confusion. Make sure that the list contains all the items on the
map, and that they are in
the same order.
If your imagemap is a figure that depicts something real, like a
map of the United
States, don't assume that your visitors will be able to identify
things (Which one is
Nevada?) solely by their shape or location.
Also, make sure that your imagemap gives some sort of a warning if
the visitor clicks in
an area that doesn't relate to anything or isn't defined in the
map's table. (What
happens if the visitor clicks in the ocean, next to California?)
Your page's title
Don't forget to put a title on every one of your web pages. The
title is what shows up
at the top of the browser's window when a page is displayed. If
your page doesn't
have a title, the browser will display "Untitled," or "No Title, "
or simply the URL of
the page.
The title is important. If someone bookmarks your page, the title
is what shows up in
their list of bookmarks. Or, if someone puts a link to your site on
their page, they'll
probably use your page title as the link text. Or, if the page is
indexed by a search
engine, the title is what shows up in the search results. You get
the picture.
Even if you do have titles on your pages you still might want to
reevaluate the actual
wording. Make sure that the title actually says something. Instead
of "My Web Page,"
how about "John Jones -- My Web page?" Imagine viewing the two of
them in a
bookmark list.
If you have a business site, you may want to go even further. For
instance, you may
want to put the name of your business (or an abbreviation) in the
title of every page on
your site. You never know which of your pages will be bookmarked,
and it will be far
easier to pick you out in a list of bookmarks, or any other list
that uses the page's title.
A Tip
Keep your home/main page small so that it loads quickly -- under 15
seconds is a goal
worth aiming for. (Especially important when the web slows down.)
This will hook the
visitor. Think twice about putting that 90K GIF on your home page.
Remember that
yours is only one of millions of sites -- websurfers have short
attention spans.
Standalone Images
The most common use of standalone images is on a page with a lot of
little images
where clicking on one of them loads a larger version. If you just
link to the image file, it
ends up in the upper left corner of the page, all by itself.
Use an HTML page to hold the image. This will let you center the
picture and put in a
title and other information.
Images
Don't use interlaced GIFs. These give the effect of the image being
continuously
redrawn at a higher and higher resolution. The effect is annoying
and it's hard to tell
when the picture is actually ready to be viewed. It's especially
annoying when used to
render fine artwork. It's also annoying when the the web is slow
and the image sits
half-rendered for a period of time. It's just another special
effect that will soon be
boring.
Don't use an image compression technique that isn't supported by
all browsers. At the
present time, GIF may not be the best method, but it is the right
one. (Choosy web site
builders choose GIF.)
Also, a JPEG image may compress to a smaller file than a GIF,
taking less time to
download, but it will probably take longer to decompress and
display, thus making
your effort for naught. This is especially true on older, slower
machines.
JPEG compression also imposes a loss of image quality, which may
(depending on the
settings in your image-conversion program, and your visitor's
hardware) be quite
noticeable.
For each image, try both compression techniques and see which gives
the smallest file
size, the best image quality, and the best performance in
downloading and viewing.
(For some images, the GIF may actually be smaller than the JPEG.)
Animated Images
Please, please, please don't put animated images on your page.
They're the closest
thing the web has to computer viruses.
They make the page load slower -- they use much bigger files, and
the animation itself
slows down the loading of the rest of the page, especially on
slower machines.
They cause the page to load improperly -- the little red light on
the browser doesn't go
out, so there's no way to tell if the page has finished loading. If
the visitor clicks the
'Stop' button, it may turn out that the page hasn't fully loaded,
so it has to be loaded
again. They can also keep you from being able to scroll the page
while it's loading.
They're distracting, making it harder for the visitor to
concentrate on the other things
on your page.
If you switch to another application, the browser sits in the
background, chewing up
processor cycles doing animation.
The images run at different speeds, depending on the visitor's
hardware -- crawling on
slower machines, and flickering between images on fast machines.
When you move the cursor over a link (without clicking), the
browser's status line is
supposed to show where the link will take you. If an animated image
is running, this
information will be lost. In fact all status information (except
what the animated image
is doing) will be lost.
And lastly, a number of folks have reported browser crashes on
leaving a page that
had an animated image. When the browser crashes, it can mess up
things like the
browser's history list, tables of cached items, and your bookmarks
file.
Suggestion for the browser manufacturers: How about adding an
option to turn these
things off?
Text
If you're presenting text documents on your pages, give some
thought to making them
easy to read.
The viewing area of your browser is much smaller than a normal
printed page, so you
may have to reformat your documents to fit this new environment,
rather than just
dropping an existing document into your HTML editor.
Don't run text the full width of the screen. This creates long
lines of text that are difficult
to read. Text also needs air around it, to breathe. That's why most
printed documents
have margins.
You can easily solve these problems by using the 'Blockquote' tag,
which gives a
margin on both sides of the page. You can nest Blockquotes to vary
the width as
necessary.
You can use use dictionary lists ('DL') as a simple way of
formatting text that requires
indentation.
Don't use long paragraphs of text. It's hard to read these in
printed form and, for some
reason, even harder on to read on a computer screen. Try to keep
paragraphs to four
sentences or less.
And never put a link in your text, especially in the middle of a
sentence or paragraph.
If you have links that relate to your text, put them at the end,
like footnotes. Give your
visitors a chance to read your text before sending them somewhere
else.
Java Applets
A lot of people are learning how to program in Java and JavaScript.
Most of their
early efforts seem to be some form of nonstop, repetitive animation
that is both
annoying and distracting. Some applets keep the page from loading
or scrolling
properly.
One popular applet overwrites the browser's status display at the
bottom of the
window, keeping you from viewing the destinations of the links as
you move the cursor
over them. It also keeps you from seeing the startus of the current
page as it is loading.
If you are developing Java applets, you may wish to wait until you
have something
more worthwhile before inflicting your early efforts on
unsuspecting visitors.
Frames
Don't use frames just to show that you know how to use frames.
Your web page is small to begin with, and carving it up with frames
can reduce the
usable area to a tiny fraction of the screen. Many visitors will
have browsers that can't
see frames, so you'll have to maintain two versions of your site.
Don't build your site around frames. It makes it difficult to
navigate and limits you to
having a very simple site. The cursor keys don't work unless you
click in the frame you
want to scroll, and the browser's 'Back' button may produce
unexpected results.
And there's also a good chance that a visitor's attempt to print
out your page will end
in failure.
And an interesting surprise awaits the visitor who tries to
bookmark one of the pages
within your site.
And you may get unexpected results when a search engine indexes
your site. Visitors
who come to one of your pages from a search engine won't be
entering through the
site's front door and won't see the frame that would normally be
holding the page.
One possible use for frames is if you have a report where you want
to lock the row or
column titles so they don't scroll off the screen.
"Friends don't let friends use frames."
> Vincent van Gui
Hard Copy
What do the pages on your site look like when they are printed out?
Try it. You may
be in for a surprise.
You might want hard copy because it makes it easier to design and
edit your pages.
Just like an advertising layout.
It gives co-workers and customers a way to view and comment on your
pages.
You can build a portfolio of your work to use in sales
presentations or for advertising.
Your visitors can print out a hard copy of the information on your
site for later
reference.
If you have a lot of browser-specific code, such as textured or
graphic backgrounds,
these may not print out.
If your page has a black or colored background, it may not print
properly.
If your page uses frames, it probably won't print correctly.
But the biggest surprise awaits those whose ultra-chic pages have
black or dark
backgrounds with white or light-colored text.
Testing
Test your pages with several different browsers. You will be amazed
at the variations
in interpreting even the simplest HTML tags.
Make sure you try your pages with the browsers provided by major
online services
such as Prodigy and AOL.
Test all your pages after making even trivial changes to your site,
just to make sure you
haven't broken something. (Programmers know that you're far more
likely to introduce
an error when making changes than when the original work was done.)
Make sure that you test your pages in a way that forces the browser
to get everything
-- both text and images. This means turning off the caching,
emptying the cache from
within the browser, or deleting all the files in the browser's
cache directory. This will
force the browser to get everything from scratch, and you'll see
how long your pages
really take to load. You'll also see how long the browser hangs
there with a blank
screen before something shows up.
Now go to your browser's options dialog and make it so that the
page always has a
white background and the links are their default colors (blue and
red). A lot of people
will have their browsers set this way to avoid viewing weird
backgrounds or
strangely-colored links. How does your page look with these
settings?
Turn on the "don't load images" menu item, or checkbox in your
browsers option
settings. How does your page look without its images? Is it still
possible to find your
way around?
If your page is blessed with a Java or JavaScript widget, what
happens when you look
at it with a browser that doesn't support Java. What about a
Java-enabled browser
with Java turned off ?
If your page needs a special plug-in, or a special helper
application, or uses a special
file type, test to see what happens if one or more is missing or
not supported. It might
be enough to make Netscape toss its cookies.
Have other people test your web site.
Pay attention when someone tells you they had trouble viewing your
site. For every
person who takes the time and trouble to write to you, there are
many more who will
give up in frustration.
About HTML
The easiest way to learn HTML is by studying the source from other
people's pages.
Most browsers will get the HTML source for the page you're looking
at. It's also a
good way to learn what makes bad pages bad.
Be careful about using new or specialized HTML features. They may
not be upward
compatible with the newer browsers or new versions of HTML.
Use the absolutely smallest set of HTML that will do the job. Make
this something you
can brag about, rather than how you mastered the fancy commands.
Don't use undocumented HTML effects to do things such as dissolves
or fades. This
may stop working in the next release of the particular browser
you're designing it for,
and my cause some other browsers to function incorrectly.
Never forget that HTML is not a page description language or page
formatting
language. It is for displaying informat
[Back to Top]
Theosophy World:
Dedicated to the Theosophical Philosophy and its Practical Application
