Jessica Milcetich

Documentation for ISMN 6636 web design project

Site URL: www.auburn.edu/~jzm0068/index.html

I chose to redesign a portion of the website of the Capital Alumni Network, a

nonprofit group in Washington, D.C., where I serve as one of the commissioners. Our
current site is functional, but the layout and design are dated, and theres no
consistency in where people can expect to find similar information from page to
page. Im hoping to use the site I designed for this project as a prototype to show
the other commissioners and organization chairs as a model of how we could
potentially redesign the entire site to make it more user-friendly and give it a more
modern look and feel.
All of the images and text used in my redesign are property of the organization, so I
have the proper rights to use them. The only exception to this is the photo I used as
a pop-up image on the Golf page. In addition to making mention of that here, I also
made a note of that with a comment in the HTML file.
The remainder of this document will walk through each of the requirements of the
project and identify where on the site I implemented each of them.
1. Website should have around 10 pages 6 minimum, 12 maximum
a. My website has 8 pages. The homepage, a sports registration form, a
page about the annual golf tournament and a page for each of the
major sports league.
2. Each of the pages should have a similar style.
a. I used an external stylesheet called can-styles.css to set the style
across the website. This style sheet addresses elements that appear
across all webpages like the size of the logo, the font of the header
text, the look and feel of the navigation bar and the look and feel of
the footer.
3. Please see below for W3C validation documentation.
4. Each page should have a meaningful title.
a. Each page on the site uses the title tag in the header to give the page
an appropriate title. Pages for the sports leagues are consistently titled
CAN [Sport]. The homepage bears the name Capital Alumni
Network while the sports registration form is also titled descriptively.
5. Consistent navigation.
a. The navigation bar and logo appear in the exact same spot across all of
the pages of the site. No matter where a user is, he or she will always
be able to get from page to page and easily back to the homepage by
clicking on the logo or the main heading Capital Alumni Network
Sports.
6. Stylesheets.
a. My one external stylesheet is can-styles.css. Several other pages have
embedded style sheets to address the specific needs of that page. For

example, the Golf page has an embedded style sheet to allow the popup image to function. The sports league pages also contain various
embedded style sheets to control the Whats on this page box that
helps users navigate the content on those pages. Inline CSS also
appears on several pages. It appears on the Basketball page in line 76
of the code to position the image to the right of the page. It also
appears in line 78 on that page to style the font for the photos
caption. Inline CSS style also appears on line 59 of the homepage code
to position the location of the video to the right of the page. Inline CSS
style also appears on line 59 of the homepage code to position the
location of the video to the right of the page.
7. Pages are all organized in good structure.
8. <div> tag
a. I used the <div> tag throughout the entire website to chunk sections
of information. The header and footer that appear across all of the
pages use the div tag to group information. All of the sports league
pages use the <div> tag to group each of the main chunks of
information: important dates, rules, locations, etc. Additionally, the
homepage uses the <div> tag for the video section.
9. All of the pages on the site are easy to read and navigate. I used a white
background with black body text and navy blue heading text to ensure easy
readability.
10.Minimum of six images.
a. This site makes use of many images. There is the logo on all the pages.
Each of the five major sports league pages feature a photo of the
league champions. The soccer page includes two images showing
both of the winning teams. The small arrows used in the back to top
links are images that appear on all of the sports league pages. The
softball page uses an image of the softball fields as an image map. The
golf page features a pop-up image of the golf course.
11.Tables.
a. I used tables throughout the site though only one piece of information
is actually visually displayed as a table. That table is on the homepage
(code starts at line 65) and includes the major information for each of
the leagues the sport, the months of the regular season and the
month of the end of season tournament. This information lent itself
well to being displayed in a table. The other major use of tables is on
the pages for each of the sports leagues and it was used to create the
whats on this page box. The code is similar across the pages, and on
the volleyball page, starts on line 59. The table let me easily structure
the content in a visually appealing and useful format.
12.All pages have <meta> keywords and descriptions to help make the pages
more findable. Each page has a description and keywords that match the
content of the specific page.
13.Image map.
a. The image map is on the softball page, under the field locations
section. Because its not easy to describe the location of our fields, this

section lent itself well to an image map, where people can click on
each numbered field and be taken to a Google Map view of where
exactly the field is located.
14.Pop-up image.
a. The pop-up image appears on the golf page. When a user hovers over
the name of the golf course where the tournament is held, an image of
one of the greens pops up to give users a sense of what the course
looks like and perhaps entice them to sign up for the tournament.
15.Multimedia.
a. A video that features short interviews with CAN members appears on
the homepage. This is the perfect way to give potential new members
an introduction to our intramural sports league. Plus it also adds a bit
of spice to the homepage, which is otherwise rather straightforward
and business focused.
16.Form.
a. The form has a separate page all to itself the sports registration form.
This form, which is linked to from the homepage, collects all the major
information needed from someone interested in joining a league. It lets
them tell us exactly what sports theyre interested in playing and
provides us with their contact information so we can get them signed
up.
17.Javascript
a. Javascript is used on every page in the footer to let users know when
the information was last updated. Since the sports leagues operate
year-round, its important for users to know they are looking at up to
date information.

W3C Validation: