This is a question that probably most people who read this blog have been asking for a while now. In the past few posts we have been discussing how they where built and the updates that have been made to the information architecture. Maybe you have been wanting to tell us that you just want us to show you what the prototypes look like.

Before showing the prototypes there is one more point of discussion that needs to take place (I know you can hardly wait to see the prototypes). The prototypes were built on a local machine and have not been uploaded to a web server. This has been done intensionally to prevent them from getting indexed by a search engine or found accidentally. There is already enough confusion with the current web site and various resources that the libraries uses electronically, so we do not want to make things any more difficult for people than they already are.

Yes we could create a robot.txt file and put it in the top level directory to tell search engines to stay away, but its not fool proof. Only the search engines and people who play nice will abide by the file. To be safe everything is currently being created on a computer not a web server.

Now for the big unveiling of what the prototypes look like.

D Home Page

D Online Resources

A Home Page Example

A Online Resources

The applause can start now. As with everything else that we have done we will show these prototypes to people to gather feedback. After talking to several people we will once again take that information and revise the prototypes to reflect the feedback that we have gathered.

In the last post we concentrated on talking about the HTML and CSS that is used to build a website along with accessibility. These are just two of the main factors that come into play when building a prototype. The next important consideration to consider is the type of devices and browsers that people will be using to view the website.

Computers, Devices and Web Browsers

The first place to start is to determine the computers, devices, and web browsers that people will be using to look at the College Libraries website. A good place to start is to look around campus and determine what computers exist on campus in the libraries, computer labs, and faculty offices across campus. The majority of computers on campus are Macintosh Computers that are running both the Macintosh and Windows XP operating systems. The web browsers that exist on the computers in the libraries and computer labs are:

• Mac Operating System
• Apple Safari 4.0.5 (5531.22.7)
• Mozilla Firefox 3.6.3
• Windows XP
• Internet Explorer 8.0.6001.18702
• Mozilla Firefox 3.6.6

This is just a beginning when it comes to determining which types of devices and web browsers people are using to visit the college libraries website.

One of the first things that, I did upon arriving in Potsdam was to set up a Google Analytics account to track the people who visit the current libraries website. Looking at this data provides us with some very important detailed information about are users when it comes to technology. Listed below are a few tables that show the operating systems, browsers, and screen resolutions of the people that are visiting the College Libraries website.

The most important thing that this data reveals is that people are viewing the College Libraries website using a variety of different web browsers and that their computer monitors are set at several different resolutions. By keeping these things in mind will help us to build a website that will be easy to use on a variety of different computers regardless of the web browser a person has selected to use. When testing the prototype it will need to be viewed using all of these different browsers to make sure the website looks the same regardless of what web browser a person is using.

Conclusion

In building the prototypes the concentration has been on the layout of items, names of links, and accessibility. These are the core building blocks when creating a website regardless of who will be using it and the function that it serves. If these elements cannot be done correctly you will fail before even launching a new website regardless of what it looks like. When creating a website you need to concentrate on creating something that is both accessible and usable by everyone regardless of who they happen to be. This will help make sure the people who represent your target audience can locate the information that they need to accomplish their tasks.

The next step in the process is to test the two prototypes that have been created with five to seven people who represent the target audience. After the prototypes have been tested it will be time to once again incorporate the feedback into what has been created up to this point in time. Once this testing has occurred it will be time to start adjusting the appearance of the website and to start thinking more about the appearance of the website. By building the website using CSS it will be very easy to make changes to the appearance of the website. For example, if the college decided to change its colors from red and white to green and white the color will only have to be changed in the CSS. The strength behind CSS is that you can make a change in one place at will automatically change the appearance of each web page. Instead of having to change the color on one hundred web pages you only have to make a change in one location.

After the prototypes have been tested we will than incorporate the feedback that we receive into them. When the prototypes get tested a second time we will also test them for accessibility. The best way to do this is to ask people who use assistive devices to take a look at the prototypes. Once the prototypes have been looked at by people using assistive devices it will be important to address any problems that occurred. By taking the time to incorporate accessibility into building a new website as discussed in the previous post the changes that will need to be made should be minimal.

If you use an assistive device and would like to test out the prototypes please contact me via email at patterpj at potsdam.edu.

When building the interactive prototypes there are several things that must be considered before writing a single line of HTML. Everything that we have done up to this point in time has been in preparation to build the prototypes. One of the most important elements was to create the wireframe models and to show them to people. This has been a very important step because it gets you to start thinking about how a website will be built before even starting to write the HTML.

HTML and CSS

When building a website you have different standards of XHTML and HTML to select from. In the very beginning of the project, I was thinking of using the XHTML 1.0 The Extensible HyperText Markup Language standard to build the new website for the College Libraries. After doing some reading and exploration it was decided to use the HTML 5

standard because it is backward compatible and I do not want to have to rewrite the website in a few months using this standard. Backwards compatible refers to the ability to use a feature that is available in a newer web browser, but at the same time does not prevent it from working in an older one. In conjunction with using this standard Cascading Style Sheets (CSS) are being used for both the layout and appearance of the website.

While building the prototypes the wireframe models where used as a guide when writing the HTML and CSS. When you take a look at the wireframe model a there are five core boxes that appear. The first one is a rectangle along the top. The next three are vertical columns that appear from left to right. The fifth box appears as a rectangle along the bottom just like the one along the top. This wireframe uses a three column layout because of the three vertical columns that run from the top to the bottom. These rectangles serve as a guide when creating the main layout for the web page.

Each box that appears in the wireframe model has been assigned its own division with an ID attribute that is written in HTML. For example, the HTML for the first rectangle looks like:

<div id="header">

</div>

In CSS you have something called the Box Model that allows you to position elements within a web page. In an HTML web page there are elements that reside inside of other elements. Elements such as a division is shown inside of its own box, allowing you to control the size, location, and appearance of everything that resides inside of it. Each box appears relative to each other. In the example above the first rectangle is a box and has been assigned certain properties that determine its position and appearance.

The CSS for the header division looks like:

#header {
     margin-bottom: 1em
     background-color: rgb(157, 40, 30);
     color: white;
}

The margin-bottom property states that there must be at least 1 em of space that occurs between the bottom of the header division and the next element, which happens to be another division in the prototype. The background-color is the color red that represents one of the SUNY Potsdam colors. The color property states that all text that appears in this division must be the color white. What you end up with are the school colors being used for this division.

Both HTML and CSS are used to layout the rest of the prototype. Using the wireframe models when writing the HTML and CSS makes it easier to create a working prototype because several details have already been considered, such as the location and the size of elements such as the text that will appear in the website. Along with using standards it is important that you are able to write valid code because it helps to insure that the website will appear the same in all browsers and that it will be accessible to people. By using the W3C Markup Validation Service and CSS Validation Service you can make sure that you are using standards.

Accessibility

The next important element that comes into play when building a website is accessibility. A good place to start is to review the Section 508 Standards Guide Subpart B — Technical Standards § 1194.22 Web-based intranet and internet information and applications and the W3C Web Accessibility Initiative. In conjunction with the following guidelines it is important to use standards as discussed earlier. By writing clean and standard based code you can help ensure that that people who use assistive technologies such as Jaws and Zoom Text will be able to use the website that you have created.

Along with using the guidelines created by the W3C there are decisions that we make when writing HTML and CSS that will impact how accessible a website will be. One of the first decisions that needs to made is to determine which standard you are going to use when writing the XHTML/HTML for the document. After making this decision you can start thinking about how you are going to layout the items that are going to appear in the website. A few years ago it was a standard practice to use tables to layout a web site before the introduction of CSS. There is nothing wrong with creating a website using tables; However, I have chosen to use CSS to layout the College Libraries website.

One of the main reasons to layout a website with CSS is because it allows you to more easily separate the content that appears within a website from the markup that is used to display items. When writing the HTML it looks cleaner and is easier to read than when using tables. A few years ago when I started learning to create websites, I used tables to layout content; However, as CSS has developed over time it has eliminated the need to use tables for layout purposes. Learning to use CSS takes time and patience, but it is well worth the effort.

As you start building a website you need to consider the order in which items are going to appear on a website for both visitors who can see and those that cannot. For example, you can build a website in which the navigation appears at the top of the page for sighted viewers; However, it could actually appear at the bottom for visual impaired viewers. When laying out content you want to make sure the name of the website appears at the top, followed by the navigation, than main content, and then any secondary content, such as helpful information or copyright information.

Another important element to include on a website is a link that allows a person to skip to the main content of a web page. This is very helpful for a person that uses a screen reader application, such as Jaws. This will allow them to ignore the navigation on a web page without having to listen to the same links on each and every page. It helps them to get to the information that the need quicker.

You probably have noticed that accessibility is very important thing to consider when creating a website. Only a few things have been discussed as it pertains to the prototypes that have been built. There have been several books and articles written about accessibility and they should be consulted to learn more. A good place to start is to read through the 508 guidelines and the W3C Web Accessibility Initiative discussed earlier. One book that I highly recommend taking a look at is Web Accessibility by Jim Thatcher.

To be continued…