implementation
completion
In three clear steps the site has been created, refined and completed. Below is a snapshot of the finished home page.
The finished website can been visited here.
new features
As well as making the refinements specified by the end-users, I decided to go the extra mile and implement a couple new features to improve the functionality of the site even more.
display controls
This new feature was designed primarily for visually impaired users, but is available to all visitors.
This type of feature is known as a style sheet switcher. Some browsers allow the user to switch style sheets via a menu but most do not. Even in cases where site visitors use a browser that does allow style sheet switching, those users may not be aware of the functionality. So for these reasons, I have offered the switching functionality to users on an actual part of the site itself (the accessibility page).
I implemented this by making use of a technique described in an article written by Paul Sowden for A List Apart. This method uses JavaScript to switch between style sheets, and works in tandem with the browser switching technique so that visitors can use either method to switch style sheets.
The PSD web site uses code based on this third-party JavaScript function. I made several significant changes to the code so to adopt a system of choosing from two sets (classes) of mutually exclusive style sheets instead of the usual "default plus one selectable alternate style sheet".
The display controls have been split up into two different classes. The first class instructs the browser on the style and layout of the site and the second controls the size of the text. Above, to the right is a snapshot of the feature. There you can clearly see the two different sets. The JavaScript function writes a Cookie to the client's system purely to remember what style sheets are currently active. This also means that the XHTML in the "head" of page has been adjusted.
This feature is a definite improvement.
client-side form validation
This was implemented to ensure that visitors making use of the contact form on the 'contact us' page complete certain fields. After all, if they request that PSD contact them, but don't leave a valid email address or telephone number, none of the partners will be able to help them.
Using one of Dreamweaver's built-in Behaviours I added simple JavaScript validation to the form. The image above shows the error message which appears if no text is present when the form is submitted. To make the XHTML less cluttered I moved the JavaScript that was generated by Dreamweaver to the same file (functions.js) that contains the Style Switcher function.
I then sent the final version of web site to the partners to make sure that it met all their requirements, it did.
Click next to see how the final version was tested...