New Design

As you can see the new design is live, and to be quite frank, it’s long overdue. Looking at the previous design day-to-day really bugged me, but I had a million other things that kept me from finishing this design. Thankfully I managed to make time to get it done.

As promised, I will discuss:

  • How the design came about.
  • Articles, tutorials & blog entries that helped me along the way.
  • Plugins the site uses to display different content.

How the design came about

The colour scheme was chosen by playing around with colours in Photoshop, but was somewhat influenced by some of the schemes at the Color Schemer Gallery.

For the layout, I wanted to be able to display recent Portfolio work somewhere noticable, so I decided on the top of the sidebar. Because of the various other information I wanted to display, I chose to create an ‘extras’ section above the footer. This resolved the problem of having an extra long sidebar (particularly on blog entries that had little content).

With the decision made to use two columns, a header and two footers (one for ‘extras’), I decided to use the same background colour on the columns, which meant I didn’t have to worry about Equal Height Columns.

There you have it… how the design came about!

Articles, tutorials & blog entries that helped

For the top navigation I had originally planned on using Roger Johansson’s Inverted Sliding Doors Tabs technique, but was unable to get it to look exactly as I wanted. I decided to use Dan Rubin’s Navigation Matrix Reloaded instead, with the help of Veerle Pieters’ The XHTML/CSS template phase of my new blog, part 2 blog entry.

To achieve the calender icon look beside each of the blog entries I made use of Shirley E. Kaiser’s Creating a Blog Entry Date Calendar Icon Look with CSS, Mostly, with some modifications of my own :-)

WordPress Plugins Used

The Previous Blog Entries on the sidebar is powered by the Recent Posts plugin.

The Contact page uses the extremely flexible, Secure and Accessible PHP Contact Form plugin.

The Latest Web Design Projects on the sidebar is a Page which is included using the Improved Include Page plugin. The same can be said for Web Design Projects on the sidebar of the Portfolio.

The books and music links in the extras section above the footer are powered by the Amazon Media Management Extension plugin.

All Google Adsense Ads and Text Link Ads are handled by WPAds.

All source code displayed in blog entries (future blog entries) is converted into ‘sexy looking’ source code using the SyntaxHighlighter plugin.

A final word

Originally the doctype was set to HTML 4.01 Strict, but the design passed the XHTML 1.0 Strict validation test (to my delight), so the doctpye is now XHTML 1.0 Strict. During the launch of the design I threw in an upgrade to WordPress version 2.1.2, just for the heck of it ;-)

New Design = Almost Done!

It feels like it’s only been about a week since I moved to the new host. That’s the reason the new design is not yet live (not really a reason, I know). But it’s nearly finished. Below is a little teaser of what the design will look like, to whet your appetite (if you even have one for my blog!).

Once the design is live I will post an entry explaining how the design came about, sites that helped influence it and articles that helped make it a reality.

Till then…

~ Update ~

As you can see, the new design is live!

It’s just gone 12pm and I don’t have the energy to write up a detailed post about the design, so I’ll leave that until tomorrow :-)

Your Choice of CSS Book?

If you could only choose one CSS book for your shelf or library, which one would it be and why?

Below is some reference material to help aid in your decision :)