What is Good Site Design?

She knew how to use Dreamweaver. And she figured out how to use frames. What a cool trick! Then she found this lovely background that she just loved. It was blue-gray. She searched through her freebie buttons and found some peach colored Flash buttons that she thought looked really cool. The background she chose was red, because the logo for the organization was red. Peach might not have been the best color there, but she thought it did not look too terrible.

She created a graphic, and inserted code to make it flex for browser size. It was a very large graphic, filling the entire screen when not scaled. Then she put in text. The background pattern was distracting, so she made the text larger. Then bold. Then bigger still. It ended up being 18 point bold text.

She had been told that tables were outdated, so she created boxes to put the chart data in instead. It would not line up the information in the rows as it needed to, but not knowing any other way to do it, and being afraid to use something "old fashioned", she shrugged and left it that way.

It was finally time to upload the site. She dragged the website folder from her hard drive to the server folder. Then she previewed it.

No site. She just got a 404 error. She called a local web designer to ask what to do. The web designer looked - the server contained the entire working folder - including over 20 MB of working PhotoShop files, and every idea that she had tried and scrapped. The designer explained that the site needed to be uploaded without the folder. She did that... still got a 404 error, and the designer then had to tell her that her home page file would not work if it was named homepage.htm (a website has to be set up so the server folder contains an index.htm, index.html, or index.php file in order to work right). She uploaded just the site. Still getting a 404 error. She had named the file Index.html. The capital letter had foiled her!

Finally working through to the point of being able to SEE the site, she was shocked that it did not look like she had designed it! Only the upper corner of her enormous graphic showed, and her buttons did not work right. The colors of some of the elements were different on different monitors, and the lettering looked unprofessional, and was still hard to read on some monitors. Navigation was clumsy, with 5 layers some places, and no way to get back to the upper levels. She had no clue what had gone wrong, or what to do about it.

The local designer was called in. She took the site out of frames (which had no purpose, just interfered with SEO and usage). She removed the flash buttons, which were unnecessarily cumbersome, did not enhance the design, and which didn't work reliably anyway (and when they did not work, the links on the site failed to work completely - not good when your only means of navigation won't go anywhere). She created a container to put the text into on each page, so that the background showed behind, but so the text was written on a plain white background. Then she reduced the text size so that it looked professional. New graphic links were put in, which coordinated much better with the site purpose. The navigation was restructured to simplify it, and to insure that backlinks were placed on each page. The huge image on the home page was scaled down to a fixed size image, which would work in any browser. The chart was placed into a simple transparent table, where it was easy to use. The end result was a site that while it did not have bells and whistles, nor any complex coding, looked far better, and worked efficiently.

The website was absolutely gorgeous. It had a lovely soft image with a flash animation on the home page - it took forever to load, but what the heck, it was BEAUTIFUL! Once loaded, a message appeared - "Welcome to (organization name)". That is all. The welcome message was a clickable link, but it was not obvious to the visitor. No other navigation was apparent. Once you got inside, you were presented with a similar page - flash graphic which took a long time to load, which then just presented a simple message. The top had a five link nav bar, with names which were not entirely explanatory. Click one, and you got a page, with an image that took forever to load, then a message which appeared over the top of it. There was no need for the flash on most of the pages, because all it contained was a photograph, then text that faded in. Much simpler coding and design could have achieved the same purpose far better, without the delays and confusion. Intuitive navigation choices on the home page would have encouraged people to enter the site more easily.

1. A cohesive design. This does not mean that it has to be spectacularly gorgeous, and it does not need to be out of the ordinary. Just that the elements should coordinate and be pleasing, a little familiar, and comfortable for the intended audience. The design should reinforce the marketing messages.

2. Good navigation. This means when you enter the site, from any point, it should be obvious how you get to other parts of the site. Links should be clearly labeled.

3. Meaningful pages. When you click a link for something, it ought to get you what you wanted. No wasted pages, solid content on each one.

4. Predictable function. If you have a form, it better work, otherwise put in an email address. If you use scripts, they'd better work. Your site should function on more than one browser type, and version.

5. Good speed for the intended audience. If 90% of your visitors are using broadband, then you can use time intensive features. If 60% of your visitors are using dial-up, you better think again.

6. The simplest and fastest possible method of getting the job done efficiently. That means, you used the method of doing things that is the most convenient to the VISITOR, and did not make things any more complicated than they had to be to get the job done.