C2F Website Holiday 2006 Theme
This week I designed a new theme for C2F's web site. Back in April I began redesigning the site with completely new structure and presentation, and these changes were released in July. The primary focus of these changes was to give the underlying code a very lean and logical structure using XHTML and CSS. I carefully wrote the code in a way that would allow future theme and color changes to be made site-wide in a quick and easy fashion. The pages contain absolutely no inline interface images or styles, so the entire appearance can be changed simply by pointing to a different externally linked CSS file.
In addition, for the first time, I came up with the concept of a themes folder. All the images and CSS required to adorn the web site in a particular motif are stored in a separate theme folder. The CSS references the images simply by filenames with no path. No file is required that is not contained in the theme folder. When it comes time to change the theme, a past theme folder is duplicated and each file is altered until the new theme surfaces. When all the changes are complete, the only change in the XHTML is to point all the CSS links to the new folder. Not even the CSS filenames need to change because the new theme folder contains all the same files. Just the folder name changes in the CSS links.
I tested the practicality of this theme file structure this week. It worked verysmoothly, and I'm quite pleased with the new structure. Because of the completely separate structure and presentation, I was able to create a new theme in just two days, including the time it took to determine color layout and create new graphical elements. In reality, most of the graphical work was done for me already. From now on, I will probably be adapting the themes from our seasonal catalogs which are designed in-house by our art department. The newest theme is simply an adaptation of some Photoshop files I received that reflect the appearance of the future C2F Holiday promotional catalog.
One of my favorite things to do when I am designing graphics is to always keep bandwidth and download speeds in mind. I have always had a keen understanding of compression, image formats, clarity, and such issues (back from the good ole days of Commodore 64, Sega Genesis, etc. when 8-bit or 16 color depths were the latest rage, and gradations of color were formed by dithered dot patterns). I find it quite entertaining to create the smallest possible image to fill large spaces with dramatic effects. This usually involves deciding whether to use a GIF, JPG or PNG and employing strategic tiling. All gradients can be composed of an extremely lean one-pixel wide gradient image that is tiled horizontally or vertically. Taking advantage of CSS background colors and borders rather than using images to fill in areas of common color is also paramount. I am particularly pleased with the tree background image for the holiday theme because I adapted it from a Photoshop file to make a seemless tiled image. An entire snowy forest landscape is created from a relatively small tile.
Here are some example pages from the C2F web site rendered both in the current Back to School theme and the forthcoming Holiday theme. If you can figure out how to get your browser to go back and forth between the two themes (try changing partial filename in the url from "bts06" to "hol06" - or open each link in a tabbed browser, like Firefox), it is kinda cool to see the exact same source have two completely different styles.