I’ve been meaning to tidy up around here for quite some time, and this past weekend I thought I’d give it a go. The site was in desperate need of reorganization as far as layout was concerned. Initially I spent some time on the design structure, working towards an underlying grid to keep things in line.
What Triggered the Change?
Since the launch of this site, I’ve tried to think of elements I’d like to add or remove in order to enhance its value. One of the first things on my list was the Bookshelf you see below. I wanted to keep better track of the book reviews I plan on writing up in the coming weeks and thought giving them their own real estate would be a good first step.
Another thing I wanted to accomplish was giving the most popular articles some emphasis. I took a few minutes and wrote up a quick WordPress function to grab the ‘top 4’ articles and include a short description about each. Hopefully it will help first time visitors quickly discover the most active pages.
Another big change was the sidebar content. The search form was streamlined and placed in a more common position. The introductory statement was also given more prominence for first time readers. The sidebar also includes more links of my choosing that I feel would be of use to readers, along with the lists of recent articles and comments.
Getting Down To Business
Once I had a list of things to include in the new design, I began to wire frame a mock. I don’t often pull out a pen and piece of paper to start a design mock, but thought I would give it a shot this time. In all honesty it was probably the best move I could have made. Making a quick sketch of possible ways to organize this new content really gave me a great view of the overall picture.
Will the New Design Be Liquid or Fixed?
One thing I went back and forth on was whether or not to make this version a liquid or fixed design. The debate between liquid and fixed designs has been going on for quite some time, and probably won’t die out any time soon. There are good arguments on both sides, but what really got me to go with a fixed design was how I use the Web. Liquid designs are great — they use all available real estate (most of the time) and can really make the most of your resolution. Unfortunately with high resolutions, you’re often faced with extraordinarily long line lengths, which can be difficult to read. Or so I thought. I decided to take a step back and observe what I prefer, and in all honesty, I prefer fixed width. With excessively long line lengths I feel like I have to make an effort to stay on each line instead of concentrate on the content. It helps that other people feel the same way.
Now that I had decided I would stick with a fixed design, it was time to decide on window width. I’ve been running Mint for a couple months now and thought I’d check out what readers were using.
- Greater than 584: 98%
- Greater than 744: 98%
- Greater than 968: 88%
- Greater than 1096: 51%
- Greater than 1344: 9%
- Greater than 1384: 8%
- Greater than 1544: 4%
- Greater than 1624: 2%
- Greater than 1824: <1%
Given the statistics, I made the decision to stick with aiming for at least 1024px resolution. I thought I would take some advice and try out a 960px wide container for the site.
Some other less obvious changes
I’ve also experimented a bit with image replacement, as it’s always a touchy subject. Trying to find a solution that is both semantic and supports images disabled & CSS enabled at the same time is fairly daunting. I’m not sure if I’m a fan of what I’ve incorporated, as it gets a bit ugly with more than a few bumps in text size. I plan on giving it more attention in the near future.
There’s Still Lots Left To Do
I still have a lot left that I’d like to add or change about the site. One major thing is incorporating a working contact form that doesn’t cater to the massive amounts of spam bots floating around. Does anyone have any suggestions? It doesn’t have to be a WordPress plugin per se. I also hope to come up with a more interactive navigation idea. When moving from one link to the next, it is impossible to tell when you have moved to the next item; not something I aimed for.
I’m in the process of reorganizing my 404 page which is in desperate need of repair, along with a handheld style sheet. I plan on cleaning up the leftover items over the coming days, so if you notice anything out of whack, you know why. All in all I’m liking the new design and hope it goes over well.