On designing a book blog

This last week I spent some time re-doing my wife’s blog design at mindywithrow.com.  I’m a big fan of open source or GNU software and themes.  I generally don’t like to code themes from scratch when I do a design, especially since most designs fall into certain categories or combinations of sidebars and center and header matter that are fairly universal.  The best move for someone with little time is to find free themes that are well done and have the general needs for the type of site you have in mind and then modify them.

This we did.

For those of us who like to toy with the code itself, redesigning allows for fun (I agree with Wordpress creators that in some sense, “code is poetry”).  For example, the theme I used for brandonwithrow.com came originally from the Firebug theme.  The theme had all the basic elements that I wanted and I did a lot of changes behind the scenes.  Even though I don’t like to create from scratch, I still end up modifying themes significantly.  I very much enjoy taking a theme and seeing what I can do with it.

In the case of MindyWithrow.com, we searched for a good theme that had the option of a featured post (like many of the new magazine themes popping up everywhere) and yet some sense of being personal.  Smashingmagazine.com (one of my favorite places for finding themes, icons, etc) had a post on 100 great themes for 2009 and it is there we found Versatility (see below).

There are many reasons to like this theme (above).  First, it offers the nice featured post section, while maintaining two columns of content and sidebar.  The wide sidebar allows for tweaking sections of it so that it can appear like two columns if you want it to and the fact that it is widgetized (as any theme should be by now) means that there is a lot of simplified flexibility.  Most changes occurred in the area of aesthetics.  I removed the “about” section (near the face) since we were going to have an about tab in the menu. (My wife’s publicity shot is in landscape and this required more space.)  Mindy is also a writer (5 children’s books to her credit and several articles in magazines and journals), so her “about” section has to reflect that her blog is both about reviewing books and her life as a writer.  Something in a more formal location works best for this scenario.

The header (though you can barely see it in the image above) had a faint menu system.  The center gray area below the featured section (which looks like the place you’d put a menu) is actually a place for categories.  Since we were going to shorten the height of the header and add elements like a tab and tag line, I removed the menu from the top and replaced the categories with it.

The featured post only allowed for certain sized images (both in height and width), but those dimensions do not work well for book reviews.  I removed the height requirement and only added a width requirement.  In most cases, the portrait style of a book cover image, when compressed to a certain width, will readjust to a certain undetermined height without much distortion.  This seemed to work well for this theme.

For the main content, I made some minor adjustments.  I added a “share” button for social media that appears on individual posts.  The designer created a section for one-click additions like Digg at the bottom of each post, but did not include one for Twitter, so I added the code for that so it appears at the bottom of each post as well.  The share button at the top handles all of that, but given that Twitter is now the dominant way to share and that Mindy is most active on Twitter, I wanted a very obvious click for that at the bottom.

In the sidebar I’ve added some icons of social media and converted a certain icon for use as an “email” me button.  When clicked a scripted contact form appears.  The form is due to a handy plugin called SimpleModal Contact Form (SMCF) created by Eric Martin.  It can be added to main page menus or sidebars and is very handy for those of us who want to avoid spamming by simply putting our emails out there.

I used a nice little plugin called Twitter Tools to add her Twitter feed.  It is a simple plugin that connects with Twitters API and shows latest tweets.  It can also be used to tweet recent posts automatically.  (Mindy likes to have more control than that, so we have that turned off.)  We also added two new affiliate accounts, both of which point to bookstores that don’t fall into the category of “big box.”  Indie Bound connects with local stores and is a good way to support local businesses.  Both also pay better than Amazon’s affiliate partnerships.  The rest of the sidebar is just the natural integration of widgets and the footer (which also contained a list of categories) was altered to include only credits and to match the header color, allowing for bookending the design.

Color Changes
We did a significant amount of color change throughout.  Just about everything was changed to brighten up the design, which was dominated by gray.  However, as Mindy likes a more classic, professional look and since many book covers will offer splashes of color, we decided on colors that are earthy, flexible, and that mixed well with Mindy’s publicity photo (which was taken outside in the orchard here).  In most cases, colors came from actual pixels in her photo.  So, for example, we began with the header, which has a brown pulled straight from the photo.  Likewise, the yellow in the “Write. Read. Blog” comes from some of the ornamental grasses in the background and the green from the menu bar is also found in a pixel in the photo.

We toyed with various backgrounds.  There are alot of theories behind doing a background.  Some want a small, patterned-image repeated in order to allow for faster downloads.  I think the repetition of patterned backgrounds can (at times, just depends) make a blog too busy or look old (as this method was one of the original ways to give a background to a website when we were coding HTML by hand in Notepad in the 90s).  We tried it anyway and unfortunately it did both in this case.  What we did, instead, is go with a blue background that we felt amplified the content.  The color of the image was originally something entirely different, but I Photoshopped it to a gray-blue.  Why use an image instead of adding hex colors to CSS?  I could simply choose the dominant color in the graphic and code the CSS to make it the background color, however, this image is actually a subtle gradient that allows for a sheen and adds brightness to the blog;  it is also a very similar color to Mindy’s eyes, which I think brings the photo back into the picture again.  The rest of the colors (buttons and text with blues, greens, browns) were all chosen to connect to the dominant elements and to add splashes of color.

I have a couple tweaks to do yet, though it is done enough to go live.  For example, I’m finding one inconsistency worth changing if I can;  it occurs when using Safari (these are inevitable).  I’m sure there are some things yet undiscovered, but I hope not too many.  It is best viewed in Firefox, of course.  Think Design did a nice job with the original design and the name Versatility was very apt in this case.

In any case, I’m now working on starting my own book blog (which I’ve been considering doing for over a year now).  I have a significant writing project to finish first, but when I’m done I’ll finish up a design for this new blog, which follows a certain idea found in one of C.S. Lewis’ lectures.  The look for it follows an edgy-artsy feel.  Here’s to hoping I actually get it done.