A Path Less Taken

I’m a programmer. I say this so you can appreciate when I proclaim that I am not a designer. I think designers are great, but I don’t happen to have one sitting around and waiting to design my cool new blog. The challenge is trying to do the best I can with what limited talent I have. To that end I’m going to share my hopefully helpful advice for doing your own design. It’s that whole teaching a man to fish thing. I’m not suggesting that you have to do anything that I’ve done here. It’s always up to you to decide what works best for your Welcome theme. It is your theme after all.

CSS

To start with we are going to need a good CSS reference. There are plenty of them on the web and in print. The one I used for this work is the w3schools.com reference. It had the information I needed in a compact and easy to use format. You should choose a reference that works best for you.

Browser

Next you are going to need a browser that lets you examine your styles and how they are applied to the page being displayed. Although I’m sure Firefox and IE either do this or have plug-ins to add this behavior I have to confess that I’m a Google Chrome fan. With Chrome I can right click on the displayed page and choose Inspect Element at the bottom of the pop-up menu. The inspector dialog allows me to navigate the markup of the page and see the styles that are applied and the documents they came from. You can even see styles that have been overridden lined out. This allows you to quickly investigate why the style you just applied is not working for a DIV because it is being overridden by a style that is applied to another element nested inside of the DIV. Having some tool like this is an absolute life saver and I can’t imagine how I ever got anything accomplished with CSS without it.

CSS Reset

Next you need a CSS reset page. This is a CSS style sheet that sets CSS values or attributes that are not defaulted to the same value in different browsers. The idea is simple. By resetting these values or attributes you are assured that your styles will be consistent across all A Grade browsers. If you want to know what browsers are rated A Grade you can check Yahoo Graded Browser Support to find out more. There are various CSS frameworks that provide reset style sheets. I choose the Yahoo User Interface (YUI) CSS library. Their reset page can be linked into your theme from the Yahoo servers where it is hosted. This means that you always have an up to date version of the file. You can check YUI Reset CSS to find out more.

Typography (Fonts)

Once you have your CSS Reset page you can begin to think about typography. You can always go with the default fonts provided by your CSS Reset and the browsers, but the result doesn’t end up looking polished. Like many aspects of design I looked around on the web for inspiration for our Welcome theme’s typography. My searches lead me to Chris Pearson’s Pearsonified web site. In his about section Chris describes the font choices for his blog. This inspired me to go with a serif versus a san-serif font for the Welcome theme body text. In fact I liked Pearsonified enough that I used very similar base fonts to what Chris described, although I did not always use them in the same place and my secondary fonts were mostly different from what he chose. I had to get Verdana in there somehow! Chris blogs extensively on WordPress theme building and his site is a good reference that you should definitely check out.

Color

So far we are doing ok. As programmers we are pretty comfortable with CSS and browsers. Then we run smack dab into color selection. What a pain! I’ve tried everything from watching home improvement shows to picking out paint swatches at the local hardware store in an effort to find color inspiration. Then finally I came upon this awesome web application named the Color Scheme Designer. The Color Scheme Designer allows you to pick a primary color and then obtain a palette of complementary colors based on mathematical calculations. You can choose mono, complement, triad, etc and then pick your primary color, brightness, saturation and scheme contrast. The result seems to be consistently visually appealing and provides you with a complete palette of colors to style your theme. If you like this site as much as I do then consider donating to the author to reward such a useful tool. You will see the Color Scheme Designer link to the color scheme I selected for my Welcome theme when I release the theme for download. In the mean time you should try the site and come up with a color palette that suits your taste and style.

Color Application

If picking a color scheme is a pain, actually assigning colors for backgrounds, fonts and links can be very tedious. The traditional approach I assume most non-designers use is pick your colors, add them to the various elements in your style.css file for your theme and preview your site. Then you continue to update the colors from the palette you choose and preview your site again and again and again. This is nuts! I decided to write a program in PHP that built a 4 DIV web page (think header, content, sidebar and footer). Each DIV contained bolded and un-bolded text and anchor tags (links). Then I added the jQuery Javascript library to my page and included the jQuery plug-in syronex-colorpicker.js. I obtained a text file from the Color Scheme Designer for the color scheme I selected and my PHP program parsed the file and built a series of color pickers at the bottom of the page. The color pickers were tied to each DIV background color, font color and anchor (link) color. You could then click on a given color picker and the associated color in the page above was changed. This allowed me to visually see and compare in real time color choices and how they all worked together.

My solution was hacked together from bits of code that I had previously written plus some new code. I decided not to package it in its current state as it is not fit for general distribution. If you have an interest in something like this please let me know and I can build a more complete version that you can access via the web. Also, if you are not a programmer then I don’t expect you to be able to come up with something similar. You can use a DIV test page like the one discussed in Building WordPress Themes – Part 8 and just apply styles and preview. It’s not much better than doing it in WordPress itself, but you can isolate parts of the design without worrying about other issues getting in the way. Then you can transfer the styles to your style.css file once you are happy with the result.

Layout / Design

Layout and design are about form and function. I can honestly tell you that again, I stink at this. Like most people I looked to the work of others for inspiration. Below are some of the sites that provided inspiration and a brief explanation of what I learned from each.

• http://mattread.com/ – I discovered Matt’s blog when I followed this link on WordPress theme design. Although Matt’s blog is built in Habari and not WordPress, his clean presentation, stark contrast between header / footer and his content and his off center two column layout were elements I wanted to emulate. The colors are notably different from what I came up with, but I think you can see traces of Matt’s approach in what I did. I also liked the more notable line spacing that Matt used.
• http://www.pearsonified.com/ – Chris’ typography was more contrasting than Matt’s. I thought this gave the site more pop and decided that heading and body fonts needed to be different. Note that Chris favors drastic size difference between some post headers and body text. I like to think my contrast in size was more subtle, but that’s up to the viewer to decide. Chris also gets credit for re-enforcing a lesson that I learned from watching HGTV. Accessorizing is what ties a design together and gives it style and interest. Chris uses thoughtfully chosen images that capture elements of his color palette and give his site that wow factor. It’s like saying your house looks plain until you hang some pictures on the wall. Not just any pictures, but ones that match the color scheme and style of your overall home décor. My initial effort did not have any images (remember our goal was to be minimal), but I plan to add a few “accessories” in the finished version of the Welcome theme that I use for my blog. You should chose a least one image that reflects your tastes.
• http://ottodestruct.com/blog/2008/09/29/wordpress-27-comments-enhancements – Otto’s post here is the inspiration for a substantial help document on the WordPress.org site related to the new comments loop. His demonstration of background color formatting for different classes of comments inspired me to take a similar approach to identify pingbacks and tracebacks. I also wanted a different background color for comments made by me on my own blog.
• http://mootools.net/ – I’m not a MooTools user, but their site has a gray background color that I used to get rid of the white background for my body area. The white background in the words of my brother was “like trying to read on the surface of a light bulb.” I chose the MooTools background color because I was attracted by the subtle gradient changes of background colors for their site.

The rest of the Welcome theme layout and design was accomplished by the careful application of positioning styles to the DIV IDs. The result is something that you are seeing right now in my blog. Take some time to explore the result and see what you like and what you don’t like. You can get the style.css file from the final distribution and use it as is or change any elements to suit your layout needs. The possibilities are virtually endless.

Final Note Applying Styles

Even though designers don’t often talk about it, the art of design is a process that is governed by laws just like any other discipline. The idea is to work within the guidelines provided to create something that is unique and compelling. I found this article which as well as any other provides a high level survey of The Principles of Design. Reading this may give you some insight into the process that will help you be more successful in your designs. At the very least it may give you some ideas that will improve your design tool box.

In the next post I’ll share a couple of resources that will help budding PHP programmers really add polish to their Welcome themes by adding updatable properties to the WordPress admin console.