tweaks and titters
So I ended up giving the site a facelift after all. I call it version 1.5, since it still essentially uses the same color scheme, typefaces, and image source material.
There’s still lots to be done under the surface: the contact page is ghastly, there’s some PHP auto thumbnail stuff I haven’t finished, the sidebar is atrocious; the list goes on.
Since I see that none of you are interested in those changes which I have done, I thought I’d spend a moment discussing them.
First and foremost, the site is fluid-width. I’m amazed by how many of the blog sites I visit are fixed-width, and since my metrics are telling me that I get visits from people with monitor widths as great as 1920 pixels, it seems rather unfair on them to have to view a web page that’s just 720 pixels wide or something (can you imagine the side margins they must have?!). I have however slapped both a min- and max-width on my wrapper div, at 768 and 1500 pixels respectively. Hopefully this will keep the side margins on you 1920-pixel guys at more respectable levels, while at the same preventing the lines of text from stretching clear across the Atlantic (although, actually, I personally think they’re getting a tad long even by 1500-pixels, though you can always increase the text size to compensate — more on that in a sec).
The main portion of the blog is about as simple as things get. div#content, where the actual posts are displayed (aka the main column), is set at 65% width, while the sidebar column div is set at 30%. You math geniuses might notice 5% has gone missing — this is a very easy way to create a gutter between the two columns, since using fixed padding on percentage-width columns will break the layout. Block elements within each column are then given their own pixel-based padding. div#content and div#sidebar are floated left and right, respectively, using the so-called Opposing Floats method. This method is very well-suited to fluid width layouts, and is the most bulletproof to browser hiccups and the most efficient in terms of CSS of any approach that I know. If you know an even simpler method, I’d love to hear it. If it breaks in your browser, I’d really, really like to hear from you.
Other tried-and-true CSS methods are in use elsewhere. h1 is knocked off the page using text-indent, and replaced with a background image (my logo) set at an explicit pixel height. If memory serves, this technique was pioneered by Doug Bowman and is one of the cornerstones of CSS design. Unlike last time, the logo is a part of the background image rather than floating on top as a separate PNG with transparency, as I did last time, which was then served only to contemporary browsers that understood the direct descendant selector in CSS; the rest just got plain browser text (because they weren’t going to be able to understand the transparency in the PNG). Since there’s not really any reason to have an independent floating logo over my banner now that the logo is anchored to the left, I’ve gone equal-opportunity by using simple technology that most modern browsers understand: one jpeg image comprising logo and banner that replaces the h1. Of course, in keeping with blog traditions, it’s also an anchor with a display: block rule that will send you to the homepage if you click on it.
As for the ul list comprising my highly-rudimentary navigation bar, I’ve simply given it a position: absolute, and stuck it a few pixels away from the top right of the browser window. Each li element then is rendered with display: inline, some padding to separate, and finally a 1-pixel thick left border to make a simple divider. It’s probably not the most attractive or elegant nav bar you’ve ever seen, but then, it’s probably not going to get much use, either. Given its relative lack of importance in the functionality of the site, I didn’t feel compelled to build an elaborate nav bar into the whole graphical scheme, complete with rollover buttons and the like; I figured simple was better and probably more appropriate.
The header and footer graphic are both 1600 pixels wide, to accomodate the fluid layout when viewed at different screen widths, and they were designed very much to “work” no matter how much of their width was visible.
Another important factor for me when designing a dynamic-layout site like this is ensuring that 1) the layout doesn’t break if the user increases or decreases the text size in his/her browser, and 2) it looks good at any size. I’m really of the opinion that most sites should be designed to be as flexible and adaptable to the end user’s needs as possible. The portability of HTML was one of its original design concepts, and I think flexibility in web design is a good thing. If I’ve done my work properly, hopefully you should be able to increase or decrease the text quite a lot before the layout begins to collapse, if indeed it ever does. (The navigation bar does start to look a little strange at huge text display sizes as it begins to dwarf the logo, though …)
Oh, and if you ever find yourself designing a fluid-width blog one day, do yourself a huge favor and slap an overflow: hidden rule on whatever container your site has for the actual blog posts. Doing so prevents large images and other fixed-size elements included in your posts from potentially wreaking havoc on your layout when visitors with narrow screen resolutions visit (especially when they’re using IE6.0, which does not understand the min-width rule). Browsers need guidance in being told how to contend with wide images that won’t fit in the column width containing them, and my preferred method is the overflow: hidden rule, which simply cuts off any of the image which would push beyond its container’s width.
For this go-round, the CSS is tremendously lean, almost frighteningly so. To choose sturdy simplicity requires lots of confidence, and I’m not very confident. We tend to feel that whipping up complexity around our projects is like safeguarding them against failure, against ridicule, but the best CSS is the CSS that uses as little as possible.
I’m much happier — at the moment — with this design than the last, which I thought was dreadful, and didn’t degrade very gracefully in IE6.0. Also, aesthetically I think this design is a bit better, a bit clearer, a bit roomier, and all that fantasy hoo-hah has been toned down, abstracted, zoomed in, giving the texture and nuance and feel without being as distracting as before.
And a month, two months, from now? I could despise it.
Photographic credits used in this design (same as before): castle elements culled from photos by Mayang Murni Adnin. Knights on horseback (detail) photo by Jeff Gynane. Both of whom own the copyright on their respective photography. Used with permission in both cases.