Berkeley Hills Weblog Makeover 94707
After 500 blog entries, and more than 1,000 photographs, it was time to update the visual design of my Photoblog 2.0.
But like many things software that seem like a good idea when you start, this proved to be much more of a job than I had imagined.
Wake-Up Call
I was Googling myself, and my recent book, Google Advertising Tools: Cashing in with AdSense, AdWords, and the Google APIs. Many writers spend far too much time Googling themselves and their books!
During this fun way to idle away extra hours (ha! ha!), I came across an SEO blog entry that discussed Wired?s interview with me about making money from AdSense blogging. The author of the blog entry was somewhat snide about this blog and Photoblog 2.0: "A startling realization came onto me as a saw the design of each [of Harold's] blog[s]. Sometimes crude, unsemetrical [sic], and painful to the eyes is what I can describe it."
Here's the part that got me into gear. One comment suggested that "someone should tell him [Harold] that old Kubrick theme [the default WordPress design] is a favorite of blog spammers. I almost click away from any blog using that theme when I see it, just as a kneejerk reaction."
A response suggested that I made my blogs ugly on purpose as part of my insidious get-rich-quick scheme so that viewers would click any link (preferably an AdSense link to make me revenue) just to get quickly off my ugly sites: "This is probably a reason for his [Harold's] monitary [sic] success since users tend to click away (in disgust perhaps) as soon as possible and the next thing they click on is a Google Ad. So maybe ugly does work as part of a marketing plan."
I Am Flattered, but...
Guys, I am flattered to get all this attention, and it certainly helps the search engine status of my blogs, but to a considerable extent my critics miss the point. While they are right to pick up on the idea that a successful blog exists as part of a larger idea or plan, it is crucial to realize that search engines do not care about beautiful design.
They don't care in the slightest.
The only thing that matters to a search engine is content.
My Photoblog 2.0 is successful and draws traffic because it has lots of good content. Leaving the photographs out of it, there are articles about digital photography techniques, Photoshop techniques, Miwok naming of Yosemite landmarks, and much more. This content provides information that can't be found elsewhere, and is written from my unique perspective with the same care that I take in writing my books.
The art and craft of SEO is partially about taking relevant content and tweaking it so that search engines can most easily digest and index it. This process does not care about the appearance of the content. SEO is not concerned with making that content *look good* to humans.
Compromise
Search engines may be unconcerned with the appearance of the content they index, but search engines do care about traffic. Visually attractive sites are attractive to humans, get links, and move up in their PageRank. So design does, too, matter. The compromise is to create sites that look great, with the design supporting their content-and where the information architecture is straightforward enough to work for SEO purposes as well.
Kubrick
Kubrick is the theme, sometimes called a skin, that is the default for WordPress, the open source blogging software. Kubrick is famous, and was designed by Michael Heilemann.
The WordPress theme, such as Kubrick, controls how pages in a blog managed by WordPress look, and also how they fit together with one another.
Remember, one of the critics of my Photoblog I mentioned earlier deplored my use of Kubrick.
I like Kubrick. I realize that it has become a cliche, but I still think it is a great design.
I chose Kubrick at the time that I got WordPress installed because I liked it, because I thought it didn't interfere visually with my photos, and because it was the default out-of-the-box, so I didn't have to do anything. When you spend your time chasing three little kids, writing books, taking pictures, and consulting, you don't have too much time left over to worry about design themes.
One of the things I like best about Kubrick is buried inside the code modules that Heilemann supplied to WordPress. Like the dysfunctional computer HAL in Kubrick's film 2001: A Space Odyssey, commented out sections of obscure code, buried in places like the footer template, start saying things like "Dave, what are you doing here", "Dave, I wouldn't do that," and then quoting the lyrics from Daisy, Daisy.
A sense of humor, these open source coders and designers have, yes they does, my precious!
New Skin
Over the past year, I've become pretty serious about my photographs. Well, maybe "serious" is not the right word since I have so much fun with photography. But you know what I mean. I mean that I think my photoblog and photos deserve a frame that will not let someone dismiss them simply because it is the default.
New skin time! Time for makeover Berkeley Hills weblog 94707! (That's my zipcode, by the way.)
The first place I started was to look at existing open source themes for WordPress. There are lots of these, here?s a list of themes on the WordPress Codex.
Some of these pre-built skins are wonderful. Some are garish. But none of them seemed to fit the bill of working well with my photographs.
I realized I'd have to build something for myself.
There are really two parts to a WordPress theme. One is to control the look-and-feel of the blog. The other controls the information architecture: how blog entries, the navigation panel, the blog home page, and so on, are organized.
I realized that I wanted to keep the existing information architecture, which works fine. All I wanted to change was the way things looked.
If you read the comments within Kubrick, this is simply a matter of creating four graphic files, the most important of which is the header graphic, and changing a few style settings.
So I decided to modify Kubrick, rather than creating my own theme. In hindsight, I believe this was a mistake. When I do it again, I will create my own theme, not modify an existing theme.
One thing I should say here is that WordPress is great software. As far as I am concerned, one part of its greatness is that it is entirely written in PHP, with source code available and present. The PHP uses styles to generate the HTML that is displayed. You can change anything about WordPress and its code you'd like under open source licensing.
Pixel by Pixel
Changing the positioning of the graphic elements using their styles took hours of pixel-by-pixel labor. Every time I fixed one element that was off by a couple of pixels, something else broke.
Style Sheet Angst
Style sheets are great. They modularize HTML, and separate form from content. But WordPress is a very complex system, with some styles set in the style sheet, some set in the header module, and the display impacted by code in perhaps twenty different modules.
I spent a great deal of time playing CSS detective and wondering what I had to change to move this dingus to there.
Sometimes I think they should have stuck with tables to organize HTML.
Which Browser Are You On?
Finally, and I do mean finally, I had the new appearance working. Or so I thought. Moving from Internet Explorer on Windows to Firefox, I found that the whole thing was bollixed up. Worse, I found it had a slightly different fit of graphical elements on Mac Explorer, Mac Firefox, and Mac Safari.
I had to add conditional code that checked for the browser that was opening the blog, and picked a different set of styles for each.
By the time I got this all working it was midnight.
If there is anyone running Linux, or one of the browsers I haven't mentioned, would they please drop me a line to let me know if there are any problems?
Voila
Here's the makeover:
Photoblog 2.0 Home page
Sample Blog Entry
Catgeory page
Was it worth it? These things usually seem like they are after you've done them, but not while you are in the thick of the agony. Ah, there it is again: the agony and the ecstasy!
Is It My Turn Yet?
Q: I am the Googleplex Blog. I am running on an old MovableType install that Harold never upgraded because it was one of the last free versions before MT went commercial. My design is functional, but not particularly inspired, and Harold hasn't changed it in years! Is it my turn yet? When are you moving me to WordPress? When are you getting me a nice new skin?
A: Not tonight, Josephine.
Posted by Harold Davis at June 2, 2006 1:57 PM
