Finally… it took some time, but now the Food Law Consultants website is up and running !

For me, this project stands apart from the rest, as the customer involved itself a lot in the design process, and took immense care in content revision. The customer and I agreed to take the time to make things nice, finished and reviewed thoroughly before going live, instead of working with a fixed deadline in mind.

The graphical design

One of the reasons behind this website is to reflect the modern, innovative edge of the customer, but inside the rather conservative field of legislation, so a balance had to be made between modernity and classicism. While the first page uses (random) images to create impact, the next click takes you to a more quiet atmosphere based on the logo, where the focus becomes the content and text readability, so the website can become a convenient tool of information and communication between the customer and its community of readers.

Interface design

The interface layout was a tough one, as we wanted to use the full available screenspace, while have the scrollable area set to only the content zone, so that the navigation system be at all time available. [click on thumbnail below to see the interface scheme ]

A
This sort of interface makes plain sense, and is obviously full of sound intentions, given the fact that more and more people use large flat screen. 19″ screens have escaped from the graphical designer’s office to be found in secretaries and even home offices nowadays.

While this is easily achieved using frames, it’s commonly accepted now that frames are bad for you, especially in terms of SEO. So i set up to using CSS.

100% height

The technique used here is the one described at the excellent quirksmode website.

CSS overflow:auto

“overflow:auto” styled to an html container, let say, a “div” element, means that if the content inside the div needs more space than available in the container div, scrollbars will be automatically added to the div by the browser. overflow properties can be ‘hidden’ (hides the overflowing content), ‘visible’ (lets the content flow over its container), ‘scroll’ (displays scrollbars (horizontal and vertical) even though the content may not require it), and ‘auto’, which is the one i was after in this particular case. …But. In CSS, there is often a ‘but’. It needs to know the height size of the container. So you can’t just have an automatically stretchable area display scrollbars if its content needs more than available. You have to hardcode its height value. Yet, since you don’t know it for sure (it will be different on a 19″ screen at 1280X1024 resolution, than on a 15″ at 800X600) you’re stuck !

Therefore I bypassed the obstacle with the use of a little bit of javascript to first calculate the needed size, and then assign the calculated height value to the div. I described the technique used and the source code in more details here.