Building the Prototypes Part II

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.

Browsers By Operating System
Browser Operating System Number of Visits Percent of Visits
Safari Macintosh 74,379 28.3%
Firefox Windows 65,727 25.0%
Internet Explorer Windows 59,267 22.5%
Firefox Macintosh 32,978 12.5%
Chrome Windows 17,602 6.7%


Browser Number of Visits Percent of Visits
Firefox 99,235 37.7%
Safari 77,646 29.5%
Internet Explorer 59,269 22.5%
Chrome 21,693 8.25%
Opera 4,512 1.7%


Screen Resolution
Screen Resolution Number of Visits Percent of Visits
1280×800 95,875 36.5%
1680×1050 63,672 24.2%
1366×768 26,413 10.0%
14440×900 22,064 8.4%
1024×768 12,611 4.8%

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.


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