Like I mentioned earlier, I wasn't too happy with One True Layout layout I had adopted and used on my site for quite a while. Main issues for me were:
- Page clipping when using inline anchors. Obviously very bad, since this site is very big on intra-page anchors.
- Css code used to produce One True Layout is very complex and I don't understand all of it. Take my word for it, not the best position to be in when trying to maintain the site.
So it was time to look for something new. After some window shopping, I finally decided to go with the principles introduced in the article
3 columns fluid layout at
TJK design website relying on Faux Column technique and stylesheet branching to keep things compatible and manageable.
Being anal retentive tinker I am, I couldn't go with the solution as it was, of course. Instead I had to roll up my sleeves and incorporate some changes. Most important of them being:
- My version of the layout is elastic all around, rather than using pixel dimensions as was the case in the TJK Article.
- Also, since I think modular css is the best thing since sliced bread, I divided stylesheets into parts:
- Main stylesheet that contains just layout instructions (that is to say positioning stuff), and not a single instruction to affect formatting (stuff like fonts, colors etc.). There are in fact several layout stylesheets, currently one for properly css-aware browsers and one for less css-savvy7 browsers. Furthermore, there is also separate print stylesheet (@media is extremely handy, btw). Current incarnation of the print layout is not quite what I'd like it to be, mainly because I had to resort to absolute positioning to work. Also, at the moment the design breaks in Internet Explorer.
- Formatting instructions are placed in separate stylesheet(s) that are imported into layout stylesheets. The beauty of this, is that should I want to change the layout part, I don't have to touch formatting part at all. Much more manageable imho.
- Original version uses well known faux column technique to create equal height columns effect. I didn't want to put mostly transparent background images on right column to finalize that effect in case menu column is the tallest, thus my column separator line between main content area and right sidebar does not scale in case the menu column is the tallest.
There are very few changes required for style sheets to make it two column version, which is likely to be the main workhorse on this site. I am also considering employing javaSacript to make it possible to hide/unhide menu column to have more space for main content.
To go on and actually implement the new layout, there are some things that I need to do:
- Some images originally intended to be used on black background need to be adjusted in order for them to look nicer on light background
- Have to publish all pages at once or leave old layout styles as well.
- Verify the impact on legacy pages.