 The 10 ideas presented below aren't meant to be the only way to design a web site. But since I specialize in creating web sites for small businesses, I have found the following principles to be important to the success of your new web site. These guidelines come from having eight years of experience designing web sites, as well as probably too many hours surfing the web.
- Make it unique - I often compare building web sites to building homes, and I look at myself as a custom home builder. That means I create the site to reflect the image and personality of both you and your business. For example, the Ferndale Repertory Theatre web site features buttons that get lit by a spot light.
- Keep it simple - I firmly believe in keeping a web site simple, both from an aesthetic point of view, and more importantly, from an engineering point of view.
Aesthetically, I want the user to be able to see your message and be able to act on it. No need for flashing text or cheesy animations. White space is good too, just look at Google's home page. Any wonder it became the dominant seach engine when most other search engines have a home page so cluttered it's hard to find the search box?
For reliability, cost, and search engine issues, I try to keep as much of the site in plain HTML. This makes your site easier to index, quicker to load, and easier to bookmark. There are times where programming or databases are needed, but too often I see sites that use a more complex method of accomplishing a task because they can get away with charging the client for it, rather than because it was really necessary.
- Make it compatible - Personally I work on an Apple Macintosh and I use either Mozilla or Safari as my browser. So I am really aware of how many web sites are built that aren't compatible. I know that I leave sites pretty quickly when I can't get them to work with my setup, and I take great care to make sure that the sites I design for my clients don't suffer the same fate. I generally design for 99th percentile. There's always that 1% who are still running a version 2 browser and they can't be helped. But there's no reason you should tell 5-25% of your clients that their business isn't appreciated just because they don't have the same equipment as you do.
Part of the compatibility issue is also making sure the design is flexible. The designer has to realize that on the web there is no control over how the work will be viewed. Monitor size, choice of browser, choice of default fonts and many other issues all affect how the page will render. A good design must be flexible so that it displays well for a broad range of users. It may not be perfect for everyone, but it should be readable. The examples shown below illustrate how this page looks at the same resolution on a Macintosh running Mozilla (left) and on a PC running Internet Explorer 6(right).
Click either screen shot to load the full 800x600 image. Use your browser's back button to come back to this page.
- Make it easy to navigate - This is probably the most import item on this list because once customers find your site, they need to quickly find the information they're after or they will be returning to the search engine to click on your competitor's site. Many of my sites use a left hand menu that has become sort of a standard in web site design. This immediately lets the visitor see what the main topics are, and they can easily jump from section to section on any page of the site. They don't have to remember the trail that got them to where they are and they don't have to make return trips to the home page. For larger sites I often use pull down menus such as those that this site uses, and I also include site map pages to help users and to help search engines index the site. I also include text links at the bottom of pages so users don't have to scroll back up to the top on longer pages. The text links also help users who don't have graphical browsers or choose not to load the images.
- Make it easy to bookmark - Once users find what they are looking for, they often want to bookmark it so that they can return to that point later. By avoiding frames and dynamic pages, I guarantee that when a user bookmarks a page in your site, they will be returned to the exact page that they bookmarked. This is also very important if people want to create links to your content rather than just your home page.
- Make it easy to expand - Publishing on the web is one of the most cost effective ways to get information to your potential and existing customers as well as your business partners. Because of this I often find that a client will start with a five page site and once they see how well it is working they want to add more to it. The designs I use make it easy to expand the site without having to tear it apart and start over. This is one reason I favor the left hand navigation model. Need to add another topic? Easy, just add another button down the side.
- Code by hand - I taught myself HTML when there were no WYSIWYG page layout programs out there. Coming from a programming background, coding HTML by hand was a natural way to do it. Also being a programmer, I have the discipline to create very efficient coding which makes for more stable pages that download quicker.
- Understand graphics - Nothing can ruin a web site faster than poor graphics. There is a real art to creating graphics for the web so that the images download quickly yet preserve enough image quality to be useful and beautiful. There are two main graphic types used on the web, GIFs and JPEGs. Each format has their own strengths and weakness and it is important to choose the correct format for each graphic. You also need to understand how to squeeze the files the right amount so that there is a perfect compromise between image quality and download speed. There are also many color issues present on the web that must be dealt with. My color chart deals with one of them.
 |
The image to the left was saved using the JPG format with quite a bit of compression. The image size is 6.8k which at 28k would take 3 seconds to load.
Below are links to three other versions of this same picture.
|
|
Hi Res JPG
- Saving the picture in the JPG format with no compression caused the file size to swell to 43.4k which would take 16 seconds to download and the quality improvement isn't really noticeable on the web. |
Lo Res JPG
- Saving the picture in the JPG format with the highest compression reduces the file size to 2.9k which would take only 2 seconds to download. But saving that extra second comes at the expense of greatly reduced picture quality. |
256 Color Gif - The GIF compression scheme is better suited for graphics where there are large blocks of the same color. Photographs generally are more random and so they don't compress well as GIFs. This picture saved in the GIF format swelled to 26.7k and the quality is worse than the 6.8k JPG. |
- Keep the search engines in mind - There are three ways people will find your site. First you can tell them the URL, either directly or through your advertising. Second, they may find your site through a link on another site. But for most small businesses, the most important path to your web site is from a search engine. Especially when a site is new, most of your visitors will find it from doing a search in a directory like Yahoo, or a search engine like Google. So it is very important that the site is designed from the start to get the best rankings possible. I follow many industry newsletters and websites and I believe the way to getting good rankings is through careful design and good content. Tricks don't last very long and if the search engines catch you trying to fool them, you may find you've done your site more harm than good.
- Make it affordable - I believe in giving good value for the money spent. Being a small businessman myself, I know how small businesses have to control their costs if they want to be successful. Not only are my rates very affordable, I also know how to get the best value out of many of the freebies that are still out there on the web. There's no point in reinventing the wheel for each client, so I use free public domain scripts whenever possible. Not only are they free, but they are also well tested and bug free.
As an added bonus to my customers whose web sites I host, I do not charge them for small updates that only take a few minutes of my time.
Now that I've shared my principles for good web design, here are some of my Web Design Pet Peeves.
|
