-----------------------------------------------------------------------------------------------------------------------------------------------------------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, colours, or effects such as shading.
If you have a special background colour or image, you can create graphics using that background colour, so that when they get anti-aliased, they are blended naturally into the right colour. 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.

 

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.

 

Browser neutral
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.

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.

 

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-colour 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 colours, 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.

 

HTML Standard
Make sure you follow all the HTML standards. Sometimes it seems like the extra work is an exercise in redundancy, but remember that not everyone has the same browser as you do, and different browsers might interpret things differently...the more exactly you spell out the content, the better the browser will be able to display it. Some common HTML omissions are:
<HTML> and <HEAD> tags
HEIGHT and WIDTH attributes for <IMG> tags
ALT attributes with alternate text for <IMG> tags
ending tags for <HEAD>, <BODY>, <P>, and <CENTER> tags

There are also some technical reasons why you should try to be fully HTML-compliant, as some browsers are more efficient when the proper HTML code is used. As an example, newer releases of Netscape and Microsoft browsers will insert placeholders for images if you have specified the HEIGHT and WIDTH tags (as the HTML standard specifies). This allows the browser to display the rest of the page even if the images have not fully loaded. Many people also browse without loading images (because of the faster download times)...this will allow you to reach those people as well.
If you do decide to use browser-specific HTML attributes, make sure that your documents are fully backwards-compatible. If your web site is commercial, better HTML compliance guarantees that your site can be viewed by a larger audience of potential customers. Not all customers have graphical browsers, and in the near future, some may have browsers that haven't even hit the market yet. This makes it important to follow standards, because as a web developer, it is almost impossible to test your site on every browser...and the one person who visits your site with an outdated browser may just be your best client.

 

Novelties
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.

 

Overdoing 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.


Total Page Size
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.
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 colours, or 128 colours, etc. This allows you to make similar tradeoffs between image quality and file size with GIF images.

Design for Designer
I've been wanting to get rid of the old Times font on this site for some time but I don't have the time on my hands to go through the 200-odd pages and change it. I have used Cascading Style Sheets for the main body copy, but not for the captions and incidental text, so it's not just a simple matter of changing one external CSS file.
This editorial is set as 'Verdana, Geneva, Arial, Sans-serif'. I have specified the font size as 11px and it looks okay to me on my Mac and PC in versions 4 and 5 of Explorer and Netscape at 800 x 600 and 1024 x 768. If you have serious problems with this, please let me know. If most people find it acceptable, and I know that you can NEVER please all of the people, I will gradually update the rest of the pages to this spec.
Yes, I could write a browser detect routine that serves up a different CSS spec for each browser and platform as I suggest in the Advanced section, but it's not down to laziness on my part. If you have more time than I have and want to volunteer to do the necessary alterations as a favour to the Web design community, I'd be glad to hear from you.
As all my graphics, headlines, buttons etc. have been created to anti-alias against a dark blue background, changing the background colour is not really an option at this point.
I had hoped to be able to review Adobe GoLive 5.0 this month, but it hasn't arrived yet, so, I've done a little piece about another product instead - The Sex and Chocolate Slimming Diet. At least it's cross-platform!
They say that there is no gain without pain - and that is certainly true of using CSS-P. The gain is in producing lean and mean Web pages that conform to Web standards and are easily maintained. The pain is from the hoops of fire you have to jump through to get even a modicum of cross-browser compatibility.
In addition to showing some ways to use CSS to replace JavaScript for rollovers this month, I've been sailing pretty close to the wind with relatively positioned elements and got most, if not all of it working. Had I stuck with the simple 'document type' layouts that saner people use, I wouldn't get into such problems - yes, I know, I'm making a rod for my own back but I'd rather struggle with CSS styles than Rubik's Cubes or crossword puzzles because there are tangible end results.
So, just how far can you go with CSS before getting into deep water? I published a short series called 'Style Sheets Without Tears' in April that shows you the 'safe' route. Then there is the experimental site 'Fun With Fonts' which gives a taste of the greater possibilities - yet works in the majority of browsers.
The fourth example in this month's article doesn't work in Explorer on Windows, which is a major problem considering the ubiquity of that particular browser. Just like a nice big slice of double chocolate gateau beckoning at you from a plate and then they tell you you can't have it.
Like any determined chocoholic, we will find a way!