Relaunch of Diary Products
After this site has been using the old, boring, standard Drupal theme for two years, I am now proud to present my own creation: the new Diary Products theme. It uses the phptemplate engine and is a hybrid between table-based and CSS-based layouts as I am not a follower of the pure "Look Ma, No Tables" approach. There are still a few glitches here and there but overall I am quite happy with it.
It all started with an idea for the site's logo a couple of months ago. I simply could not get around designing a suitable page layout until last week when I had the idea of using the "sheet of paper with letterhead" metaphor. This as well as the appropriate use of font sizes and text colors emphasizes the distinction between actual content and meta content (navigation, author info, categories, post date and so on). This distinction, by the way, is in my opinion the biggest usability issue with many CMSes. Developers as well as webmasters often get carried away with decorating content with meta-content until the site is visually overloaded. This might not be a problem with regular users, but it surely overwhelms new visitors.
But the design is not the only thing that changed. The site is now hosted on a new server located at the German Internet hosting provider Hetzner. The server runs with Gentoo Linux. I finally abandoned Apache and switched to LigHTTPD or "Lighty" as insiders call it. Lighty is reasonably stable and very fast although it can not shine at its best with Drupal because 90% of the cycles are consumed by PHP. PHP interfaces LigHTTPD via fast cgi for which I see no performance difference to mod_php and Apache but that's just a hunch.
My biggest issue with LigHTPPD is its lack of support for dynamic, directory specific configuration à la .htaccess in Apache. On the other hand, the .htaccess mechanism has always been problematic regarding security and performance so I am not too sad not having it. I wrote a little Ruby script to work around that. The only drawback is the need to restart the lighttpd demon after a configuration change. Now that lighttpd supports graceful restarts, this can actually be turn out to be a virtue - write a script that continuously monitors the configuration files and automatically restarts lighttpd if necessary and bob's your uncle.
One more note regarding Drupal. As much as I am a friend of Drupal's taxonomy approach, I think that in its current state it is not very usable, at least in a stock Drupal installation. I wanted SEO-friendly URLs, a working bread crumb trail and I didn't want to manually adjust my navigation menu after every taxonomy change. The path, pathauto and taxonomy_menu modules have the potential to take care of these requirements, but just not quite. As you can see on Diary Products, I managed to tweak and patch them into a working solution. More on that in a later article.
02/28/2005: Update - More Changes
Although the look hasn't changed much, the underlying code has. Before, the layout was rather TABLE-based. Now it is more DIV-based. All background images are entirely set from CSS - a technique that makes the code a lot cleaner. On the other hand, the document structure got more complicated due to the many nested DIVs necessary to host all background images.
The motivation for this change is simple: The way tables and DIV's (or should I say block elements) interact in a complex layout is extremely browser-dependent and didn't leave much leeway for future design improvements on Diary Products. This is even more so for block-elements with margins. Internet Explorer doesn't allow block-elements to be "pulled out" of their parent table-cell using negative left or right margins. Also, top and bottom margins of block elements inside table-cells with background behave abnormally under IE.
The only reason why I still use a TABLE (although a very simple one) is that I don't know of any TABLE-less method to center a block element (the content) within the page and at the same time have another block element on either side of it (the side bars). It is possible to center a block element using auto margins and assigning an explicit width. It's also possible to put block-elements next to each other (floating or absolute positioning) but I don't see how these two can be combined.
Hence the current layout contains a table with a single row and three columns. The middle column has no assigned width and the two other columns have a width of 50%. This method centers the middle column and it degenerates nicely if the view port isn't small enough. Floated layouts usually get all messed up if the content is too-big or the view port is too small, e.g. the floats wrap. Absolute or fixed-width layouts look strange at large font sizes. I think my aproach is a good compromise.
The other place where I used a table is for the "torn page" look between teasers. I'll probably talk more about that in another article. Go to the home page and check out what happens to the "tear" if you increase your browser's font size until the content column's width increases. Neat huh?
03/02/2005: Update - Still Bugs in IE
Do the words "three" and "pixel" ring a bell with you? Right! This site's layout suffers from the famous "three pixel bug", too. But in this case it doesn't occur with floats but with simple block elements having negative margins and justified text in them. I wasn't able to re-produce the bug in a more stripped-down layout but if you browe this site using IE6 you will notice a minor dent at the right sight of the mission statement on the homepage below the logo.
And guess what, I have no inclination to patch or hack this bug as it is fixed in IE7 beta 2. Besides, I have now idea how to patch it other than removing the text-align:justify or the negative margins. I could even do so for IE only using conditional comments but at the moment I have no inclination to do so. I tried "assigning layout" but then IE ignored the negative margins.
Don't get me wrong &emdash; I try to make my sites as cross-browser as possible by sticking to standards and avoiding features that are not commonly implemented but I'm not going to spend hours in trying to find a hack for this. Go get yourself a decent browser.
Speaking of hacks, when IE7 comes out, everyone using * html hacks, parent>child hacks and whatnot will need to fix their styles again because IE7 fixed the CSS selectors bugs but not all layout bugs. Lesson learned.