Web Design Tips 4/2000

Signs of amateur Web sites:

Busy backgrounds, or backgrounds that don't have enough contrast with body text. Use white.

Intense graphics, heavy use of graphics slows page loading. Only use a graphic if it adds value.

Navigation bars, it is important to achieve a balance between too many links and not enough. You should also use a good contrasting color scheme.

Poor framesets, There should only be one scroll bar on a web page, the right hand vertical scroll. Additional scroll bars, such as one on the left nav, take up valuable real estate and just look junky. Make sure your left hand navigation frame does not need a scrollbar at 760x600 resolution.

Hit Counters, 1st - anyone can grab a free hit counter of the web. 2nd - The hit numbers mean nothing, you can set the starting value to 1,000,000. 3rd - If your site says "00034 visitors since 4/3/98" it doesn't look too good.

"Under Construction" and "Coming Soon", If the content is not there yet, don't link to it. Perhaps mention it as content that is coming but don't build a blank page for it.

"This site is best viewed using IE 5.5 and Netscape 4.75" Your site should look good on all browsers (within reason). If you don't know what this is then ask somebody who knows, or check out some browser statistics on the web. As of 5/01 I develop for IE and Netscape 4.0 and above. And 800x600 and up. However, when designing for 800x600 resolution, content should be kept to 760 pixels wide due to additional space required for Office Shortcut bars that some place on the right side of their desktop.

Bells and Whistles that add no benefit to the user. Avoid animated gif's, spinning e-mail images, text in the status bar, etc. Text in the status bar can eliminate the functionality that many use the status bar for, which is viewing where a link is going before clicking on it.

Free hosting services, Banner images and pop up ad's can really detract from a web site. Suck it up and pay $150 for a hosting service. There are hundreds to choose from.

To drive users away from your site:

Force the user to register before entering your site.

Display a large graphic as your homepage, that a user must click through to get to any meaningful content.

Name your sections and links with cool titles that are not obvious, and force the user to guess what's behind door #1.

Don't provide contact information such as e-mail and address, and never provide a phone number (nobody uses those anymore). Don't offer an e-mail address, just provide a form for potential clients.

Don't read through your content after it has been created. Spell check catches all errors.

Once your site is up, be satisfied with it. Users don't like timely, fresh, and changing content.

Don't analyze your traffic to find out what pages are being viewed the most, and don't act accordingly.

General design tips

Flash - Use it wisely; I love Flash and there are a lot of great uses for it. However, excessive Flash intros that do little to improve your sites purpose can detract from the overall effectiveness of the site. Unless the need calls, stay away from sites built entirely in Flash.

As Flash viewer penetration rates reach close to 95% among Internet users, the concern over users not having the plug in decreases. But, you still may want to provide a link to Macromedia's download page. It all depends on your user base and the importance of the Flash content.

Evaluate how many people are viewing your Flash intro against how many are skipping it (an option you must always provide) and act accordingly. Set up a redirect page that is linked to from the "skip intro" on the Flash intro page. Use this redirect page to gather the amount of users that are skipping the Flash intro. Look at this number against the amount of people that are taking the time to sit through the Flash intro. If over 30-40% of users are electing to bypass the intro it might be time to reevaluate the benefit that your intro provides. Don't create an intro just to show your users you know how to develop Flash animation.

Try to keep aggregate page size to less than 50k. It is not always possible, but it's good to have goals. There are still a hell of a lot of dial up connections out there.

Each file on a page requires a separate HTTP request to the server. Therefore a lot of small images (even if they have small file sizes) can greatly slow down a loading page.

Provide Alt tags on images used for navigation. This will help search engine indexing, and support usability for text only browsers.

Give height and width attributes to images. This helps a page to load faster, because the browser knows how much space to allow for the image. You will sometimes notice a page partially loading, then changing its layout to accommodate an image. This can be caused by not providing height and width.

Information architecture is a delicate balance between having a flat enough site (avoiding too many layers of clicks) and keeping pages clean and avoiding information overload (too many links and pieces of content on a page).

Use intelligent section titles. Avoid using proprietary names and acronyms that your users won't understand. Just because it is a term that is used internally, doesn't mean an outsider will be able to decipher your verbiage.

Use DHTML Wisely; as you know DHTML is very browser specific and often requires intensive CSS positioning. In many situations Flash provides a nice cross-browser alternative to DHTML.

Use pop up windows wisely. Try to avoid popping up browser windows with onLoad, this is just annoying. If you are loading a new browser window, be careful of users loosing the window. Not all users understand the concept of browser windows on top of each other. If you load a new window with important content (such as user login), and the user accidentally clicks on content in the back window, there could be a problem. The top window will disappear and the user won't know what happened, and won't be able to make it reappear by clicking the link. Sometimes it helps to use a "onblur > close" JavaScript to close the top window if it losses focus. Or use some JavaScript to always keep the new window on top , unless closed.

Stick with Verdana, Arial, Tahoma, and Courier. Verdana is my #1 choice; I think it handles the two browsers the best.

Test your site and colors on various platforms, various resolutions, and various browsers. Also remember to check out your site on a laptop. LCD displays can look much different.