Well I have officially decided to make Fresh and Clean my permanent design, and not just a stop-gap as I had initially set forth.

The initial version of Fresh and Clean was coded CSS-wise in a round 2 hours, add another 25 minutes in for restructuring my pages and you have less than 2.5 hours to create a cohesive site style.  People talk a lot about web-standards and CSS vs Tables but the bottom line for me is 2.5 hours.  I was able to design and implement, from scratch, a site design in less time than it takes to watch a Lord of the Rings movie.

cjd_word_count();

The beginning: Hopes and Goals

I had very clear goals laid out when I started this re-design:

• Something That Doesn't Suck^TM
• For the love of all that's Holy don't use Georgia
• Don't use a single flippin image in the layout
• Find a decent way to integrate site navigation
• Use and abuse the Theme System in WordPress 1.5.x

Most of my goals are pretty straight forward.  The last two might need a bit a' splaining though.

Find a decent way to integrate site navigation


I have never been a big fan of multiple column layouts for weblogs, my thinking has always been that people come for the fresh content, so that is what they should see, first and fore most.  All the evidence you need is the enormous popularity of RSS.  RSS readers list the (x) most recent posts to an enabled site; all you get are the title, category, date and the post text.  That's it, no blogroll/clippings/monthly archives links et kitchen sink.

That has been the philosophy that I carried here up through my last Layout Persian Rug.  When I decided to scrap it and move on I also decided to move this site beyond merely a journal or weblog.  I had numerous open source projects that needed a home as well as the desire to build a portfolio for my art and photography.  So the website as weblog was out of the question.  Consequently I would like to predict the demise of website as weblog in 2005; I believe that more and more people will be out growing this state of being and will need to expand.  Weblogs aren't going away, merely becoming a component of a site again, instead of the sites sole reason for being.

Use and abuse the Theme System in WordPress 1.5.x


It is no secret that I was a nay-sayer of the theme implementation in WP 1.3+.  The reasons for this were numerous, from the fact that I had created and released my own theme manager to how inane I considered the way WP had implemented the function that handled the stylesheet insert.  I felt this way until the Theme/template system began to mature and then almost over night I became of fanboy.  More on this later, suffice it to say I am now a fan.

Getting to it: layout and design

I knew at the beginning that I wanted to ditch all crutches with this design.  What I mean by that are those shortcuts or hacks that designers employ to achieve a result.  These include the use of images to create your layout, instead of pure CSS (now I don't mean sites like Michael's, but more of the images for spacing, or use an image for the background to get around differing column lengths and so on) and browser specific hacks.  I also want to say that I don't look down on people who employ these hacks, I usually do as well.  This time though, I wanted to do everything as purely as possible.

I also wanted to move away from over-saturated fonts like Georgia and Verdana, to something a little more fresh and readable.  Readability and eye-fatigue are very important aspects of web design that I think are largely overlooked today, as is accessibility for handicapped users.  So I tried to wrap some more of that in as well.

As I sat stewing over what would be next visually for Sillyness I decided it was finally time to make the move to the theme system in WordPress.  For those of you out there that have not made the move to 1.5.x, themes and pages are the gems, the shining jewels in the WordPress crown.  Through creative use of pages and templates there is nothing that can't be accomplished.  Case in point my new photoset feature.  They are achieved by combining pages with a special page template.  Laughably simple and efficient.  So I guess now I should talk a little about the theme system.

Theme my world

Wow, where to start.  The backbone of the theme system are templates.  Basically templates allow you to specify everything for a given element.  For example I employ a custom template for my index.php, pages, categories and single post display.  You can see the differences if you look.  Currently Sillyness is powered by 8 templates and one stylesheet:

• Stylesheet: this is obvious isn't it?
• 404 Template: a template for any 404 errors.
• Page Template: the first of my two page templates, applied to all pages by default.
• Photosets Template: this is the second page template. Having two templates allows me to have pages like colophon look one way and pages like Drawings look completely different. This template is only applied when implicitly set when creating a page.
• Category Template: again, should be fairly obvious, when a category page is loaded this template is applied.
• Comments Template: loaded when comments are viewed.
• Main Template: the template for index.php
• Sidebar Template: navigation and such.
• Post Template: this template is loaded when only one post is viewed, as in Jared digital

This makes for some very exciting possibilities as you can imagine.  And this is only the beginning when it comes to templates.  Templates are nothing more than php pages like this so they are super easy to create and deploy.

Okay, so having decided to go forward with Fresh and Clean as a 1.5.x WordPress template, I moved on to defining the feel I wanted from this layout.  After seeing Michael's implementation of Century Gothic in Freya I knew I had found my headline font.  I had considered using Century Gothic in a design a few years ago, but I was all about the serif fonts, so it was right out.  Having already decided to use some san-serif goodness in F&C, my eyes lit up like it was Christmas morning upon loading Freya for the first time.  Coupling it with good ol' Arial seemed like the thing to do, so I did.

I knew I wanted to keep some elements of Persian Rug in this design, most notably the date, title and meta info styling and placement.  I always thought it was fairly useable and attractive so it stayed in.  I also was committed to keeping the permalink the hell outa the title.  In my previous design I employed an image of chain link for the permalink, but of course with my self-imposed embargo on imagery in the layout I needed something else... something new, something borrowed, something... red.  So yeah I ganked the permalink idea from Michael as well, but I think that it works well and hey the man himself likes it., so... yeah.

Of colors and whitespace

Another goal of the redesign was to "lighten" up the site a bit.  During the Persian Rug era the site felt very heavy and almost moody, I wanted to bring more of a light, airy feel to the redesign as well as make better use of space both of the white and negative variety.  I tend towards a very monochromatic, or duochromatic handling of color palettes, and despite my best efforts that trend is still in effect in F&C; although I am proud to say I am using more of the much hated pastels and blue in this designs' color palette.

I have a weakness for whitespace and negative space.  Couple that with my obsessive-compulsive need for symmetry and you have the makings of a positioning nightmare when using pure CSS.  Persian Rug made good use of whitespace, primarily due to its simplicity.  I wanted to do a bit more with F&C, so out came the negative margin and padding values!  There are many thoughts on negative values in margin and padding, some for it (me) and some against it.  I am a believer in using what tools work for a given situation, as opposed to adhering to a rigid all encompassing procedure, but hey YMMV.

So yeah, the color palette is dominated by cool blues and greys, balanced with a punch of red for contrast, because red is the Greatest of All Colours!  Pause for echo.  I also find this a good balance visually, allowing for extended periods of reading without fatiguing the eye too much.

2 columns, or how I learned to tolerate navigation menus

This is the end of the initial write-up, once I cover my thoughts on the left flanking nav menu that is.  I might come back and revisit some of the custom functions I wrote for the redesign but at this time I feel something like that would be outside the scope of what was intended for this article.

Now as I stated before I am not a fan of multi-column layouts for a site dedicated to a weblog or journal.  Simplicity and content pre-eminence should be the order of the day, and nothing else.  However I am moving chrisjdavis.org away from simply being a weblog so a navigation menu of some kind is actually called for.  I am using a left flanking menu currently, due to the habits of most western readers (who are the majority of my readers).  Psychologically, a western readers eye enters the viewable frame at top left and work to lower right, conditioned by years of reading books and newspapers that employ this layout.

There have been some arguments that weblogs should be structured like a real world journal or novel, e.g. the newest content would come last.  Psychologically the optimal sort for a weblog has to be newest first for western readers.  The first piece of post content a western reader will see should be the most relevant, in this case the freshest post.  Placing the freshest content in effectively lower right (5th position) is incredibly misinformed and ill conceived, compound that with a site like mine that has going on 3 years of content and you have a formula for low readership at best, no readership at worst.

So placing the nav menu in 1st position (top right) is the best solution for the moment.  At some point in the (hopefully) very near future there will be a number of visitors coming here that could care less How much I love Apple Computer, or What sites I think are Neato.  They will be coming looking for my open source software, or eventually my portfolio of design and art.  When that time comes I would like them to easily find where they are needing to go... that is a reason to have your weblog content compete with a side menu, not so I can list the 600 sites I think are cool.

Parting Words

Well that is it for now.  I think this is one of the longest posts I have ever written.  If there is anything you would like to know about the process that I didn't cover in this article just leave a comment and I will try to give you an answer.  I sincerely hope that someone benefits from this ginourmous article, even if it is only to say, wow, I am glad I am not him!