I Am Obsessive-Compulsive
posted on july 26, 2004, tag: site
Yes, that's right—I've just redesigned. Again. Again. Fifty per-cent of you just shook your heads and asked yourselves out loud whether or not I know how crazy that is. I do. Trust me. But there is a method to my madness.
A few months ago when I began working on the design that eventually became "Sunken" (the last new look), I had a few very specific goals in mind. The biggest one was improving the usability of the site by cutting out or moving metadata around. I also had an idea for the visual effect I wanted to achieve. Eventually, neither of these things happened and out of frustration for having worked so long without finishing something, I quickly wrapped things up and released the Sunken design, even though I wasn't thrilled with it.
As soon as I released Sunken I started working slowly on what I had meant to accomplish the first time around, this time with no timeline or pressure to finish. The release of Sunken went well and I got great feedback, so I figured it would hold its own for long enough. And it did. Turns out all I needed was a month and a half to get things done the right way. So here we are.
The obvious thing is that the sunken masthead and navigation are still here. That was the best part of Sunken and one of the few things I actually wanted to do from the beginning. I haven't really changed it at all in this design, save changing the info icon (mouse over the masthead) and adding a much-needed link to change to another random photo instantly. I have made hundreds of changes around the site and some are significant.
One change worth mentioning is the reorganization of metadata. If you've visited this site with frequency in the past, you'll notice that the familiar breadcrumb navigation ("you are here: weblog," etcetera) that appeared at the top and bottom of the other designs is gone. I've also removed the links to the next and previous entry that appeared under the entry date on the individual entry pages. All of this data—and any other section-sensitive data—will appear in the now-more-fitting "Where am I?" section at the top of the sidebar. This area will contain useful information about your current location in the site and any additional information such as the next entry or the next archive. It also contains tips for better use of certain sections. This change, combined with a lot more white space around content, should make for a much less cluttered, easy to read site.
Another new addition—one that I've been working on for a while now but waited to implement until this new design was finished—is quick search. Available on every page but the index page (this is not necessarily permanent, but for right now I think it clutters the front page), this search box performs an instant search of all weblog entries' titles and content as you type. You'll see instant results that will help you find any entry quickly. Wrap your search query in quotes (") for precise results. I hope this comes in handy for you. The moment I implemented it, I began using it instead of the archives page. Should make it easier to find things from way back when.
Other notable changes are listed below.
General
- New Films section.
- All content items now have an optional summary. The summary (if available) will appear underneath the item's title (see this entries title and summary for example).
- Updated about section a bit.
Sidebar
- Section-sensitive. Shows specific content based on your location in the site.
- Links in the sidebar are always red.
- Now showing 5 "see also" items instead of 3.
- Showing more elsewhere links than before (only on index page and see also archive). Full list of elsewhere links is still available.
- Added "most recent entries" section to sidebar in appropriate places.
Entries
- Relative dates (example: "Posted 1 day, 2 hours ago") now only appear on the index page. All other pages will show true dates.
- If comments are closed for an entry, you'll now be able to see the number of comments (if any), rather than just "Comments closed."
- Posted on line is now smaller.
Comments & Posting
- Comments listing is much easier to read now.
- When I post a comment, it is highlighted.
- Posting form is simpler, easier to look at, and now has a better error-reporting system (if you try to post without a name, you will receive a specific error and if you're not using Safari, the name field will be highlighted).
- Full URLs (http://this.com) are now automatically converted to links if not wrapped in anchor tags. Thanks to endless help from Courtney getting lots of regexes written. I owe him lots of booze now.
- Added support for the <code> tag. Wrap any code examples you post in this tag and you'll see a properly formatted result (example: <code>echo 'test';</code>).
I'm sure there are other things I've changed, but I can't remember everything right now. Needless to say, a lot of effort went into this design and making it not only visually pleasing but also more functional and less cluttered than the last. I think I've succeeded, I hope you do too. I'm sure the site doesn't work in IE5/Mac or Opera—I'll get there as soon as I can. The other styles will be available again shortly; I have to fix them up to add new functionality and such.
As always, I appreciate your feedback.
Comments
There are 13 comments, comments are closed
Courtney on 07/26/2004:
Looks great! Congrats. The subtle changes work together to make this design feel more complete than the last. Much sleeker in my opinion. Testing:
<?= Regular expressions are fun.; ?>
Did it work?
Darice de Cuba on 07/26/2004:
I like this design more, mostly because of the header. A photo ads more personality in my opinion. The use of shadow is subtle, just right. Some websites tend to over use shadows. Overall a very nice design.
I'll be looking forward to your next design ;)
David on 07/26/2004:
Awesome! I came and my jaw dropped for a few seconds, honestly. Refined, tasteful, clean, crispy, a trully enjoyable experience. You get two thumbs up, in the Oscar(c) meaning of the expression. I am jelaous, as soon as I get into money —wife gets a job and so forth— I will do my best to hire you to do some work for me.
To sum it up: thanks for making web browsing on your site an unforgetable experience.
Jonathan on 07/26/2004:
Garrett... you are the master of refinements! Excellent job!
David on 07/27/2004:
Um, just so you know, code is a real tag, not a pseudo-tag. You could just nest it inside the blockquote instead of applying a class.
Garrett on 07/27/2004:
Thanks for the feedback, everyone. And David—you're right. I knew it was an HTML 4 tag, but for some reason I thought it had been deprecated in XHTML 1.1. I was obviously wrong, though, and I've fixed the site to use actual code tags. Thanks!
Shawn on 07/27/2004:
Garrett, you make God look like a cheap hack. Bravo.
David on 07/27/2004:
No problem, I'm here to help. Well, that and steal your ideas. :-) The redesign does look excellent, good job.
Janco Tanis on 07/27/2004:
although I might have liked the previous design better, the quicksearch is really really great! Never seen this before and it's also instantaneous!
Aaron on 07/27/2004:
Hey, I'm liking this new design. It fits even browsers as bad as mine. Great work, as always. Oh, by the way I like switching the master heads. Keep it up!
Ellie on 07/28/2004:
I like the new design Garrett. The quicksearch is very cool.... but what happened to 'recent comments'? I found that helpful.
Joshua Zika on 07/28/2004:
Just a note. The photo of 'this is not a photo opportunity.' Is a work of Banksy. He's quite the little star in London, part of the reason is, no one has ever really seen him. And his art is in the public eye 24/7. Check it out.
Hans on 08/02/2004:
Brilliant work, here. I probably would visually separate the various "scopes" of content in the right pane, but that's nit-picking... this is easily the new leader of design in my "steal ideas from these sites" list. ;-)