Ta-da! I have yet again redesigned my website. It’s one of those tasks that makes feel like the site is still alive. In this case, the redesign was much needed. I have always been enamored with site design. Strange-Hungers is not my first outing in this arena. Some of my attempts were successful, but most were pure failure. Like the last design. What a flippin’ stinker that was.
Here’s why the last site didn’t work. It had a stable frame (no web pun intended) – Three columns capped top and bottom by header and footer. Main navigation was built into the header. The far left column also had navigation. The difference between the header and left column was that the left column offered more granular results. I had also mashed in there a tag cloud, search field, and content usage. The far right column display any content I coded in. In this case it was link lists and a banner. This left the site’s content struggling for attention in the center column. Finally, all of this structure was buried under graphics. It was ugly and my friends were gracious.
The new design I am proud to say I stole. Well not wholly, but in spirit. I am a fan of John Gruber’s DaringFireball.net. This tech blog uses little in the way of site graphics or complicated structure. This keeps the content easily readable. I also took note of Gruber’s rare compliments to other sites. In the end, I decided that the simpler-is-better approach was best for my site. Superfluous graphics eliminated. Strike the right column. Get rid of the fine grained browsing options. Make the page about the content and make obvious what I think is important for readers to see.
I spent several days scouring DF’s code for the clues to Gruber’s very successful design (the over-flattery is just in case he reads this). Simple and clean are great starting points, but these usually disguise more complicated means to the end. And I was right. His links behave differently according to context. Gruber also used tags that I had neglected or forgotten. His style sheet accounted for a great deal of html formatting tags. By the end of the first code read-through, I decided that I had to gut my current template.
First things first. I took to heart a comment Gruber made in his own style sheet:
If you copy without permission, I will mock you.
Alright then, don’t be a schmuck and copy and paste his code. Got it. I hate plagiarism, too. However, reading code is like reading music. Without the scores we would never know how Bach structured his symphonies. (Insert good natured ribbing from musician friends here) No one learns purely by looking or listening to a master. We learn by copying them and spinning our variations from what we learn. Mocking will come, I’m sure, but those that have the knowledge will see the distinct differences. And my failings.
In the end, I’m quite satisfied with my layout. As much as this layout was inspired by (and at times, lifted from) Gruber’s DF, this site design is my baby. It’s littered with my graphics, font and color choices, and most importantly, my content. No one can take that from me.