Fota House

Well, I have finally come up with a design I am happy with for Fota House.
It validates with the W3C Markup Validation Service (as XHTML 1.0 Transitional) and the W3C CSS validator.

I have also taken care to make it as accessible as possible, and I have tested the template design in the Lynx viewer

Can't show a preview of the site, have to wait till it goes live but just wanted to share a few thoughts on the design while they were fresh.

I experimented with a completely fluid design but as mentioned before the line length often was just too long. It was hard to read and the nature of the content of the site just meant it didn't look well at all. I also played with completely fixed site but found it hard to settle on an optimum width - 760px width seemed to be a popular one, but among some of the more standard conscious 647px seemed popular. 720px meant that if you had browser sidebars open at 800*600 then horizontal scrolling occurred. But 647px fixed looked a little squashed for the amount and type of content I anticipate being in the Fota site.

Also with fixed width when one increased the font size it would result in only a couple of words fitting accross the content area.
In the end, many, many style sheet designs later I settled on a content area set to 35ems. While this is a 'fixed' size it scales with the users font setting and is roughly the generally accepted ideal line length. (see the previously mentioned article I found while searching on this)

The navigation areas - main navigation and sub navigation are absolutely positioned. The main nav is positioned at the top of the page and the sub nav is a set number of pixels from the top and 35ems from the left so that it is on the right hand side of the main content and it will nudge over if the font size is increased. I placed it on the right hand side because it looked right, it felt right and when I researched it I could not find any argument for placing it on the left hand side. A lot of sites are moving navigation over to the right hand side rather than the more conventional left because it makes more sense to be closer to the scrollbar. According to Nielsen it also prioritises information correctly. This article was interesting in relation to placement of navigation.

I also played with having the site centred on the page or over to the left side. Both methods are used by many popular sites. I initially wanted to be centred, but ended up on the left hand side. Why?
Well, one reason was that by having fixed positions for the navigation I could place the html code for the links at the bottom of the page but display them at the top. Why would I want to do that?
Well, according to W3C "Navigation bars are usually the first thing someone encounters on a page. For users with speech synthesizers, this means having to hear a number of links on every page before reaching the interesting content of a page."

Centring the site on the page doesn't seem viable with the current design. An offset graphic which was important to the design, using padding and an indent looked fine in Firefox but didn't work at all in IE. Also the nav on the right side caused massive problems in IE. I may well revisit this and see if I can come up with a way to centre the site, but for now I am happy with it where it is. Let's see if you agree when it goes live!