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 ;-)