New Brittany Gite website design - still coming soon (part two)

Following on from my blog entry earlier in the month about changing the website design for our Brittany Gite, I've been carrying on trying to find the best HTML and CSS way to have a three column site layout with:

• Website navigation on the left
• Main text in the middle column
• Supporting photos and pictures on the right

As I've already described I didn't want to use fixed width tables any more, I wanted to do the layout in a purely CSS manner, and I wanted the middle column text to appear first in the HTML file (i.e. before the navigation links and photos) so that search engines would give priority to that text.

It appears that this site design concept is somewhat of a 'holy grail' and there's several good attempts to solve just this problem out there....

First up I looked at the excellent website resource A List Apart who I've used in the past to help me write a CSS print stylesheet so that pages don't get truncated when printed.

A List Apart's most recent attempt to solve the 3 column layout problem's aptly called 'in search of the holy grail'. It's fairly simple in approach with DIV's for each of the navigation, text and picture columns; left and right padding to the centre text column in the CSS script (to leave space for the navigation and picture columns on either side); and then the three DIV's are positioned beside each other by using negative margins.

At first glance this appeared to work as required but as I tested it more I started to find problems; especially bad was if the browser window was resized bits of the site disappeared and reappeared, seemingly at random! Reading the comments and suggestions that other readers had put against ALA's article and after a lot of fiddling about with their suggestions I was able to fix most of the issues (in particular the resizing one), but unfortunately not all of them.

The final demo version of our homepage restyled using A List Apart's 3 column approach works OK in both IE6 and Firefox 1.5 for screen width's greater than 600, but for narrower screen sizes the navigation menu and pictures disappear off the edge of the screen (so bit of a problem that you can't navigate around the site!) and for reasons I can't explain (or fix despite lots of trying), IE doesn't always correctly colour the navigation menu bars, looking a bit naff. Other ALA readers have reported similar problems with background images so I guess it's IE bugs that are the root cause.

So after a week or so of trying ALA's approach I gave up and looked for another solution ... and found plenty of links to other sites trying to find the same holy grail mentioned in the discussion board for ALA's Holy Grail article.

One I haven't tried yet is Position is everything's 'Any Order Columns' design which at first glance seems to be very similar to A List Apart's Holy Grail. Maybe I will take the time to try it out, especially as the CSS seems to be simple (which gets my vote!).

The layout approach I've spent most of my time trying out (probably over 2 weeks on and off) is Skidoo Too, an adaptation of the existing skidoo layout. Here again is a test Gite website homepage, restyled using the skidoo layout.

What I really like about the Skidoo layout is the clean layout and simple colour scheme. After a few iterations of background colours and fonts I think I've ended up with a much easier to read site design that's less "cramped" with a larger font size and more white space between things.

The website navigation has a two level menu hierarchy with main sections (such as 'The Gite', 'Nearby attractions', 'Travel options', 'Rental availability', etc), and for some of these they're sub-divided into second level sub-pages (so 'The Gite' section has pages within it for 'Garden', 'Lounge', 'Bedrooms' and 'Kitchen').

Currently the site design uses a bulleted list for the left hand side navigation bar so that I could put circular bullets before the second level menu items (e.g. the sub-page about the Kitchen in our Gite within the Gite section). Getting the bullets to appear only on second level menu items and not the first took a lot of CSS fiddling (including negative indentation and the star-HTML hack) before it displayed properly in different browsers, but these CSS hacks will not work in Internet Explorer 7 without a re-write. So while I was trying out the Skidoo Too layout I decided to try simplify the approach from a combination of colours and bullets to just using different colours to distinguish navigation position within the site.

The new simpler navigation design has pale green level 1 menu items that turn dark green when you're viewing a main (level 1) page, and white sub-section (level 2) menu items that turn pale grey when you're looking at a sub-page. Demonstrations of how the menu now would look when viewing main site pages or sub-pages are also on the test Skidoo Too homepage.

The Skidoo Too CSS has lots of comments in it as to what each different element does and as I've said the resultant page looks a lot cleaner and easier to read. It also displays properly with a variety of different screen sizes in both Internet Explorer and Firefox (even with narrow screen sizes nothing disappears off the side and it's still readable, unlike ALA). The only concern I have with this template is that it uses 6 nested DIV's in the HTML to get everything to work properly. To my mind this is far too many, it makes the HTML hard to read and equally hard to edit and increases the chance of inadvertently breaking the site when making changes.

So right now I'm a bit undecided. I've some more changes I've been trialling to the banner 'masthead' at the top of the page, and maybe I'll test out Position is everything's 3 column design - wait for part three to see if I finally make a decision!

Meanwhile I'd be interested in what other people think about the potential new (Skidoo Too) design and whether it looks OK in their browsers.