Portfolio

Nashua High School South Guidance

Nashua High School South Guidance web site is used by many students and faculty members every day. Unfortunately this great resource of information has grown uncontrollably creating a haphazard navigation and making it difficult to maintain.

Challenge: Confusing Navigation

The web site´s sporadic growth has twisted and tangled the navigation so much that sometimes even the most obvious things were difficult to find.

Solution: Focus on the client

In order to make navigation as easy as possible, the primary audience — the students were interviewed. After asking questions on how the guidance navigation might be improved students were then given note cards which had the main level navigation titles written on them. They were asked to organize the note cards into a navigation that they thought would be the best to navigate. A recurring navigational pattern was observed from the study. In the end I resolved confusing navigation links and combined everything into one final product.

Challenge: Difficulty Finding Specific Information

The original web site tried hard to fit in with its template. Individual pages were divided into frames which displayed the content. Unfortunately the template was crawling with missing pages. The frames themselves made it difficult to view content because they were small and fixed-size making the user scroll too often regardless of the user´s screen size.

Solution: New Layout

The new layout adhered to the same great philosophy, only the code and design were changed to correct the problems and reinforce the strong points. By getting rid of frames and making the layout liquid, more information could be displayed on the user´s screen. Links were also corrected.

Challenge: Redundant, outdated code

Redundant and ancient code plagued the original site making pages slow to load, difficult to maintain, and costly to display. Tips for Parents of High Students page is a good example of such misuse. Below is an example of the code it took to display a simple phrase: ~~ # 3 Support the Pathway to College*~~

<div style=′mso-border-top-alt: solid windowtext .5pt; border-left: medium none; 
border-right: medium none; border-top: 1.0pt solid windowtext; border-bottom: medium none;
padding-left: 0in; padding-right: 0in; padding-top: 1.0pt; padding-bottom: 0in′>
<p class=′MsoNormal′ align=′center′ style=′text-align: center; 
border: medium none; padding: 0in′>
<b><span style=′font-family: Bodoni MT Black′>~~ # 3 Support the Pathway to College*~~</span></b></p>
<p class=′MsoNormal′ style=′border: medium none; padding: 0in′><b>
<span style=′font-size: 8.0pt; font-family: Bodoni MT Black′> </span></b></p>
<p class=′MsoNormal′ style=′border: medium none; padding: 0in′>

Such code costs 688 bytes for the user to load. Multiply that by several elements which are styled that way and you would arrive to 6 kilobytes which means additional seconds of loading for the user and additional bandwidth for the server to load. And what if this page was visited every time just like the home page of guidance?

Solution: Web Standards, CSS

With the help of CSS the display of information was outsourced to one file. Therefore only clean, fast loading, easy to maintain code remained.

<h2>Support the Pathway to College</h2>

Yes I admit I removed the ~,#,3, and * but this did not lower the actual appearance of the phrase. In addition I used web standards to make the code compliant and therefore easy to maintain. I mean you have to agree that the result (which by the way amounts to only 39 bytes) is easier to maintain than the original example.

Visit Site

Copyright © 2005 Dan Shilov