Quality Assurance for Webmasters

[NewsDesk]

By Greg Cugier

You wouldn?t stop running 50 feet before the finish line. You wouldn?t wash your entire car and not wash the wheels. So why would you be content with a website that is 95 percent finished and not take the extra few steps to make it one hundred?

Making Sure Your Website Works
Quality assurance is an often overlooked part of website development. Once you?ve finished the bulk of your site, go over it again and again until you have smoothed out all the rough edges. Don?t let yourself fall into the category of forgetful webmasters. Without quality assurance, you may be turning away up to twenty percent of your potential customers. Follow these few easy steps and give your site the wax and polish it deserves.

The very first thing that many webmasters forget is that the rest of the world isn?t viewing their pages through a 21? LCD screen set to 1240x1080. The very first thing you need to do is take a look at your page in every resolution you have. Believe it or not, there are some folks out there that use 800x600 (gasp!). See what is above the fold on each resolution. Doing this test will let you know if your top or left bars are too big. A good practice to get into is to code your tables using percentages, not pixels. This way, your page will fit any size screen.

Another thing to consider is the users who don?t use graphical browsers, or who have the images turned off. Also keep in mind the folks who can?t see at all and have to use screen readers. Without the flash and cool pictures and fun colors, what does your website say? Again there are more users than you think that are either blind, or have the images turned off in their browser. Make sure all of your pictures have alt text. This not only helps the user, but search bots like them too.

Cross-Browser Compatibility
Here is one that every webmaster knows about, but so few seem to follow up on: cross-browser compatibility. Everyone has their horror story about the buttons that just don?t work in Firefox. Or the one about how Opera changed their fonts. It is very important to remember that every browser is different, and they all handle the code differently.

At one point or another, every web developer has had to answer this question: Why can?t I have my content show up in this wicked cool font I found? The answer is always simple. HTML is only a set of instructions on how to display the page. It doesn?t actually contain the images or fonts. It just tells the browser how to display them. Being a man, I never use instructions, so why should I expect IE to? The browser can and will interpret the instructions however it wants.

This is why it is so important to make sure you have every detail spelled out for the browser. If you don?t include font size or link color, you are giving the browser free license to display those things however it wants. This is why I always suggest using an external style sheet. This way you can spend a few minutes detailing every aspect of how the site should look, and then every page looks relatively the same in most browsers. Obviously, the browser can do whatever it wants with the instructions. More often than not, however, they will follow your instructions exactly.

While we are on the topic of browsers, who was it that first spread the lie that Internet Explorer was the standard that all developers should code for? How many of you, by a show of hands, are satisfied with ranking high in one popular search engine and don?t care about the rest? If you just raised your hand, get out of my classroom. You are beyond my help. While Explorer is the most popular browser, the other browsers are just as- if not more- important. Think of it this way: what kind of users are using Opera, Firefox and Netscape? Experienced users. The average websurfer, logging on to check the weather and see what new product is on Woot, isn?t going to go out of his or her way to download and customize a new browser. This tells us that the users with these browsers are more preferential. They will notice navigation problems. They will care about minor problems, because they expect more of a website and the internet as a whole. It would be a fatal error to disregard these people.

Here is a test. Code a page using very generic elements. Throw on all six headers, put in some lists, and toss in some other elements. Don?t add any attributes or styles to anything. Now view the page through multiple browsers. Notice how each one treats the page elements? This is why it is imperative that you test your site on as many browsers as you can, and code things as specifically as you can.

Make Your Site a Quick-Draw Cowboy
So far, I?ve let you in on the secret that some users have small screens (some are even using CRT monitors) and that some don?t even view images. I hope you?re sitting down, because this next one might shake you to the core. Here goes: a large number of users still dial up (Double gasp!). For this reason, you need to make sure your page loads as quickly as possible. There are tons of studies on the subject, but some suggest that the average user will only wait about 4 or 5 seconds for a page to load before they leave! Scary stuff for developers who love to slap images all over the place. There is hope, however.

It is common knowledge that images are the number one cause of slow load times. This leaves you with two options: ditch the images or make them load faster somehow. How can you make the images load faster? No, it doesn?t take a magic genie. The first thing you need to do is understand which image formats work best for different scenarios.

The gif format is almost a thing of the past. However, in some cases, it can still be very useful. The gif format doesn?t really have any kind of ?code? for images. It is a set of instructions that details the color of every picture, pixel by pixel, left to right. It can be ?compressed? if two colors, next to each other, are the same color. Instead of ?green green green,? the code will be ?3xgreen.? Huge space saver. If you have an image that only uses a few colors in large blocks, use a gif. Logos are the prime candidate.

For more detailed images, you?ll most likely use a jpg. This format allows you to have more detail and color without using as much space.

You can easily control the size and quality of your images using a number of programs. Photoshop is my favorite. It will allow you to simultaneously see 4 copies of the same image. It will tell you how many seconds the image will take to load at different speeds. It also gives you a great amount of control over the quality of an image versus the size. With gifs, it will allow you to choose which colors are included, and what kind of dithering should be used. With jgps, you have a slider that controls image quality.

Another good tip for quick-loading images is to include the pixel dimensions in the code. This will allow the browser to reserve the amount of space it needs and continue to load the page, loading the image later. This will create white boxes around your site, but it will still be useful, even when it is not fully loaded. If you don?t include the dimensions, the browser has to completely load the image before it can continue with the page. If you have a lot of images on a page, look into using thumbnails.

Final Testing
The last thing you need to do is test the site. Then test it again. Test it a third time. After that, have a friend test it. Make sure beyond all doubt that the site, and everything in it, works every time.

A very important page to have is a custom 404-error page. You want to have a page that is as descriptive as possible. List numerous reasons why the user may have gotten there. Make sure your logo is on the page to let them know they haven?t left your site. A 404 page can be very scary for the novice user. They get confused easily. Provide a link back to the home page and to the site map. You do have a site map, don?t you? Finally, make sure that the 404 page works. There is nothing worse than a broken 404 page, because when it can?t load, it will direct to the 404 page? which is broken! You get a never ending loop of broken pages until the server crashes. Then your site is down for a while, plus your hosting company won?t be very happy with you, either.

The best thing to do, if you don?t have the time yourself, is to have a company test the site for you. There are a lot of programs out there that claim to test the code for you, but they have the same pitfalls as any wysiwyg editor you?ve ever used. It?s always better to have human testing, and there are a lot of companies that will do it for a fair price.

Remember, the greatest site in the world isn?t so great if large portions of users can?t see or interact with it. Now get out there and finish that race!

Contact The Author
Greg.Cugier@charter.net