home sidereal designs

The Basics III: Do's and Don'ts of Web Text.



"The Desktop Global Marketer" (tm)

   A free on-line newsletter of Sidereal Designs, Inc.,
   for Internet Entrepreneurs, and those who are
   considering becoming one.
_____________________________________________________

                 June 27th, 2000

In this issue: "The Basics III: a bit about what can 
and can't be done with text on a web page, and how that 
should guide the way you prepare one. It's important to 
know this whether you're going to write your own pages 
or hire a webmaster to build them."

_____________________________________________________

   "The Desktop Global Marketer" is free, and may be 
   re-published freely with permission. We encourage 
   you to give it to your friends.

   For subscription (or un-subscription) details,
   and other information, please see the end of the 
   newsletter.

   For any other purpose, please write to:
   	jamie(at)siderealdesigns.com
   Or visit us at:
   	http://siderealdesigns.com
_____________________________________________________

This is the third in our series of articles on "The Basics", in
which we cover some of the ins and outs of the Web for those who
are just getting started with it. 

In this edition I'll point out some of the issues involved in
presenting text on a web page, including the text itself and the
layout. I'll discuss a bit about what can and can't be done with
text on a web page, and how that should guide the way you prepare
one. It's important to know this whether you're going to write
your own pages or hire a webmaster to build them.

It's particularly important if you're using an amateur
page-building tool like Microsoft FrontPage that will write the
code for you, because it will happily write code that will
specify things that shouldn't be done. If a webmaster writes it
for you, you will also want to know what to ask him for and what
not to ask for, although presumably he or she will give you some
guidance.

Some of the things I'm going to say refer to ordinary pages
written in the standard code called "HTML" (hypertext markup
language) which is how the vast majority of pages are written
today. There are other newer ways of writing pages available such
as "CSS" (cascading style sheets) which do permit you to do
things you can't do in HTML, but the problem with these is that
older browsers cannot handle them and current browsers respond to
them in different ways. If you don't know that your audience is
using new browsers of a uniform type, then for the present it's
best to stick with plain-vanilla HTML.

Let's look at the issue of fonts. Many people want to specify the
fonts for various parts of the page. HTML will let you do this,
and it's easy to code HTML tags to specify any font you
want. Unfortunately, your viewer's browser is under no obligation
to comply and usually can't. The reason is that the browser forms
the fonts on the viewer's screen by getting them from files in
the local computer. If they're not there it will choose a default
that is there, and that will almost always be something that
won't look like your intent. If it's an at all unusual font most
viewers wont have it. The fact that you got it with Microsoft
Word doesn't mean it's common.

What we usually can control are the following font
characteristics: serif or non-serif, bold or regular, italic or
regular, color, and size. The viewer's browser will almost always
be able to come up with something that matches these
specifications, and it will give you quite a bit of control. 
These things can all be specified independently of the font name 
or "face."

The other way to get the font you want is to use an image of it
rather than text. That is, create the text you want in an image
editor such as Photoshop that will turn it into a picture. The
picture is downloaded to the browser from your site so there's no
issue of what the viewer's computer does or doesn't have. This
approach is frequently used for fancy fonts in captions and
banners, but not elsewhere because images take time to load and
presenting much text that way would cause the page to load VERY
slowly!

Another common error beginners frequently make is to try to
specify where line breaks occur. We often get requests to adjust
which word a line breaks at on a page. The problem is that every
viewer will have a different screen width, a different browser
window size, a different default font size, or other local factor
that makes line breaks that look right on your screen look all
wrong on theirs. HTML actually ignores line breaks in text and
puts them where it works best for the viewer's machine. We can put
in "break tags" that force it to break at a particular word, but
that will probably result in a break in the middle a line on the
screens of many viewers even though it's in the right place on
yours. The way to do it is to use break tags only where you want
to actually begin a new paragraph and to let the local browser
decide the rest.

One of the more powerful ways of influencing the look of a page
is the overall layout of the text.  There is a structure called a
"table" in HTML that lets us define areas of the page in which
text or other elements can be confined to particular locations on
a page. These can be defined in absolute terms or in elastic form
as percentages of screen width. There are many good uses of
tables such as containing the maximum page width to prevent
lateral scrolling, grouping and positioning bodies of text, and
in-setting images into text.

Because we can control position this way it is easy to abuse the
power. Often the right way to lay out text in print is the wrong
way to do it on a web page, and tables permit people to carry over
ideas about layout from the print world to the screen whether or
not they belong there. Columns are a good example. Tables are the
means we use to define multiple columns of text down a page. We
are all used to the very nice look columns give to newspapers and
magazines, and indeed they can be used quite elegantly on web
pages when used correctly. People can read printed pages faster
with columnar text because the eye doesn't have to scan
laterally. The same is true on the screen up to a point.

However there is a major difference. The vertical window on the
text that is visible on a screen is relatively much shorter than
on a page. Further, the eye cannot simply travel on down the
column; you have to scroll down to see the rest of it. This means
there are two ways that columns can be acceptably used on a web
page. The first is to lay out your text in columns that are no
longer than the height of the shortest probable vertical window
used by any viewer, so that the eye can travel to the bottom of
the first column and then up to the top of the next. This is
rather restrictive as there is really not much vertical space for
text on a web page that's visible without scrolling.

The other way is to lay out your columns so that everything you
have to say on a particular subject is said in one vertical
column. The viewer will generally scroll down to read a column,
but will never scroll all the way back up to continue it. Imagine
reading a book in which you went on page after page in the same
column and then had to backtrack to the beginning to continue at
the top of the next column and you get the idea. Single,
self-contained vertical columns on a page are the most effective
way to use columnar organization on the web.

While we're on the subject of scrolling, remember to give the
reader's eye lots of visual cues to location in the text as it
scrolls by. If you didn't see it earlier you may want to review
the article on "Writing for the web" in the newsletter archive on
our site: http://siderealdesigns.com which deals with this and
other issues of web-writing.

Understanding these limitations of text-presentation on web pages
will enable you to design text that looks pleasing on any
viewer's browser and is easy to read as well. Happy writing!

Jamie

_____________________________________________________

To subscribe, send email to: 
	newsletter-request(at)siderealdesigns.com
and include the word   subscribe   as the only item in
the body of the letter.

To unsubscribe, send email to: 
	newsletter-request(at)siderealdesigns.com
and include the word   unsubscribe   as the only item in
the body of the letter.

If you have problems with either of these, write directly
to jamie(at)siderealdesigns.com for prompt attention from
a human.

If you would like to re-publish any of our newsletters,
at no cost, please contact jamie(at)siderealdesigns.com.

"Sidereal" is pronounced sy-DEER-ee-all, and means "of
or pertaining to the stars, the heavens, etc."

______________________________________________________________________________
Sidereal Designs, Inc. "Making The Web Simple."   http://siderealdesigns.com






Copyright © 1997-2000 by logo Sidereal Designs, Inc. All rights reserved.