The 2004 Redesign
In 2004, I decided to redesign this site completely. For over eight years it had been growing through various versions of HTML, so I wanted to bring in more order and remake it as an accessible, XHTML 1.0 Transitional site with CSS liquid layouts and cross-browser compatibility. I narrowed column widths and switched to sans-serif fonts for greater readability. I added a DHTML menu for primary navigation, and side columns for secondary navigation and other pages of interest.
While most personal sites have a single look throughout, The Wild Things of God has always had a different look for each of its main sections, as well as the index pages to those sections. I kept this by developing different stylesheets to be the default style for each section. In addition, I added a stylesheet switcher so that the user can choose a high-contrast, plain style if desired. Unlike most stylesheet switchers, this one does not set a cookie. This allows the different sections to present their individual default stylesheets.
I'm a fan of liquid layouts. While CSS liquid layouts are more difficult to implement than frozen-pixel or em-based layouts or table-based designs, the extra effort is well worth it. All the pages of this site use a single layout, with several variations. The “Golden Film” style and the “Sunflower” style (as on this page) have the secondary navigation on the left, while the other styles have it on the right. The “Papyrus” style on the quotations pages uses absolute positioning, whereas the other stylesheets use floated columns.
Not all of the stylesheets validate. I use translucent effects on many of these styles, and when the background is light enough, I just use a GIF with alternating transparent and white pixels. On other styles, this doesn't work. For these, I use PNGs for the browsers that can handle them, and for Internet Explorer, I use IE's alpha opacity filter, although it causes a validation error.
I believe in validation, but not as an end in itself. The main point of validating is to avoid errors in coding. Using IE's proprietary CSS here is not a coding error, but the deliberate, judicious use of a non-W3C option. I consider it good CSS, although it's not valid by the W3C's definition.
All text on the site is scalable, including the menus, even in Internet Explorer 6. To further ensure scalability, large foreground images have liquid widths specified in percentages instead of in pixels. See Richard Rutter's detailed description of this technique on Clagnut.com.
Besides resizeable text and the option of plain styles, all images have ALT tags, and both the top and side menus have a “skip menu” option for those using screen readers, small screens or other specialized equipment.
|Hypertext Markup:||XHTML Transitional 1.0 , PHP 5|
|Primary Code Editor:||Dreamweaver MX 2004|
|Primary Image Editors:||Photoshop 7.0, Photoshop CS|
|CSS Dropdown Menu:||Adapted from the Son of Suckerfish script.|