Rebooted: A Comparison of Old & New

For three weekends I have spent way too much time in front of the computer preparing this site to participate in May 1st Reboot and CSS Reboot. Now that the redesign is completed, it’s time to go out and celebrate… right after I cross a couple more items off the list (file a FAFSA and proofread my wife’s 15 page systematic theology paper). Hmm, on second thought, it may be awhile before I see the light of day.

Oh, the shameless plug: May 1st Reboot & CSS Reboot are contests, so if you like my web site – click on the links and vote for me!

The Old Design

The old design is quite sentimental to me – it was the first version of this web site. I really liked the simple layout, especially the fact that all of the spacing was simply whitespace. However, there were some frustrations with this design as well:

• Nothing to please the eye once you scrolled past the header
• Difficult to find the photo galleries
• A disturbing lack of breadcrumbs
• Difficult to determine the current gallery when viewing a photo
• The short header in the photo detail page was too different from the main header
• The navigation was small, out of the way and didn’t attract the eye

The New Design

I decided to make a few simple changes to spruce up the web site with a few more graphics and a little better usability (specifically the photo gallery). However, I wanted to keep all of the best aspects of the original design:

• Random photos in the header
• Using whitespace to distinguish between content areas
• White backgrounds
• My favorite clouds image in the header

With that in mind I made the following updates:

• Tightened up the header, so it is a much stronger
• Enlarged the cloud images in header
• Integrated the navigation into the cloud images so it is more visible
• Added subtle breadcrumbs which also function as a divider to bring the eye to the important content.
• Added a background the footer to close off the page
• Added a shadow around the content (I didn’t want to add this, but it really helps the eye track on long pages)
• Added graphic links for photo galleries across the site, so they are more prominently displayed
• Separated articles and recent photos on the homepage
• Included thumbnails in recent photos
• ...and quite a few other improvements

The Rough Edges

However there are still three main usability issues screaming at me from the photo gallery:

• The first and last article still show both next / prev links – even one of the urls is bad (example)
• I am stuck using a category from the current photo instead of a category from the next / prev photo
• Next / previous link to the next / prev article in the section, not the next / prev in the category

I dropped a post about these three items in the Textpattern Forums. Please reply there if you known of any solutions.

I’ll be sure to post about the solutions here as I find out more information – along with a much overdue description of my Textpattern photo gallery…

Update: May 1, 4:35 pm: Almost forgot the shameless “vote for me” plug. See the second paragraph.

Posted by Matt Harris on May 1, 07:22 PM