Avoid Tacky Cliches

To start off, keep in mind that web development, like any other 'craft', is a subjective process, and that any one opinion may differ from the next. The idea is not to establish what is right or wrong, but to try to lay down some ground rules and to give you a place to start. Everything has its place, but try to use tools when they enhance what you're trying to get across, instead of just downloading things and throwing them in because they look neat.

Try to avoid things that have been done a million times before, and are getting a little tired. These might include:

• page counters
  
• javascript text scrolling
  
• excessive animated .GIF's
  
• under construction signs
  
• page fade-ins, etc.

If you really need a page counter, make it hidden...if your site gets a lot of traffic, a counter comes off as being arrogant, and if your site doesn't, do you really want the whole world knowing? Javascript scrolling and page fading have been done so many times, that they serve nothing other than showing a lack of originality. As far as under construction signs go, isn't that the whole idea of web...that it is constantly changing and under construction?

If you see an image you like, try to make your own...if you see an interesting layout, try to use it as a reference. This way you'll have a fresh, original site instead of a page full of backgrounds, animations and javascript functions from an overused library...and your site will stand out from the rest.

Return to Top


White space and web page layout/design

White space, also known as negative space, is the term describing open space between design elements. It can be between letters, words, or paragraphs of text; space in and outside of graphics, and between all of the elements of the page. It is essential for providing spatial relationships between visual items, and actually guides your reader's eye from one point to another.

White space is an important layout technique often overlooked by the inexperienced designer. While some artists concentrate heavily on what to put in, they can overlook what to leave out. A design that is to be visually appealing must also be easy on the eyes. Without an adequate amount of white space, text would be unreadable, graphics would lose their emphasis, and there would be no balance between the elements on a page.

White space takes on an added importance on the web because more of a strain is placed on the eyes than with print material. You'll find that going through the same amount of web pages as print pages can be more visually demanding, one of the reasons being that you usually find yourself staring up at monitor flickering pixels coarser than printed ink. White space provides our brains with much-needed breathing room to absorb the material displayed before us.

Treat white space as more than just a background. Treat it as an integral part to your page design. You'll find it increases your layout's appeal with less visual "noise," while augmenting the visual power of your message.

Return to Top

The Latest Trend

Every week there's a new hot thing on the web, making it almost impossible to catch up...but if you want to reach a wider audience, try to wait until something is generally accepted by users and developers. Somebody needs to push the envelope with testing new products, but this has to be balanced by the willingness of your visitors to download components just to view your site (or their inability to do so, preventing them from seeing what you have to offer). Some examples of this are:

* java applets
* activex controls
* shockwave objects
* tools that require plug-ins
* specialized document formats

This doesn't mean you have to avoid these things, as there is a time and place for everything (as well as a value for being on the forefront)...but be aware that not everyone will be able to enjoy the extended benefits of these features, so use them wisely, and ensure that there is an alternative for people who don't want the 'extras'. Keep in mind that there are always different ways of achieving an end result.

Return to Top

Get to the point
Try to get to the point on the first page, or at least give people an idea of what your site is about. If people have to go hunting, they may move on.

There is nothing more aggravating than a site that forces you to navigate for ten minutes before even figuring out what they do, let alone offering you the information you're looking for. Remember, if somebody is visiting your site, they are probably looking for something...try to make it easy for them to find it. Ask yourself what things people might be looking for in general, and try to make those things accessible easily from the main page.

If possible, try to also offer a way of searching your site, or at least contacting somebody if they don't find what they're looking for. Make sure that visitors don't have to wade through endless links to get somewhere, and conversely, make sure they don't have to scroll down thirty screens worth to find what they want.

Keep in mind that a frustrated visitor probably won't be a visitor for long.

Return to Top

Don't overdo it
One common mistake new developers make is to overdo it when putting together a web site. It's very easy to go overboard with new 'toys', so try to use extras in moderation. Some common things that get overused are:

* excessive graphics
* frames
* background images
* bevels and other graphic tricks

Too much of something just comes off as being tacky...but used sparingly it can add just the right seasoning. When spicing up your site, try to add things only when they complement what's already there, and not to overdo it when you find something you like.

Too many graphics will bog down a page, too many frames will make it difficult to navigate, too many graphic tricks will just end up looking silly. But any of these things will add nicely to the site when they're called for...put the design and layout first, and then dip into your bag of tricks when you need something.

Return to Top


Keep it Fresh
Make an effort to keep your web site fresh, especially if you want to get repeat visitors. If a site remains stagnant, people will stop visiting it again and again, but if there is always something new, people will often drop by just to see what's changed.

You might want to think about doing a complete site redesign every few months, as it not only keeps it fresh, but it also gives you the opportunity to take advantage of newer technology as it comes out. This also helps to improve your site as time goes on, as you'll invariably learn better techniques through each iteration.

One other way of keeping things fresh is use dynamic content to your advantage. This can be in many forms, such as:

* javascript or CGI scripting to create content
* using cookies to track previous visits, and customize content
* randomizing elements of the site, such as main graphics, logos, etc.


If the site looks different every time somebody visits, they'll be more inclined to come back again. If the content is customized to them individually, then you can 'target market' your information, and improve your odds of succesfully reaching that person.

Return to Top


Layout Design
Layout and design are a very subjective topic, but the important thing is to make sure that there is a layout...as opposed to just putting information up, make an effort to display it aesthetically. The web makes it possible to control how your information is presented, there's no reason not to do it. If two companies are selling the same product, and one puts a photocopied flyer under your windshield, while the other hands you a full-color kit while wearing a business suit...which one are you likely to remember?

Some general guidelines you can follow are:

• split your information into logical sections
• make sure your starting page is attractive and well laid out
• try to have a consistent theme throughout the entire site
• try to use colors, styles and fonts that complement each other

Again, the stylish side of a web site is very subjective, and everybody will have their own idea of what looks good. Just make sure that you don't minimize the importance of layout and design...first impressions are hard to erase.

Return to Top

Design for all Browsers
It's important to keep in mind that when you develop a web site, you have to cater to the widest possible audience...not everybody has the same browser you do, with the same graphics settings, or the same operating system. It might look great on your screen, but it might look lousy on somebody elses.

Try to test your pages to see how they look with:

• a different size screen
• a text-only browser (or images turned off)
• a different colour resolution
• a different browser with a minimal feature set

Some issues that can come up are the use of extended features such as image maps, frames, javascript, java applets, or operating system-specific controls...make sure you provide alternate coding for these. Test your site with a small browser window, then try testing it maximized...sometimes tiled backgrounds or positioning of images can change in a way you didn't anticipate.

But most importantly, don't insist that people view your site under ideal conditions...imposing requirements on your viewers guarantees that somebody somewhere will be turned away, and they'll probably be annoyed (and annoyance has a way of spreading through the grapevine). The web makes it very easy to find a competitor, and if your competitor has a browser neutral site, they'll probably get the business.

Return to Top

Graphics Quality
Graphics quality can be a key factor in improving the appearance of your web site. One of the reasons that it's so important is that it is fairly subtle...one site just looks better than the other, and a lot of people won't recognize why.

Try to find a decent graphics package, such as Adobe Photoshop, Corel Photo-Paint or Microsoft Image Composer (there are also various freeware, shareware, and demo packages around). One important requirement is that the software allows something called "anti-aliasing" of graphics. This removes the jaggies from diagonal lines, and makes images look smoother and more professional.


Once you have a good graphics package, you can create customized graphics to use with your site, which helps to keep your site design more coherent. Instead of searching the web for an icon, use a clip-art library to create your own. Instead of having a text heading at the top of a page, create the heading as a graphic using special fonts, colors, or effects such as shading.

If you have a special background color or image, you can create graphics using that background color, so that when they get anti-aliased, they are blended naturally into the right color. This is a common professional technique, which, when combined with transparent .GIF's, helps to eliminate fuzzy borders around graphics, and makes graphics look like a seamless part of the design.
One of the most frustrating things to a person browsing the web is waiting for a site to load...make sure that your site is relatively quick to load, no matter what you put on it. There are obviously a number of factors that can affect how quickly a web site loads, but try to make sure that excessive file sizes isn't one of them.

Return to Top

Total Page Size
As a rule of thumb, a main page shouldn't be a whole lot more than 50K or so. This, under normal conditions, will load the page in a few seconds, but still allow some fairly good use of graphics. If you have significantly more text than that, consider separating it onto separate pages.

Also, remember that most browsers keep images stored in a cache, so if you use the same images on different pages in your site, the browser will likely use the file from the cache, and it won't need to download it again.

One way of keeping the file sizes down, but retaining the freedom to use graphics to create a good design, is to be aware of the different kinds of graphic formats, and knowing how to use that to your advantage.

Graphics of a photographic nature can be stored in a JPEG format with a higher compression ratio, as the quality loss due to compression will be less noticeable. The JPEG format uses what's known as 'lossy' compression, meaning that there is a tradeoff between file size and quality...some of the detail is lost when the file is stored, and you can decide how much based on how big of a file you want to end up with (although you often can't tell the difference).

If you want to make part of the image transparent, or you want to ensure that it displays exactly the same all the time, then use GIF images...although there are a few tricks to making the files smaller, while maintaining the image quality. Try to use graphics software that allows control over the image palette (the colours that are used to make up the image). Most packages will allow you to save a file with an 'adaptive' palette, which picks the most common colours from the image to put in the palette, instead of using a standard palette. The higher quality software packages will allow even better optimization, such as rearranging the palette automatically so that the more common colours have early palette entries, or allowing you to adapt the palette for a smaller number of colours, so you can see how the image will look with 256 colors, or 128 colors, etc. This allows you to make similar tradeoffs between image quality and file size with GIF images.

Return to Top