Copyright: (C) Copyright 1996 Stoopid Software


CONTENTS
 Page Designing Tips

This file provides some tips, and answers a few of the most commonly asked questions regarding web page design.

     Images

     Document

     Text

     Misc.

About this file

This file  © Copyright 1996 Stoopid Software - All Rights Reserved


Document

Choosing colors

Match bgcolor with background.

The links in my frames don't work


Images

Using "ALT=" with your images

How does that Image appear to Fade in?

Why do my Transparent Gifs show incorrectly?

Controlling Image File Size

Shrinking image Files

Speed loading with Height= and Width=

Using LOWSRC with large images


Text

How can I indent a Paragraph?

When to use <BLINK>


Misc.

What is the "Correct" method of writing HTML?

How much do web authors earn?

How can I protect my work form thieves?


Choosing Colors in an HTML document

Although properly chosen colors can add to a nice looking web page, poor color choices will make it look bad, and can make it hard or impossible to read.

There are a few rules to remember when choosing colors for HTML documents:

If you specify a text color, ALWAYS specify a background color - even if you are using a background image. (see below) The default color in your browser will not be the default color of all users. If no background color is specified, and the user's default is similar to the text color you've specified, the page will be completely unreadable while the image is loading or if the images option has been turned off.

When specifying colors, always choose a background color greatly contrasting your text.


Matching Background Colors
Matching Bgcolor to background image

For best results, choose a background color which closely matches the main color of the image file you have chosen. This allows for a less noticeable transition as the background loads, and a more unified overall appearance to the page. Some browsers may even automatically render page elements (such as horizontal rules and tables) with colors relating to the chosen background.

To implement:

In a paint program which allows sampling of colors from an image - get the RGB values of a common color from the image.  Enter these values into the RGB value boxes of the document color selection dialog box dialog.  For basic colors it may be easy to guess a color which closely matches the image.


Using Alt
Using Alt= with your images

When should we use an alt tag? (always is best) Whenever the image you are portraying is either not explained elsewhere on the page, and especially if the image contains text information.

If you are using an ALT tag on buttons, put spaces in the ALT tag to separate them from nearby buttons. For example, instead of this:

<img src="home.gif" alt="home">

do this:

<img src="home.gif" alt=" [home] ">

Why do we do this? Consider this HTML:

<img src="prev.gif" alt="prev">

<img src="home.gif" alt="home">

<img src="next.gif" alt="next">

would appear as "prevhomenext" in Lynx. Contrast this with the use of the "fancy"

method:

[prev] [home] [next]

Daniel Freeman - http://www.2020tech.com/


Interlaced Gifs

An image which appears at low-res, and slowly becomes more detailed is most likely an interlaced GIF file. Interlacing allows a user to get an idea more quickly of what an image will look like.

Other formats, such as progressive jpeg files, can support this feature -but are less common.

Interlacing should be avoided with transparent gifs, as they may be displayed incorrectly.


Fixing problems with interlaced Gifs
Using Transparent Gif Files

If when viewing a transparent GIF file, it appears "messed up" check to see if it has been interlaced. Some browsers are known to have problems displaying interlaced transparent GIF files. To prevent this problem, simply use the non-interlaced option when creating transparencies in your GIF images.


CONTENTS
Controlling image file size

Large images are bandwidth hogs, and a major buzzkill for people on slow connections.

There are many people who will not stick around waiting for a large image to load, preferring to move on to a faster loading page. If you don't want to scare off viewers (and who would?) avoid these large files, or use a small thumbnail image and link to allow viewers a choice in whether or not they want to spend the time to download and view the large image file.


Shrinking Gif Files
Shrinking Image files

I've seen a GIF go from 80K down to 15K using the method of posterization, available on any good graphics editing utility. This process merely groups colors which are close to one another into the same color. The amazing thing is that the smaller GIF, if shown side-by-side with the original, is almost indistinguishable.

How does it do this magic? Many times, a scanned image will have a dark region which appears to the naked eye to be "black." However, the actual file contains a thousand gradiations between "jet black" and "raven black"--and all those tiny invisible nuances have to be saved in the file. Of course, this isn't just true for black but for all colors in the image.

Not all posterization attempts leave the image virtually the same. Posterization does a butcher-job on gradients (fading from one color to another).

Daniel Freeman - http://www.2020tech.com/


Using HEIGHT= and WIDTH= to speed document loading
Speeding loading with height= and width=

Some browsers do not automatically detect the size of the images in your document, instead, they load the entire file before displaying the rest of the document.

Specifying these attributes allows the tex of the document to be loaded more quickly.


Using LOWSRC

They use the LOWSRC= attribute that Netscape adds to the IMG tag. When a Netscape browser sees this attribute, it will load that image first and then load the normal one (SRC). This is particularly useful for imagemaps, where you can have a low detail, greyscale (ie. small) one load in quickly that the user can use if he doesn't want to wait for the larger one.


Indenting in an HTML document
How to indent a Paragraph

Another area where the HTML language seems to fall somewhat short. Here are 2 common solutions.

1. Use several non-breaking spaces.

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Your text starts here

2. Use a plain Definition tag. This is sloppy, but simpler, and still commonly used.

<DD>Your text starts here

3. Use a table to format your text.  This method, of course, will not work for non-table browsers.


Guidelines on using Blink
When to use <BLINK>

To put it simply, Don't.

Proper use of this tag in moderation would be acceptable, however, there are those who have abused the tag to the point where the sight of any blinking text is annoying to many viewers. The last thing any web designer should want to do is start out by giving readers a negative impression of a page.


Targeting Links when using Frames
Targeting Links in Frames

A common problem users new to using frames have is getting linked files to appear in the correct frame.

"How do I get all of the links from my table of contents frame to fill the whole screen?"

In the .html file you are using as the source for your links, put the element "<base target=_top>" this will set the default of all links on that page to fill the entire screen.

"How can I get the linked file to show up an a particular frame?"

When setting up the frames for a page, you should have specified the name of the frame you wish to target.

   <FRAME SRC=file.html NAME=main>

Use this name in the Target attribute of your link -

    <A HREF=link.html TARGET=main>


Which method of HTML is correct?
Using Correct HTML

To use extensions or Not to use extensions... that is the question.

argument 1: HTML was not intended for page layout. It is strictly for content.

The first team feels that because HTML was intended for total cross-platform portability, including such things as allowing for deaf persons to get information, extensions subtract from it's purpose. Items such as font sizes and colors should be left as a choice for the individual viewer.

argument 2: I want my pages to be as impressive as possible. Layout is king.

The second camp feels that appearance is very important, and HTML extensions allow for much greater control over the final page. Any cost paid in compatibility is made up for in benefits of the new features. A key element often discussed is the high percentage of people who have a program which supports most of these features, leaving compatibility a minor issue.

Unless you have a strong opinion on this subject, is is probably best just to make up your own mind and use whichever method you find most useful. Starting a discussion on the subject is probably not a good idea, as a lot of people take this debate suprisingly seriously, and will get extremely angry when someone challenges their views.


How much do web authors earn?

This seems to be the most frequently asked question about web design. As most rational people could guess, there is no correct answer. If you are considering a career in web design, ask yourself these few questions to get an idea of what you might expect.

How good is your work?

The hard fact is, HTML is very easy to learn. The ability to write markup for a simple page isn't too terribly impressive, and won't be worth too much. Take an honest look at your work, and get the opinions of others who know about web design.

Do you know more than just HTML?

Today, there is much more to page design than a knowledge of HTML.

Some recommendations:

 - Proficiency with the major graphics software packages

 - A Knowledge of the differences between the displays of many web browsers

 - A knowledge of several operating systems (windows, mac, and unix at a minimum)

 - Strong design abilities - Do you have any formal design training?

What kind of portfolio do you have?

If you are looking for serious work, you'd better be prepared to show potential clients some snappy pages you have done for previous jobs.

Do you do CGI?

Designers who are also proficient in perl, java, and writing cgi scripts in general, are much more in demand than authors who only know how to write markup.


Protecting your work
How can I hide my source (or images) from others?

You can't. Your source and images have to be sent for a browser to create the page, unfortunately, this makes it very easy for others to copy.

Although you can't prevent your work from being stolen, it is still protected. Any work you do is automatically copyrighted. This should be easier to enforce if you put a copyright notice somewhere on the page.

Of course, you can help by not adding to this problem, never use images or HTML from someone else's page without permission.


Add your tips
Do you have a tip you'd like to add?

This help file is intended to contain the tips on the tips page at:

http://www.clever.net/gomer/tips.htm

If you have a tip about web page design which would be helpful to other users, please send an E-mail message describing your tip to gomer@clever.net, and it will be added to this page as soon as possible.

Use the subject "Design Tip" for fastest attention. Please specify if you'd like to remain anonymous, or if you'd prefer to have your name and e-mail mentioned.


http://www.clever.net/gomer/tips.htm


About this file

About this File...

This file is a compilation of the information contained on the tips page of the Gomer Website.

If you have a tip you'd like to see included. Click Here

The information contained in these tips represents only the opinions of the submitter of that information. Stoopid Software does not necessarily support or endorse any of this information, it is provided for reference purposes only. This information is distributed without any express or implied warranties whatsoever.