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…
