NEXT PAGE
PREVIOUS PAGE
CHEBUCTO CONNECTIONS HOME PAGE
Habits for developing tidy pages
Introduction
In this month's article, I will share with you some tricks I apply on every
page to keep them tidy.
Learn the basics first
Some editors make the mistake of rushing headlong into the more
advanced HTML tricks before they have mastered the basics. The secret
to developing good pages on the Web is to keep your designs simple and
make sure you are consistent throughout. The more complexity you add,
the harder your pages are to maintain.
If you examine my pages, you will see that I try to stick to a subset of the
HTML language I know well, and which keeps my pages simple and effective.
Glitz is fun, but the primary goal of web-page design should be
to communicate, not to dazzle. I will share with you what I find works
on my pages to keep them neat and functional.
Considerations for reading this article
I design text-only pages that look best in Lynx. Therefore, my comments
in this article will refer to how this document looks in Lynx on an
80-column screen, not in Netscape or other browsers. Also, I encourage you
to use "\" to examine my HTML in this article.
Preventing unsightly wraps
A pet peeve of mine is when the text of a link wraps off the end of a line
and onto the next. I find it makes a document look untidy, and therefore
have developed some simple habits to prevent it from happening.
Using the non-breaking space to prevent wraps
The habit I have developed to solve this common problem is simple.
Everywhere I have a link, instead of putting blanks between the words,
I use the special character . For instance, the link to the next sentence wraps across
two lines. However, the link to the previous sentence stays
all on line because it has characters between the words.
Use this trick anywhere you have text you don't want to break across two
lines, but especially when you have a link in the middle of a paragraph or
a "button".
When the text is too long to keep together
Sometimes, the text is just too long to keep together. That is, if you
have a link that is several words long and appears near the middle of
a paragraph, it will look funny
if you put non-breaking spaces between every word.
A short line will appear in the middle of your paragraph, as in the
link in the previous sentence (that just links to itself).
In this case, you can re-word your paragraph so that the line-break is not
as severe. Alternatively, you might want to just shorten the text of the
link. You may even decide that a link in the middle of the text is not
needed.
Prevention of wraps at the root cause
Sometimes, I find that linking in the middle of a paragraph is
too much of an interruption, so I keep the paragraph relatively
link-free and put references that supplement the paragraph after it
in a list. Because each link in a list starts at the beginning of
a line, it is unlikely to ever wrap.
Keeping tidy lists of links
If you resort to lists as a way of keeping your links neat, you may
still run into trouble, because you might find that short
descriptions are not enough.
For example, let's look at an unnumbered list I have prepared below to
illustrate how not to write lists of links.
Life: What is it about anyway?
The problem with this list is that each item has been made into a
rather untidy link that more often than not spans across two lines.
Use definition lists when list items are long
In addition to using the techniques for preventing links from being
broken across two lines presented earlier, we can rescue this list
by turning it into a "definition list".
Life: What is it about anyway?
- The first in a series of essays on the meaning of life
- Collected letters on life, the universe and everything
- April, 1993 -- November, 1995
- "Life is like a ..."
- the fourth book in a series of 90 poems and short stories
The definition
list is much tidyer than the unnumbered
list when each item has more than one line of information. Use the
"term" element: <dt> for a short summary of the item which will be
the text of the link itself. The "definition" element: <dd> is for
a lengthier description beneath it. If you examine my HTML for this
particular list, you will also find I use the "compact" attribute to
produce a list with no blank lines: <dl compact>. I habitually use
<dl compact> because I find it looks better in Lynx than the gappier
<dl>.
Develop your own habits
As you work on keeping your pages neat, you will discover more things
on your own. Take note of what you learn and go back and apply it
consistently to all of your old pages and for every new page you write.
Finally, if there are things you have learned that help keep your pages
simple, tidy, and functional, I'd like to hear from you.
Ben.
NEXT PAGE
PREVIOUS PAGE
CHEBUCTO CONNECTIONS HOME PAGE
Chebucto Connections INFORMATION PROVIDERS CORNER
is edited by Ben
Armstrong
who is happy to receive Questions,
Comments or Suggestions.
If your browser does not support mail, write to Ben later at
aa458@ccn·cs·dal·ca.
Last Month:
November 1995
Next Month:
January 1996