[Date Prev] [Date Next] [Thread Prev] [Thread Next]

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.


             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

     "Use the defaults, Luke. Use the defaults."
     > Obi-Web Kenobi

     "Try holding your breath for as long as it takes your home page to
     > 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

     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

     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

          "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

          "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

     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

     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

     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

     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

     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

     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

     Try not to have two or more places to click that perform the same

     Use a white background. Try to set the background color to white
using BODY

     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

     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

     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

     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.


     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.


     Don't use interlaced GIFs. These give the effect of the image being
     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

     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

     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

     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

     Suggestion for the browser manufacturers: How about adding an
option to turn these
     things off?


     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

     You can use use dictionary lists ('DL') as a simple way of
formatting text that requires

     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

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

     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.


     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

     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

     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

     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.


     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

     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
     language. It is for displaying informat

[Back to Top]

Theosophy World: Dedicated to the Theosophical Philosophy and its Practical Application