Blafoolia!, for want of a better title.
Posted by matijs 24/01/2005 at 19h59
People who visit this site more often than once may have noticed that I changed its layout. It took a lot longer than I expected: It's easy to just whip something up that looks nice, but it's much harder to take a thought sketched on a piece of paper and make that happen in CSS. It's harder still if you want to make it work in old browsers.
In addition to the change of layout, I did a redesign of the URLs my site serves.
A new design
The result is much as I originally imagined it: a paper border with navigation links, floating above a paper background with the main text. However, the paper was supposed to be darkish, with a glow coming from underneath the border illuminating the lower sheet.
Based on Simon Cozens' version of the rounded border layout, I
first produced a nice resizing
border layout. Unfortunately, it only works with browsers that support
:before and :after pseudo-elements. Also, I still
had to add the paper look, and I really wanted a two-column layout.
I took a stroll around the css Zen Garden for some inspiration, and found most designs use a fixed-width layout to underlay their columns with an image that provides the borders and decoration (The design called Verdure is an example). So, I decided not to worry about possible 300dpi display technologies of the future, and use a fixed pixel width too.
After some initial fumbling with floats I decided I needed to actually know how they worked instead of doing cargo-cult CSS design. The autistic cuckoo was helpful enough to explain both floats and the different kinds of positioning very clearly.
Possibly the last time I'll do IE hacks
Since I had given up on my Amazing Resizing Frame anyway, I decided that I should make the design look as intended in Internet Explorer as well. After all, about half of you, dear readers, still seem to be using that piece of crap. So, I had to find out:
- What my site looked like in different flavors of IE, and
- How to make it look the way I wanted it to look.
Now I don't have IE running at all, so I had to bug Thomer to send me screen shots from IE 6, and send more screen shots whenever I changed something (I tried using ieCapture, but it seems to be permanently overloaded). Then, I had to bug someone at work who has IE 5.5 running to see what that looked like.
To actually get things to look properly, I made great use of How to hide CSS from browsers, and Position is Everything, a great repository of browser quirks.
Truly permanent links
While checking the validity of my HTML, I came across a tip from W3C about choosing URIs. Now, I don't even want to understand the difference between URIs, URNs and URLs, but it was still very useful. So, now all (user-visible) URIs are truly permanent, and as a bonus, they don't have file type extensions anymore (the ones with extensions are properly redirected), so I can safely serve up my ancient blog archives in the file-format-du-jour when I'm 205 (I mean, it's not like the cure for aging isn't just around the corner).
And when I do really remove stuff, I promise I'll pronounce it gone.
Other notes
To create my background, I took a picture of some nice-looking paper and processed that with the GIMP. Jeffrey Zeldman showed me that it's possible to create a convincing floating paper effect using simple shadows.
Virtuelvis explains rounded corners too. Very nice for putting things in a box. Very much needs a standards-compliant browser.
Blafoolia is a word I made up that Google doesn't know.