1
The Effective School Website
Running head: THE EFFECTIVE SCHOOL WEBSITE
The Effective School Website
Rhoda Wilson, Lisa Millar, Mike Dillon, and Michael Cope
UOP CMP 560
Instructor: Dr. Sally Evans
August 18, 2006
The Effective School Website
Characters in a play each fulfill a role that is directed toward the other players, but most of all toward the audience. Just as the genre of a play will call for subtle or obvious characters, backgrounds, and scripts, a web pagewill also use its characteristics to capture the audience. The use of backgrounds, text, graphics, and animation in a web page may be combined with other characteristics to create the genre best suited to the intended audience. If the audience is looking for drama, comedy, or excitement, then the writer can manipulate these conditions to represent an experience the audience will remember. What are the characteristics of the most effective websites for schools? Are some design components more important than others? In order to address these questions, a design rubric from The Non-Designer’s Web Book was used to critique the effectiveness of the school websites for IrvineHigh School in California, PostvilleCommunitySchools in Iowa, and DunwiddeeElementary School in Wisconsin.
IrvineHigh School
The Irvine High School webpage appeared like it was designed using some of the latest design software.The link for the homepage is and the page was filled with information, links, and drop-down menus that appeared on each sub-page. The variety of links made for easy navigation. Although there are many good aspects of the website, there are several areas where improvement could be made. For instance, the background color for each page is the default gray. In order to make the page more appealing, this color could be changed to one of the complementary colors from the school color palette. In addition, a variety of the link buttons are equipped with drop-down menus but there is little color contrast between the background colors and other features of the page. Since there is a vast amount of information found on each page, the final criticism of the website is that some of the text uses a small font and is difficult to read on the screen. Overall, the IrvineHigh Schoolweb page is very good. A few design flaws could be easily fixed by improving the contrast among different features of the pages, by increasing the font size, and by transferring information to other pages that link to the main page.
Figure 1. Image of homepage for IrvineHigh School.
PostvilleCommunitySchool District
The homepage for the PostvilleCommunitySchool District website can be found at From the homepage, viewers can link to a variety of different pages including the sites for the elementary/middle school and the high school; however, the focus of the critique was on the high school pages. There are several good things about the high school homepage. First, the site contains a wide variety of information about the school, the staff, the events calendar, and the student handbook. The web pages are designed so that there are different pages for each of these different pieces of information. Second, each page downloads quickly. Third, the pages use a background and a color scheme that is generally unified throughout the pages; and the colors that were chosen match the school colors. Fourth, the page that deals with the school handbook has a large amount of information for a reader to scroll through. At the top of the page, the reader is provided with internal links and headings that allow a reader to move directly to the section of the handbook that he or she may want to read. Finally, most of the pages easily fit within the space on the screen without the need for much scrolling. According to Williams and Tollett (2000), web pages—especially the homepage—should be viewable on all computer screens and in all browsers without the need for scrolling sideways or vertically to locate all of the pertinent information. The pages for the PostvilleHigh School website do meet that criterion in most cases.
On the other hand, there are several criticisms of the design for the website. According to Williams and Tollett (2000), examples of poor web design elements include lack of consistent alignment, unclear navigation and pages that are hard to return from, dead links and links that lead to pages that are under construction, paragraphs of text written in all-caps, bold, or italics, and so forth. On many of the high school pages, there are places where text and graphics do not align consistently. For instance, there are several places in the list of staff members and e-mail addresses where the columns move in an out of alignment. On the page dealing with the events calendar, some of the months have tables that are wider than others. On several pages, the navigation makes it easy to get lost in the website. For instance, if a reader leaves the high school page to visit the page about the school calendar, the only navigation link on the page takes the reader back to the district homepage rather than the high school homepage. Another major issue with the web pages for the high school is that much of the information is outdated or organized in a weird fashion. For instance, the link for class registration (which does not work) is labeled for 2004-2005. In addition, many of the pictures of students and staff are of individuals who have either graduated or left the district. Of the pictures that are used, the picture of the building itself is the only picture that is still current. Overall, the website for Postville High School is in need a variety of improvements in order to make a cite that is relevant and effective for students, parents, teachers, and the community.
Figure 2. Image of homepage for PostvilleHigh School.
DunwiddieElementary School
The DunwiddieElementary Schoolwebsite can be located at The website contains a lot of useful information about the school, parent programs, and academic departments. The homepage has a professional looking banner across the top displaying a picture of the school’s mascot as well as text identifying the school and the district. Below the banner is a row of red button-links containing white letters. The buttons are neatly centered on the page and have active mouse rollovers leading to more drop-down menus. The web design is fairly simple and straightforward; however, there are some design issues that could be addressed.
First, the background color is white and much of the emphasized lettering is written in white in front of red boxes. Although the red and white combination of background and text initially shows good contrast, this color combination eventually leads to confusion between items that are active links and those that are headings. Both items have the same rectangular shape, color, and text style, but a viewer may be tempted to click on an inactive title bar. A second issue is that a viewer may consider some information to be redundant. For example, a staff link is located next to a department link. When the staff link is clicked, 39 staff members are listed and each name is a hyperlink. When the department button is clicked, 14 different department links appear and these links may lead to as little as one or two names. All of this information could have been contained on one page with hyperlinks so that the viewer could see everything at a glance. Finally, the pictures on the Web page have alt labels, but those labels are numbers rather than a description of the image. Although the numbers may be helpful to the webmaster, an outside viewer, a person choosing not to view the images, or a disabled individual may not find the alt labels to be useful.
Figure 3. Image of homepage of DunwiddieElementary School.
Summary
Each of the three websitescritiqued here has its strengths as well as areas for improvement. Many of the strengths and flaws simply result from the choices made by the web page designer; but the technical aspects of web page design are ultimately open to interpretation by those in charge. Important components to each of these web pages are the ease of navigation from page to page, the organization or placement of links, graphics, and text, and the proper use of color and contrast. However, a variety of items including color contrast, font size, current information, consistent themes and navigation stylesneed to be addressed to avoid the pitfall of an ineffective website. In the end, an effective school website has strengths that fit the needs of the audience and make it useful for use in school, at home, and in the community.
References
DunwiddieElementary School. (2006). Home. Retrieved August 3, 2006, from
IrvingHigh School. (2005). Home. Retrieved August 2, 2006, from
PostvilleCommunitySchool District. (2003). PostvilleHigh School. Retrieved August 3, 2006, from
Williams, R., & Tollett, J. (2000). The Non-Designer's Web Book. Upper Saddle River, NJ: Pearson Education.
Appendix
Rubric for Website Analysis - The Non-Designer's Web BookIrvineHS / Postville k12 / Dunwiddie E / Main Category / Bullet / Subcategory
OK / Background
X / ok / ok / gray-default background color
ok / ok / x / hard to read combination of text and background
ok / ok / ok / colors
ok / ok / ok / busy
OK / OK / Text
ok / ok / ok / crowded against the left edge
ok / x / ok / stretched across the page
ok / ok / ok / centered type above left body copy
ok / ok / ok / paragraph
ok / ok / ok / in all caps
ok / ok / ok / in all bold
ok / ok / ok / in all italics
ok / ok / ok / combo
ok / ok / ok / underlined text that is NOT a link
X / ok / X / too small to read
OK / ok / OK / Links / default blue
ok / ok / ok / blue link borders around graphics
ok / ok / ok / not clear where they will take you
ok / X / ok / distracters in body copy
ok / X / ok / dead
ok / ok / X / not underlined
OK / ok / OK / Graphics / too large with long download
ok / x / ok / meaningless
ok / ok / ok / useless
ok / ok / ok / thumbnails and full-sized images nearly the same
ok / ok / ok / with "halos"
ok / X / ok / no "alt" labels
X / ok / ok / missing, with no labels
ok / ok / ok / do not fit on the screen
OK / x / OK / Tables / borders in the tables
ok / ok / ok / used as design elements
OK / ok / OK / Blinking / anything
ok / ok / ok / text
ok / ok / ok / multiple things that blink
ok / ok / ok / rainbow rules
ok / ok / ok / blinking
ok / ok / ok / animated
OK / ok / OK / Animation
ok / x / ok / under construction sign
ok / ok / ok / animated
ok / ok / ok / little men
ok / ok / ok / email
ok / ok / ok / that never stops
ok / ok / ok / multiple
OK / ok / OK / Junk / counters
ok / ok / ok / advertising
ok / ok / ok / sideways scroll
ok / ok / ok / many little pix on the first page that are meaningless
OK / ok / OK / Navigation
X / ok / ok / unclear or complex
ok / ok / ok / frames
ok / ok / X / too many
ok / ok / ok / complicated
ok / ok / ok / scroll bars
ok / ok / ok / narrow
ok / X / ok / orphan pages
ok / ok / ok / useless unidentified pages
OK / ok / OK / General design
ok / ok / ok / home page too large for standard screen
ok / ok / ok / focal point
ok / ok / ok / none
ok / ok / ok / too many
ok / ok / ok / only navigation buttons
ok / ok / ok / large
ok / X / ok / dorky
ok / ok / ok / cluttered
ok / X / ok / not much alignment
ok / ok / X / lack of contrast
ok / ok / ok / not compatible with many browsers
OK meets standard
X needs inmprovement