INTRODUCTION

A website is similar to building an addition to your home. If you thoroughly plan your project and anticipate the possible obstacles, you can simplify your task and get great results. Like any home improvement project, there are procedures and rules that you must follow, or at least consider, if you want a successful project. In this lecture, we will be reviewing the procedures and thought processes of developing a successful website.

If we think of our website as a home improvement project, we must first consider what the purpose and function of the website will be. Let’s imagine that we are building an addition to our home. We would consider the following: how much space do we have to work with, how many people will be occupying that space, and how many rooms will we need to build to accommodate the people occupying the space. When we can answer these simple questions, it will be easier for us to determine a sound strategy to complete the project. In web design we must consider the function of the website and the people who will use the website. Budget will also be an initial consideration, however we will discuss that later.

USABILITY

Home improvement usability is the first consideration of our project. We can determine usability by answering our previous questions. We’ve already determined that we are building an addition to our home. The question is who will we be using the new rooms and how much space do we need? Suppose we were building two extra rooms to accommodate our parents. Since our parents are older, we may plan our design without stairs or maybe a ramp for easier access. What if we were going to build an addition to our home to accommodate a small family? We may need to build more rooms and our design could have a second level to make use of more space. What if we were building an addition that included both young and old people. We may need to use a little of both solutions in order to please all of our occupants. Web design is very similar. When building a website we must consider the audience. Assuming that most of you are in the library system you must consider “the lowest common denominator”. Which simply means that ninety-nine percent of your websites will be similar to the third scenario given earlier. You will have to consider handicapped users, children and teenagers, young adults, web savvy individuals, web illiterate individuals, geographic location, and technology.

TECHNOLOGY IS ALWAYS CHANGING

The Internet is a fairly new work in progress. The technology is constantly changing and progressing. At first this may seem like a good thing, however this may be the single most difficult and frustrating aspect of web design and development. The reason I say this is because everyone does not keep up with the latest technological changes. Therefore older browsers usually do not support newer technology. In laymen terms, if you use the latest technology, you run the risk of not accommodating your entire audience. Because we will be building information-based web sites, we need to consider download times. Once we we’ve contemplated the website’s usability, the rest of the project should fall into place.

DEVELOPING A BLUEPRINT

Now that we know the size and function of our project, our next step is to develop a blueprint. The web version of a blueprint is a sitemap. A sitemap allows us to visually compose groups of information and establish spatial relationships between them. There is some robust sitemap software on the market, however we can easily use Microsoft Word’s flowchart toolbar to create a sitemap. If you do not have Microsoft Word, you can simply your sitemap. Below is an example of a sitemap I created. This sitemap was created for my personal website, your sitemaps will probably be much larger. From this example, we can see that the homepage is the main page and everything branches off of it. I placed the Contact Info and Resume pages on the same level as the homepage because these links will be on every page in the entire website. I broke my website up into three sections. Inside those sections, I have subsections. My sitemap made it easier for me to set up the navigation for my entire website.

BRANDING

We are at the point were we can consider how our website will look and feel. This step is similar to choosing the type of paint, moldings, and accessories we will use in our new rooms. Will our place be more Modern, Post modern, Victorian, new age, etc… This is where branding comes into play. Of course branding has no relevance in home improvement, however it is extremely important in web design. If you don’t know what branding is, I can guarantee you’ve been affected by it. Think about big corporations like Nike, McDonalds and Apple Macintosh. They have some of the most recognizable brands today. So recognizable that we only need to see their logo or read their tagline without having the name spelled out for us. “Just Do it”, the swoosh symbol, the Golden arches, and the apple with a bite in it. These visual symbols reinforce an idea about these products. We have learned to trust these symbols and what they represent. Of course we will not be developing highly recognizable brands like our corporate friends, however we can use some of their principles.

Most of the library systems already have print materials such as newsletters, official letterheads, and advertisements. So we do not have to look far to find out the brand identity. It’s imperative that you pay close attention to detail when determining your brand identity. First lets start with fonts. What is the font face used in the body copy of your newsletter? Is it Times New Roman? Is it Arial? Is it Univers? Notice how the fonts changed in look and feel. Times New Roman is more elegant, Arial is more contemporary and Univers stands out. If you are not sure of the font face you can always determine the font family. Is it a serif font like Times New Roman, Garamond, or Caslon? Or is it a sans serif font like Arial, Verdana and Futura. Did you notice the difference? Serif fonts have handles on each letter and sans serif fonts do not.

Another important aspect of branding is color and imagery. Setting up a standard color palette is important. We can use color to reinforce navigation and help organize the importance of information.. Look at the following example, look how the Subtitle is in Dark blue, the links are in light blue and the illuminated link is in light gray.

These colors were chosen specifically to emphasize the different types of information. Notice how the non-linked body copy is dark blue and un-bolded. As long as we maintain this paradigm throughout the entire website, our users will subconsciously know exactly where to find the information they need with little to no confusion. It also looks good and clean.

Pictures can also reinforce our brand identity and help spruce up our website. However they are not necessary. Keep in mind that pictures add to download time and most of the time they aren’t free. The Clags site shown above does not have any pictures in the entire website but it is still a well designed website. I only use pictures when necessary.

BUILDING A PROTOTYPE

We now have our usability information, blueprint and design information. The next logical step is to build a prototype. It would be superfluous to build a scale model for a home improvement project, however it’s imperative to build a template in web design. As mentioned earlier, the Internet is constantly changing and evolving. Since most people do not keep up with the latest technology, we have to approach the web development with a one size fits all mentality. The problem with this approach is newer technology is seldom backwards compatible and older technology is usually limited and sometimes obsolete. Technology such as DHTML and Cascading Style Sheets were not introduced until version 4 browsers were released, and they will not function in version 3 browsers. Below is an example of how DHTML can be used:

Take a look at the News link. When you hover over that link a pop-up menu appears with more links. I’m sure at some point in your web surfing days you’ve come across this type of navigation. It’s extremely useful, however it’s not supported in earlier version 3 browsers. We must also keep in mind that there are two commonly used browser types on the Internet: Netscape and Internet Explorer. Both browsers render pages slightly different which can be problematic. Also, both browsers rarely support the same technology. Which means your website may work properly in one browser and crash in the other.

Another potential problem is that there are two main operating systems used on the Internet. They are Windows and Macintosh. Each operating system renders page differently as well. Your website may work properly in Netscape 4.7 on a PC, however it may generate errors in Netscape 4.7 on a Mac. Imagine if you built your entire website and discovered that it did not work in all of your target browsers, you would have to fix hundreds of pages instead of fixing one template. Therefore it’s a very good idea to build a template and test it in as many different browsers as possible. Since we are developing public service websites it’s a good idea to keep your site as simple and clean as possible.

Once we’ve tested our template, we can build out the rest of our site. This is where budget comes into play. If he had a lot of money, we could have our new rooms built for us by a contractor in a short amount of time. We may be in a situation where we cannot afford a contractor, however we can afford fancy expensive power tools. Or we may find ourselves in a situation where we cannot afford fancy power tools but we do have the traditional hammer, nails and handsaw. The last situation is the least desirable situation, however it’s a reality for most of us. Because of budget constraints we may not be able to afford a professional web designer, or buy one of the industry standard web development applications like Dreamweaver (http://www.macromedia.com), FrontPage (http://www.microsoft.com), or GoLive (http://www.adobe.com).

There is also plenty of free software to download from the Internet. Go to Download.com to find a web editor suitable for you. (http://www.download.com). Keep in mind that all editors have a learning curve and may take some time to master. The benefits are tremendous. Once we’ve settled on an editor, we can build our website and test it to make sure it works properly.

CLOSING

In closing, keep in mind that no matter how much we plan and anticipate any possible obstacles, we will always run into unexpected problems. That is just the nature of the beast. By taking the steps outlined above, we minimize the amount of potential problems that may arise and we also come closer to making our final product more professional.