Homeowner Protection Office: Web site
Business need
The Homeowner Protection Office provides consumer protection and education to British Columbia’s residential housing industry. Their information needs to be accessible by consumers, housing industry members and government.
The HPO’s web site did not meet the needs of its visitors. Content was poorly organized and difficult to find. Pages were slow to load and did not adapt well to a variety of web browsers and monitor sizes. Fonts were fixed size and small, which were difficult to read for many visitors. And, maintenance was becoming a problem since navigation menus were manually coded into each page.
Alantext solution
I created a conservative design, as per the client’s wishes, using HPO’s corporate colours. All content is organized into logical hierarchical groupings. Once a visitor finds a page with desired information, related content is presented within the same sub-menu.
Visitors can locate content through three methods:
- Hierarchical navigation menu on the left side
- Site Map listing every page on the site
- Search tool
The navigation menu was written in PHP, which runs on the server. Menu links do not exist in the HTML pages, but are all parsed from a single menu file in a hierarchical XML format. This makes it easier to add or move pages, as the client does frequently. Already they have over 300 pages, so having to maintain a menu on each page would have been a nightmare.
With this menu system, we simply edit a single menu file containing all links, and the menu script does the rest. My script automatically highlights the link to the current page, and it hides all sub-links and reveals only those sub-links necessary depending on which page is viewed. So, for example, when you're in the Research & Education section you won’t see any of the sub-links for the Homeowners section.
During PHP parsing of the menu file, attributes are dynamically assigned to the current link and the parent and ancestor links, so that I can target those links to style them differently via CSS. In fact the HPO site displays only a portion of the styling that we can do with this script, because the client decided against some of the visual differentiation.
“The new web site visual design is a dramatic improvement over our old site. It is fresh and modern, but simple so that the focus is the content.
We have a large web site with hundreds of pages and growing. Alan created an elegant and efficient navigation system that helps simplify site navigation for users. It is easy for users but well organized for those who understand something about the subject areas.
Alan’s advanced menu system is all run on the server, and does not rely on browser-based software such as Flash or Javascript which many users disable and others are unable to run. His design makes the site accessible to everyone. He also provided two other methods for users to find what they want on our site: an automatic Site Map; and a site search tool.
He built the site in such a way to make it easy for us to maintain and update it.”
Bob Maling, Chief Operating Officer, Homeowner Protection Office