New Brittany Gite website design - finally settled on a design (part three)

Those readers with long memories will remember that way back in August I started talking about redesigning our Gite website, then in September I gave an update on progress, and now here we are in October, and I think I've finally concluded on a design that I like.

Well saying "I like" is a bit strong. I think I'd better say instead that I've come up with a design that I'm fairly happy with, works reasonably well, unfortunately doesn't fully do what I wanted, but it meets enough of my criteria to be worth adopting on the site.

And frankly after 3+ months of fiddling I'm getting bored with crafting standalone HTML & CSS so it's time to get on with other things (like improving all the photos on the site to make them larger).

---

Quick recap of what I was trying to do; instead of using tables to structure the main site elements (masthead, navigation bar, centre text and photos down the side), I wanted to adopt a more pure CSS 3 column layout that would enable me to:

• Site navigation to be displayed in a left hand column
• Main text to be positioned in the middle column and variable width so that it auto-expands to full screen width
• Display supporting photos and pictures on the right
• Include the middle column text first in the HTML file (i.e. before the navigation links and photos) so that search engines would give that text priority
• Still look good if the font size was increased or decreased (so size everything in em's rather than px's)
• Had to retain as much of the layout as possible on differing screen dimensions (width/height)
• And it had to print properly

At the end of the last article I thought I was going to find my 'holy grail' with Position Is Everything's 'One True Layout'. Alas this was not to be and in fact I had terrible trouble with the layout, especially with smaller screen sizes when I found that the middle column of text just 'slid underneath' the pictures on the right hand side.

Eventually after much fiddling with the CSS I found the culprit, there was a

overflow: hidden;

clause on the main 'wrapper' DIVision which was intended to remove unnecessary padding at the end of the page, but was causing the pictures to stay in a fixed positition and the middle column text to 'flow underneath' the pictures when the screen width was decreased, rather than for the text to automatically shrink in width and increase in length as I wanted it to do when the screen width became narrower.

Much trial and error I concluded that this layout wasn't going to hack it for me and that the layout wouldn't autosize to fill the screen width. Looking more carefully at PositionIsEverything's boxes demo I realised that all the demos were for fixed width sites and the best I could do was to remove the overflow:hidden clause and then at least the text didn't disappear under the pictures with narrower widths, but instead the pictures dropped down to below the text, which frankly looked awful.
Here's yet another website homepage demo, styled this time using PIE's One True Layout.

It was at this stage that I was seriously thinking about giving up with this whole CSS idea and instead adopting a TABLE based approach or hybrid CSS/TABLE layout.

In one final desperate attempt to find a solution I looked again through the good CSS sites I've used before: A List Apart, Position Is Everything and Webcredible.

Zen Garden: Blood Lust

And on ALA's 'Thinking Outside the Grid' article I found a glimmer of hope with a link to Dave Shea’s Blood Lust, one of the designs he created for the CSS Zen Garden.

CSS Zen Garden is a marvellous site to explore if you're at all interested in the true power and beauty of CSS - there's a standard HTML page with several DIVisions of text, and web designers are invited to submit their own CSS design to reformat the standard page in any which way they can. The only rule is that the HTML must not be modified in any way, all the layout and design must lie in the CSS file. The more creative and unusual the better. Some of the Zen Garden designs are very clever and are worth studying to see their inner workings.

What I liked about Blood Lust was that it appeared to have solved my problem of columns appearing on screen in a sequence that differed from how they were laid out in the underlying HTML source.

So, much studying of Blood Lust's CSS, the standard HTML file, and trying to translate it onto the Gite homepage, I ended up with an almost perfect solution.

Firstly, here's the new sample demo homepage styled using Blood Lust concepts. So how does it measure up - well, it displays everything correctly in both Firefox and IE6, it's scalable for different font sizes, with increasing or reducing screen widths it scales nicely (the centre column just varies in width and the menu bar and pictures always remain visible), and when printed it fits the page properly with no truncation (a common mistake on all too many sites is that bits of the page disappear when you print them).

The one and only thing wrong with this design is that instead of the HTML contents being in the sequence {main text}{navigation bar}{photos} which was my 'holy grail', the contents instead are in the sequence {photos}{main text}{navigation bar} so search engines will "see" the photos and photo captions before they get onto indexing the main site text. It's probably better than the current TABLE-based structure of {navigation bar}{main text}{photos} as at least some relevant text will be read rather than some boring links such as 'Index', 'Getting there', 'The Gite', etc - but it's not quite what I wanted.

Try as I could I've not been able to fix this problem in a way that displays properly in both IE and Firefox. I did get to an alternative Blood Lust based design that meets all the above requirements plus has the DIV's sequenced the way I want in the HTML source (i.e. {main text}{navigation bar}{photos}), and it looks perfect in Firefox .... but it does NOT work in IE6. For reasons best known to Microsoft and its buggy browser, the photos resolutely appear under the main text despite there being a perfectly good space beside the text for them to slot into.

So where to now ? As I said right back at the start of this long diatribe, I've got fedup with all the time that I've spent chasing for that elusive, perfect, CSS layout that does everything I want. I can't find it, or at least the only design I can find doesn't work in IE ... and since 78% of my site visitors over the last month were using IE6, I can't really ignore them !

I think I will therefore go with this final layout I've ended up with. The colour scheme look and feel was inspired by Skidoo Too and the positional design by CSS Zen Garden's Blood Lust. I've some other ideas I want to get onto trying now, most important of which are redesigning the banner masthead and restyling the photos so they stand out more. I'd like to try to get as much of the new design rolled out quickly as I really don't want half of the site looking in one style and half in another - watch this space (or rather watch the Gite Website space!)