Click any on any of the links in the table below to jump to that section.

Links

Why this is Important
The biggest headache that a webmaster has is making sure that all links work - both internal and external. When a visitor to your site clicks a broken link, he will frequently assume the rest of the site is worthless and just go elsewhere.

How to Fix It
You don't have to test all your links yourself. NetMechanic will test all the links and images on your entire site and run while you are off-line besides! A couple of hours later, you will get an email message telling you where to find the report.

NetMechanic Report: Pages of your site that have broken links on them will have one or more red balls showing [instead of all green balls]. Click the "details" link to see the report on that particular page.

Broken links will be marked in RED. In most cases you can just ignore any links marked in ORANGE. And very few people mind if you have broken links in your guestbook.

NetMechanic Limitations: NetMechanic will only report the first 20 pages of the website. To cover an entire website, you can submit urls from inside the site. There will be a lot of overlap, but if you are careful you can cover the entire site this way. Pages that have a long load time don't always get all the links reported. And NetMechanic doesn't follow Javascript jumpbox links - just the regular HTML links.

NetMechanic Bugs: NetMechanic isn't 100% accurate - occasionally it will mark a link red when it really works fine. But this will show you which links you need to test yourself from your website. Occasionally NetMechanic will give you the url for a report on a different website altogether. NetMechanic is not allowed to test links to official Geocities pages, so you will have to test those by hand. Links to places that have automatic "jump to a different url" redirection are also marked as broken. Some common examples are: Starting Point, RASC, and Netscape.

You can also get help from and Dr. HTML

Load Time

Why this is Important
Many netsurfers have short attention spans and don't like waiting even 15 seconds for a page to load. So your hit count will increase if you keep the load time on your pages under 30 seconds on a 28.8K modem. Most definitely keep it under two minutes, or you will lose a lot of visitors. Yes, lots of people use 56K modems now, but the phone lines in many areas keep actual access speed limited to less than 28.8K even.

How to Fix It
NetMechanic and can tell you exactly how long a page loads at various modem speeds, and they each have a free utility that reduces the file size of images [by decreasing the color depth, at some cost in the quality of the picture].

Please keep in mind that copyrighted graphics are just that and must have the copyrighted artist/owner’s permission before you may alter them in any way (this can be accomplished by an email to the artist/owner from their website in most cases).

In most cases, slow load time is caused primarily by graphics. Animated graphics are the worst culprits. Autoloading sound files will also cause trouble with load time [ doesn't include that time in its Load Time report, but NetMechanic does].

If your awards or rings page for example is too stuffed, try breaking it into two or more smaller pages. Also, you can get your images to load a bit faster by using the dimensions in the image tag. For example:

Images that are on your own website will generally load about 2 seconds faster than those off-site. See also Images.

Tables also will load faster if their size is given, although width is usually better given in percentage so that you are SURE it will fit on everybody's screen or frame, no matter what the resolution is. For more information see the HTML Goodies Tutorial on Tables.

You can also get help from Dr. HTML

Layout

Why this is Important
Both images and text should fit on screen and within frames [if you use frames] without having to use the horizontal scroll. There are few things visitors will find more annoying than having to scroll back and forth to read every line! Scrolling vertically is taken for granted, of course - unless you text in columns. Visitors don't like having to scroll back up to the top again to read the second column.

Each page should be pleasing to the eye, inviting your visitors to linger and see what else you have. A splash of color here and there helps, but if you have too many graphics then the page becomes "busy".

How to Fix It
Normally three graphics per text-intensive page [other than buttons, bullets, bars and the background] is plenty, and even fewer if one is animated. For a page that has very little text on it, you can have more graphics. This last type of page is normally an index.html, awards page, rings page, or else a page whose sole purpose is to showcase graphics.

A page that has a lot of text on it is easier to read if there are blank lines between paragraphs. This is done by using a tag. If you add graphics next to the text, it is often a good idea to alternate sides of the page - that is, the first graphic on the left with text on the right, then later another graphic on the right with text on the left. For more information on aligning graphics with text see Images.

If a page is very long, requiring lots of vertical scrolling to read everything, then it is normally best to break it into two or more pages - even if it loads quickly the way it is. If there is no logical place to break the page, or if the page is an archive that is much better left whole, then having a set of internal links helps. You can put a table of contents at the top of the page, with links to various places on the page. And right before each new heading, you can place a "Back to Top" link. For more information see the HTML Goodies Tutorial on Page Jumps.

Each html page should have a descriptive title in the HEAD section. This is what will show on the title bar of your browser, and on your bookmark for that page. The title on this page is "Website Design Tips". You want to choose something that will help people remember which website that bookmark belongs to. For more information see the HTML Goodies Tutorial on HEAD Commands.

Lastly, avoid having links at the far right of the screen - and most especially allow some blank space in the bottom right corner. This will minimize problems with the Geocities watermark. Even if you can't see it because your browser isn't the latest version, more than half of your visitors can. You don't have to keep the entire right side clean of text, though, as long as the bottom right corner is empty.

For more information see HTML Goodies Tutorials on Layout.

Compatibility

Why this is Important
Compatibility is the easiest issue in website design to overlook. Everything works great when you look at your site! Most people don't have multiple browsers on their PCs, and even that won't spot all the possible problems. Don't try to make your site look fantastic on every possible platform [practically impossible], but there are a few things that can be done to make sure it is at least presentable.

How to Fix It
Resolution: There are a lot of people out there with laptops, or older PCs with not-so-good video cards and puny 14" monitors. So it is best to design your site to fit on the screen at 640x480 resolution. If you avoid using PRE tags and BR at the ends of lines, then your text will naturally wrap and it will still look good at larger resolutions. Specify your table widths as percentages instead of pixels [maximum about 96% to allow a little leeway] and the table will also expand to look good at any resolution. Few things annoy visitors more than having to constantly scroll back and forth to read each line of text. You can test by either altering the settings on your video driver, or resizing your browser to 640x480.

Non-graphical browsers: Besides those who are completely blind who use text-only browsers, most people with slow modem connections surf the net with their images turned off. So it is best to design your site to be presentable without images. This means choosing a BGCOLOR that is similar to the main color of your background image to avoid having things such as white text on a white screen.

Also, you should specify the height= width= and alt= parts of the img tag. Height and width specifies the size the image appears in your browser, either by pixel or percentage. ALT tells non-graphical browsers what text to show. This last is extremely important for images which are links - otherwise a visitor with his images turned off doesn't know how to navigate your site! For example:

It's okay to have images that include text, but the same text should appear for non-graphical browsers. This can be as part of the ALT= or as regular text near the image. Another way to handle this is to have a link to a "text only" page. See also Images.

If you use image maps there should be alternate ways for visitors with non-graphical browsers to navigate. A simple list of plain text links below the image map will do the trick, or a single text link to a separate site map page.

Java and JavaScript: Not everybody has the latest browser. And many people leave their JavaScript turned off for safety. [In my own case, my browser freezes or crashes much more often when my Javascript is turned on.] It's perfectly okay to have Java and/or Javascript, DHTML, or whatever the latest thing is on your site. Just make sure that those with older browsers can at least read your content and navigate the site. So if you use Javascript jumpboxes, provide HTML links as well - at least a single text link to a separate site map page.

Version problems: HTML is evolving, with new commands being added, and others taken away. Which leads to a lot of confusion at times. You can ask NetMechanic and similar places to check your page for browser compatibility and HTML errors.

See also Frames.

"Under Construction"

Why this is Important
Visitors are never impressed by pages that say "under construction". Also confuses search engine spiders and it's perfectly fine to mention that a particular page is constantly evolving - with new links added frequently, etc. It's also okay to have a notice that a section will be "coming soon" - just don't LINK to it until it is complete for visitors.

How to Fix It
Geocities does not allow "hidden" pages - those pages that are on your website but not linked in any way from your index.html page. However, if you have a page or set of pages that are under construction, you are allowed to have it on your website while you work on it [for a reasonable amount of time]. After you have tested it thoroughly, then you can link to it from the rest of your site.

Frames

Why this is Important
Some browsers still in use do not support frames. And other people just plain don't like them, or have computers that tend to crash on frames websites. Another consideration is that if one of your inside pages is listed in a search engine, and it does not have a link to your site map or index page, then a visitor who surfs in from that search engine will not see any of the rest of your site. And search engines don't normally list frameset pages at all.

How to Fix It
If you have a non-frames index.html page, in most cases you can create a no-frames version of your frames website rather easily. Just make one page that is a table of contents or site map, and then make sure each of your actual content pages has a link at the bottom to that site map page. Then you can use the same content pages for both frames and no-frames versions.

In most cases, two frames showing at a time are plenty - a main frame plus a navigation frame. Sometimes three is better, but it is extremely rare for four frames at once to be better than fewer. Too many frames make your layout look "busy".

It is a good idea to test a frames website at 640x480 resolution. Frames that look great at 800x600 resolution are often impossible at 640x480. Frames that look good at 640x480 will still look good at larger resolutions. You can do this by altering the settings on your video driver or by resizing your browser window to 640x480.

For more information see the HTML Goodies Tutorial on Frames.

Images

Why this is Important
Of course you don't want your website to show those nasty broken image pictures. Not only are they ugly but some visitors will assume the site isn't "finished" yet and go away. Broken images are a lot more noticeable than broken links, because you don't have to click on them first.

How to Fix It
You can use NetMechanic as mentioned in the Links tip page to check your website for broken images. It is best to have all images actually on your website - they load about two seconds faster, and you avoid problems caused by the off-site image suddenly disappearing.

AOL users: The AOL browser has a setting called "graphics compression". If this is turned on when you download an image that you then put on your website, then only AOL browsers will be able to view that image. So even if all your AOL friends can see the image just fine it doesn't mean that everybody else can.

BMP files: Most browsers are not set up to view bitmap [BMP] files. They also take up a lot more filespace than GIF and JPG files do. Most graphics programs will convert these files into GIF format for you.

Images that take too long to load will drive visitors away. You can use NetMechanic as mentioned in the Load Time tip page to help you with this area.

It is important that your images fit on the screen and within frames, no matter what the visitor's resolution is. So test your pages at 640x480 resolution. You can do this by either changing your video driver settings, or by resizing your browser to 640x480. Yes, most people with new computers use resolutions of 800x600 or higher, but some people have poor eyesight or 14" monitors, and lots of people use laptops that have very tiny screens.

We strongly recommend using the WIDTH=, HEIGHT=, and ALT= parts of each IMG tag. The width and height will help the image load a bit faster, and the ALT tag will give visitors with non-graphical browsers an idea of what they are missing.

For example:
HEIGHT and WIDTH: These tags tell browser programs how big the image is. This allows the browser to flow text around where the image will be. Without these tags, a loading page will only load fully AFTER the browser has scanned all the images and discovered their size. The effect of this is a blank page while loading, and then everything appearing at once. This can be frustrating for users, and many of them may leave if they don't have anything to read right away.
You can specify either pixels or percentages. To find an image's pixel size, you can load it directly into your browser - the size will appear in the title bar, width first.

ALT: This tag is even more important than HEIGHT and WIDTH. The ALT tag supplies alternate text to be displayed if the image is not. This is especially important for images that are links. This is a courtesy to people who browse with images off. That way, they can still navigate your site without seeing the images.

BORDER: This tells a browser program not to draw a border around an image that is a link. In other words, your images won't have bright blue borders around them if it is set to 0. You can also make borders large if you want to. The default is 1 (pixel) for images that are links, and 0 for images that are not links.

ALIGN: This tells a browser program how to align the image with the text around it. If LEFT or RIGHT [Netscape], the image is aligned to the left or right column, and all following text flows beside that image [to the right or left respectively]. All other values such as TOP, MIDDLE, BOTTOM determine the vertical alignment of this image with other items in the same line. The default is BOTTOM.
For more information see the HTML Goodies Tutorials on Aligning Text with Images and Height, Width, and Alt.

Text

Why this is Important
Text should be easily legible. If it is too small or the color doesn't contrast well with the background, then it will cause eyestrain and visitors will give up. If it is too large, then visitors will get tired of all the scrolling and go somewhere else.

How to Fix It
For large amounts of text, a font size of 3 is very good, with 2 and 4 being acceptable in many cases. Font size 1 should be reserved for small portions of text that most people wouldn't read anyway, and font size 5 or larger should be reserved for headings.

Backgrounds should be chosen so that they do not distract the eyes from the text. A vivid all-over background is normally not a good idea. If you want a splash of vivid color to make your page attractive, either add a few well-placed images, or else choose a border background. This website uses a border background, and the text is kept away from the border by placing at the top, with closing tags at the bottom. A table can also be used to keep text off a border, and so can the tag [which indents the right as well - leaving space for the watermark].

If the color of your text/background combination is glaring, it will cause eyestrain and chase visitors away. Generally, RED text or background [#FF0000] is better replaced by MAROON [#990000], BLUE [#0000FF] by NAVY [#000099], LIME [#00FF00] by GREEN [#008000], etc. except possibly for small portions of the page that you want to catch the eye.

In most cases, it is best to use the same font face throughout a page - and definitely not more than two or three fonts. If you need variety, changing the size, color, bold, or italics is usually enough. Most people find blinking text extremely annoying - just choose one of those loud glaring colors mentioned above and you'll get enough attention.

Unless your visitor has the font face you specify, what he will see is his default font. You can specify alternate font faces this way:

The font that will appear will be the first one that is found.
Lastly, it is a good idea to check your page for spelling, grammar, and stray bits of HTML code floating around. These kind of typos leave an impression with your visitors that the site was slapped together in a hurry and you lose a great deal of credibility. Most frequently this is seen as _ right next to an image that is a link - caused by a space between the IMG tag and the link tag parts.

For more information, see the HTML Goodies Tutorials on Text, Fonts, and Backgrounds. You can also get help from NetMechanic or Dr. HTML.

Organization

Why this is Important
An award-winning website needs to have valuable content which is well organized. Without good organization, visitors will miss wonderful pages of your site because they don't realize they are there, or get lost several levels inside and not be able to find your site map again.

How to Fix It
If you have a collection of articles, it is more convenient for your visitors if they can see a list [table of contents or index] of the articles and then just click on the one that they find interesting or haven't read yet. This is actually also easier to maintain, because when you add a new article, you can put it in its own html file and just add the link to your table of contents. The same idea holds for poetry, short stories, jokes, and almost anything else.

Even if your table of contents isn't on the index.html page, your visitors will still be able to get to a particular article with just a couple of clicks in most cases. Try to organize your website so that almost everything can be reached within three clicks of the index.html page. A large website may need four clicks for a lot of things - but you can make sure the important pages are easily found.

Most people start off with just a few awards and/or a ring on their index.html page. Awards and rings tend to multiply when you aren't looking though, and eventually they cause the index page to load too slowly. At that point [if not sooner] you should create a separate page for your awards and rings - or even several of them. Make sure that your ring page has a link to your index page, and that your index page has a link to the ring page - that way people who surf in via the ring won't get lost.

If you have links to other websites, it is best to have them grouped near the bottom of the page or else on a page by themselves. You want your visitors to stay on your website for a while before they go exploring elsewhere. Some people recommend coding an off-site HTML link so that it opens a new browser, but then there are other people who don't like having new browser windows popping up.

Each page should have a link back to either the index page ["Home"] or a table of contents page. Some websites have a set of navigation links at the bottom or on the side of each page, and others use frames with the navigation links in a bottom or side frame. If your set of navigation links is at the top, then it discourages your visitors from scrolling through the entire page.

Consistent Look

Why this is Important
Your website will look more professional if pages that do similar tasks have the same "look and feel". This also subtly reassures your visitors that they haven't accidentally wandered off your site.

How to Fix It
It is actually much easier to create pages with the same "look and feel" than to have different color schemes for each page. You get one page looking the way you want it, with standard links at the bottom, banner at the top, or whatever. Then you save a spare copy to use as a template. For each new page, you copy the template and then modify it - instead of starting from scratch each time.

Even if you don't use a template, your visitors will appreciate the fact that your navigation links are always in the same place on every page - wherever you decide to place them.

Another advantage of using the same background, bullets, buttons and bars graphics on each page is that if you want to redecorate, you can just upload new graphics using the same names. If the new graphics are the same size, and don't force changes in text and link color, then you won't have to edit any of your html files - instant entire website update!

This also helps with the load time on your inside pages. Any images already in cache will load much faster as far as your visitors are concerned. It is perfectly acceptable to vary your backgrounds, but this is a strong incentive to stick to one main "look" for most of your site.

Sound Files

Why this is Important
Many people enjoy autoloading sound files, as long as the music is appropriate. However, it is important to keep in mind these possible problems:

Autoloading sound files take time to load and start. This can cause severe problems if your visitor has a small cache - the error message pops up, but he has already clicked elsewhere on your page [scrolling down perhaps] and so the error message gets hidden behind the main browser window. And the only thing he can do in many cases is close his browser completely. Is that visitor going to return????

College students often use computers in busy labs, where there are lots of people on the net at the same time. Then there are those who are sneaking time on the net while at the office, and do not want anybody to know about it. And those with older sound cards and junky speakers usually hear something that is not pleasant at all. Even if these people unplug their speakers, they still have to wait while the sound file loads - and many become impatient.

Most importantly, if your autoloading sound file is on a table of contents page, then the music restarts every time your visitors come back before going to another page on your site. So if they didn't like the music in the first place, they will probably not stay very long on your site.

How to Fix It
We recommend not autoloading your sound files, and definitely offering your visitors the option of turning the sound on and off themselves. If you do decide to use autoloading sound files, choose ones that are not very large, and put them on pages that do not have a lot of links.

For more information see the HTML Goodies Tutorial on Sounds.

Miscellaneous Suggestions

Add meta keywords to the head section of your main pages. This way search engines will be more likely to list your site with the proper keywords.

Since some search engines don't use the meta keywords, it's a good idea to include important keywords as text somewhere on your page. A sneaky way to do this is to have a one pixel by one pixel blank image at the top, with an ALT description including a nice informative description of your site, and the entire list of keywords as well. Your visitors won't see it, but it will show up on search engine listings. Arrayal Hosting provides a free service that creates META tags for your site for you. For more information see the HTML Goodies Tutorial on HEAD Commands.

The visitors that really count are the ones that come back time and again. You can encourage this by making it obvious that you update your website regularly. This doesn't have to mean adding a whole new page every week - a simple "Quote of the Week" [or joke, or whatever], or monthly article will do. When you add new articles, mark them as "new" or better yet put the date next to the link to that article. If you have a "What's New" section it should show a history of regular updates. Another way to encourage repeat visitors is to include a form for them to fill out, asking to be notified when you update your page.

Give your visitors some way to contact you. This way you can be reached when there are problems found on your website - and also when people really like it or more importantly want to BUY something.!!!!

Take a look at what other people have done. Don't throw out your own ideas for a copy of somebody else's site, but browsing great sites will give you ideas. You can see how the html code is used on a site by using your browser's "View - Document Source" menu. The html code on other websites is normally copyrighted, but this will show you how to set up tables, sound files, etc.

And of course, it's always a good idea to ask an experienced person to give you a site critique.

This is not meant to be an answer for everyone, and the internet is an ever changing environment. Try to have some fun and enjoy what you are doing, it will show in your website.

Hopefully this answered some of your questions,
Good Luck with your Website Design.
Sincerely,
CEO LooksOver.com