JPG & CSS Magic: A 41' Carver Yacht pops out of the page in an astonishing and unique vertical design. Page text "flows" around the boat, like water.

When taking on such a large, multi-faceted and ground-breaking project, it's important to remain focused on the larger picture and have a good line of communication with the client. Telephone, email and instant messaging were all utilized during initial discussions, where we conceptualized the final product and prioritized goals. Once we had a good understanding of what the client wanted, our first step was to show them what an integrated, b2evolution-powered, portal site might look like. They gave us free license for design, only stipulating the site colors (black and gold) and sending us a link to On the River, saying, "We want something like this".

Initially, we were concerned that black and gold colors would limit our ability to convey the concept of "water", for obvious reasons. However, we were up to the task and think we've succeeded, on several different levels. We wanted to improve upon their expected "target", presenting a page that is sexy, clean, intuitive and sleek.

Some time ago, we had spotted an open source web template called "Greenery", designed by Pat Heard. So many of web pages employ a horizontal banner image, it was refreshing to see this vertical one. We thought it an excellent design element for the Good Boating site, but we much prefer "liquid designs", where the site "flows" to fill the screen. We believe that the liquidity maximizes page real estate, even though it creates more design challenges.

We couldn't help ourselves and had a bit of fun with the boating image, which was selected because for it's gold tonal qualities, vertical format and relevancy to our client (the boat in the photo is manufactured by Carver, one of the 3 major brands of new boats they sell). By hand editing the image, we were able to provide a three dimensional quality, making it really "pop" out of the page. This further adds to the intrigue of the front page. In addition, we employed some creative CSS techniques, making the page text "flow" around the protruding hull, as the page is resized. This adds an illusion of "flowing water". The sky was added as a separate element and digitally manipulated, so that it expands as the browser window expands.

All-in-all, we were very pleased with the simple elegance and stunning appeal of this basic, liquid page design.

Easy Navigation: CSS hover and text links are used for main navigation, while an AstonishMe! custom javascript creates collapsible navigational buttons. Navigation is intuitive, organizes clutter & the javascript degrades nicely.

Our clients iterated, on a number of occasions, that it was important that the site be easy to navigate. One of the problems we noticed with the target site was that the navigational list was long and became difficult to read. In addition, it is anticipated that Good Boating will have many more links than those presented, only compounding the issue.

The solution, was so present the important navigational links on the front page and then categorize the departmental links, using javascript to present them via a shorter, expandable /collapsible list. For most visitors, this will present an intuitive, cleanly designed, navigational interface. The code is cross browser compatible (MSIE, Opera & FireFox tested) and degrades to a simple list, if a visitor has javascripting disabled. This is in keeping with our company belief that javascripting, since it runs a chance of "not working", should used responsibly.

Javascript should enhance a visitors experience, never degrade it.