Crown Harbor Homeowner Association

Current Design

The current design elements of the Crown Harbor website include:

• Header 1 in #00304E to match the pinstripe color in the logo

• Header 2 in #0296FF to match the water color in the logo

• Header 3 in #003399 to match the stripe color in the site menu button

• Header 4 in #FF6E00 to match the text color in the logo

The thumbnail pictures are 104 pixels wide and only appear on devices that are wide enough to handle them. The cascading style sheet eliminates them on narrow devices.

This logo was tried, but...

...the prevailing opinion was that it made Crown Harbor appear to have lots adjacent to a golf course instead of water.

Old Website Refactoring Project

Years ago, we considered having the site redesigned by a professional. This project was summed up as: editing 3 HTML files to reference some JavaScript via include statements, converting HTML tables to div tags, and updating a CSS file to make the new div items appear as they do today.

Problem Statement

• The Crown Harbor Homeowner Association website consists of about 120 HTML files. See the site map for a list.
• The files are a combination of HTML and JavaScript (slide show and menu navigation obtained from Dynamic Drive) plus Google Analytics.
• The site was constructed by copy/pasting the JavaScript into all of the HTML files. Ideally the JavaScript would appear in one place, so it is easier to maintain.
• The site has an upper (menu navigation) and lower (page content) sections yet this is not leveraged during site navigation. Ideally the top portion of the page would remain static while only the lower portion would refresh.
• Though the site has a CSS file, the current structure is not conducive to having a mobile version that has different formatting and perhaps a subset of the page content.
• The site uses banner images that are 960 pixels in width. They were originally 1024 pixels. When viewed in portrait mode on an iPad with a width of 768 pixels, even though the page is scaled, a few pixels are chopped on the right. Worse yet text in columns of 960 pixels wide is cut off on the right. To remedy this, the text is included in a separate table that is only 916 pixels wide. This makes the text readable but the banner images still lose a few pixels on the right edge.
• Some of the Crown Harbor residents are senior citizens. A future version of the site could have a UI element that displays the site in a larger font.

Statement of Work

• Refactor the site keeping the JavaScript in only one file. Use includes or other constructs as necessary.
• Use DIV tags so that the upper frame can remain static and only the lower portion refreshes as the site is navigated.
• Though a complete set of site files will be supplied, apply the refactoring to only 3 HTML pages (index.html, ackerman.html, budget.html) in a readable fashion. Supporting pages (e.g. css960.css) can be modified as necessary. Indent the HTML (one space per level is fine) so that the page structure is obvious. This will allow the site owner to use copy/paste on the remaining 40 files to achieve the same effect on the entire site.
• Design the site so a mobile version can be added later.
• Architect the site so it does not load slower (as measured by Fiddler) than it currently does.
• The goal is to have this project completed by Halloween — October 31, 2012.
• This project would be funded out of pocket by an individual homeowner (the site owner), so the goal is to keep costs as low as possible.