Only one day in and I could not help tweaking my new theme. I’m not sure if you can call it an improvement, but at least it’s different. I started playing around with the idea of a gradient background image. I decided to add one to the top of the site to add some pop and increase the contrast between the color scheme and the background. I found a number of articles on-line for doing this, but the one that I liked the best is here. I actually installed Gimp specifically to edit images for the new theme and I have to say it’s working out really well. If you have a strong opinion one way or another about the new background post a comment below and let me know.

After putting off a re-design for nearly a year I’ve finally opted to update the look of this site in honor of my 100th post (well 102, but who’s counting). What you are seeing now is the first cut of the new design. I consider it an evolution rather than a revolution. The design is based on top of my Welcome theme which was itself built completely from scratch. Taking this approach allowed me to reduce the design time from approximately a month for Welcome to less than a week for the new Bogus theme. There are some parts that remain largely unchanged while other parts have had a big over haul. I plan to continue tweaking fonts, colors and images over the coming months to try and improve the look incrementally. If you have any interest I’m happy to give you a brief tour under the hood.

Right out of the gate I knew I wanted my new theme to use the 960 Grid System. I’ve become of fan of this fixed width layout approach to styling web pages. It appeals to the programmer in me with its simple symmetry and incredible ease of use. The benefits you can get from 960.gs imho far out weight what you give up. Having said that I know it’s not for everyone. You will have to decide what you are trying to achieve in your visual presentation to determine if it’s right for your site.

After electing to use 960.gs I spent a fair amount of time retro fitting the necessary DIV’s into my theme. I tried to simplify in some places, but a lot of the content remained very similar to speed the process up. The overall goal was for the number of DIV’s to stay constant or be reduced in every section. I think I achieved that.

960.gs also comes with a reset.css and text.css that I used for the new design. All explicit font-family styles have been removed from the site and it now relies solely on the text.css or default styles. The result is a much “plainer” look that was in line with my idea of simplicity. I may have to tweak specific fonts to improve the overall presentation, but I wanted to see how this worked for a while.

For a color scheme I chose nothing. To be more specific I chose gray, but the effect is basically the same. I opted for a combination of navy blue and dark green links with a variety of approaches to visited and hover behavior depending on the section. I was trying to create subtle interest and see if the dark blue and dark green could work together. This is one aspect of the site that I will likely re-visit. In an effort to help the future color designer me I made sure that all colors and borders appeared at the beginning of the respective CSS blocks in the style sheets.

New in Bogus is the inclusion of images. This marks the first time I included images as a way of accessorizing my theme. This is something that I talked about adding in my previous theme but never managed to achieve. The images at the bottom are stock RSS and WordPress links that I obtained from various sources. They are public domain images that I liked and I thought they worked with the theme. The other image (only one at the time of this writing) is a custom photo that I took myself. It is actually an slightly enhanced copy of one of the original site design sketches. I had to color the background of the sketch with a colored pencil for my wife’s camera to take a picture that did not wash out. Although it’s not perfect, I’m satisfied the result adds a little interest to the design and I think will do just fine until I find something I like better. I used the excellent GIMP 2.6.8 program to scale the image to 160×120 which reduced the size from 2,197 KB down to 12 KB. I feel confident this should provide at least a minor bandwidth improvement. GIMP is a GNU Image Manipulation Program that is really nice for an open source tool.

The navigation links were converted to navigation buttons thanks to the blog post Create GitHub-Style Buttons with CSS and jQuery, MooTools, or Dojo JavaScript by David Walsh. Thanks David! I opted for the jQuery approach since it’s the Javascript Framework that I’m most familiar with. By adding jQuery to the theme I opened the door for future plug-ins. These could be 3rd party plug-ins or ones that I create myself.

Some of the other changes were about repositioning and re-formatting certain elements of the site. The Tag Cloud and Categories List were moved to the footer. The Archives list was shortened to one year duration. The navigation stayed on the right hand side. I originally moved it to the left, but eventually I decided that the most important content in a blog is the current post. Keeping the posts on the left helped to keep the focus on them as opposed to the post navigation and links. Lastly, a few quotes of interest were added in the layout. I may change this to a random quote generator later, but for now I just picked some that I liked.

The rest of the site is largely unchanged from the original Welcome theme. You may be curious why the new theme name is Bogus. The simple answer is that it was the first name that came to mind that started with a B. This kept the theme at the top of the Manage Themes list in WordPress while I was designing it. Scrolling burns calories.

That’s it for a high level overview of the new design of my blog. I hope you found it useful or interesting. If you have any suggestions for improving the look or for anything else please post your interesting or creative comments in the comments section below. And no, I am not Ray William Johnson, but I do approve this message.

Peace

I worry about color schemes. I know it’s nuts for a web developer, but I’m constantly reminded of the impact a good color scheme can have on the presentation quality of a web site. It’s horrible to put in a bunch of time and energy into the technology of your solution only to discover that your color scheme is driving your users away. Gasp! In my latest (desperate?) search on the web I found a post titled “Choosing Web Design Colors” by Donald Peterson. It’s typical of the types of articles I usually find, but I though the writing was direct, the style was comfortable and the site had a nice clean layout which told me Donald takes his color schemes and design work very seriously. If you are need of inspiration then give it a read.

I recently read an article on contrast in web site design that caught my attention. The author contends that designers must focus on contrast as much as color to accommodate people with various forms of color blindness. She suggests several tools on the web that can be used to view your web site in gray scale or rate your success in delivering effective contrast. The article can be found here. If you are interested in comprehensive web design then it is a quick and useful read. As for your humble authors blog, I thought it looked reasonable in gray scale (GrayBit), but CheckMyColours was as the article’s author predicted less than kind. My long postponed redesign may be getting closer.

Smashing Magazine recently published several articles on Color Theory for Designers. I thought they were pretty easy reads with an interesting perspective so I decided to link them here.

• Color Theory for Designers, Part 1: The Meaning of Color
• Color Theory for Designers, Part 2: Understanding Concepts and Terminology