A Renewed Focus

—Monday, October 03 2005
I'm not one to do a redesign every month, but I decided to redesign my blog once again with a greater focus on content. I felt that the previous design provided a good balance, but needed some work to make the content truly stand out. I've also made numerous other changes to make things a little more enjoyable for my readers. ### Sidebar slimming and refocus The previous sidebar was packed with a large list of categories, links, and [del.icio.us](http://del.icio.us) links. This detracted from the content to much and made the site look cluttered. The new sidebar contains _Notables_, which are short blurbs of things I find interesting. This keeps the main content and site feed free of any two-liners. ### Bending Typo into shape Unfortunately, I had to do some hacking on [Typo](http://typosphere.org "Typo") to get it to do some things I wanted to do. I was able to keep this process sane with the help of [SVK](http://svk.elixus.org/ "Decentralized Version Control System") and a couple of [helpful](http://scottstuff.net/blog/articles/2005/07/07/distributed-development-with-svk "Distributed development with SVK") [artciles](http://article.gmane.org/gmane.comp.lang.ruby.rails/23701 "SVK tutorial").
  • Highlight-Search-3 Show those search terms: When you do a normal search (pressing the enter button while searching or searching from the footer) your search term will now be highlighted to help you locate those terms. I was also going to do this for Live Searches as well, but Typo's caching system made this a little more involved that it would normally be.

  • Css-Highlight CSS syntax highlighting: I wrote a simple CSS highlighting extension for Jamis Buck's very nice Syntax Library. Syntax is pretty easy to extend once you get a hang on some of the basics. I plan on polishing this a bit more and releasing it pretty soon. Perhaps Jamis might be interested in including it with Syntax.

  • Live-Preview Live comment previews: Typo comes equipped with a preview comment feature, but I wanted to provide live comment previews as you type. This wasn't hard at all considering we already do this when your writing an article from the administration.

### Fruitful footers After a much needed [slap in the face](http://www.powazek.com/2005/09/000540.html) (_Thanks Derek!_), I have embraced my bottom as well. After reading Dereks article, I realized that I had been so ingrained in the way things were that I haven't thought twice to do more with my footer.

Derek Powazek wrote:

It's time we designers start thinking about page footers as part of the experience design of a complete site. The bottom of a page is the kiss at the end of the date - and we're making sites that end without even a handshake.

Inspired by Derek's footer, I started jotting down ideas on how I could get the most out of my own footer. I knew I wanted the ability to search, browse by date and category (_especially now that I removed this functionality from the sidebar_), and some context sensitive information.
  • Previously Previously Posted: I wanted to show about 5 full-text articles and links to 5 previously posted articles. This was a pretty simple addition to the articles/index.rhtml file. Now I just need to loop over @archive to provide a list of semi-recent post.

    <% @archives = @articles.slice!(5, 10) if @articles.size >= 5 %>

  • Browse Searching and browsing: You can now browse by category or month/year from the footer. Also, when your at the bottom of the page you no longer need to scroll to the top again in order to search. This is a must have for any fruitful footer. I assume you'll be giving your footer some much needed TLC--right?

  • Flickr flickr fun: What footer wouldn't be complete without a few of your favorite photos? I decided to do a little justice for my pro account and round out my footer with some thumbnails from flickr.

    Static caching, once again, causes problems with this that I plan on looking into. Once a page is rendered with images, these images will always be the same until the cache is swept :-(.

  • Related-Articles Related articles: Typo has the feature to tag articles. In my last design I listed these tags when viewing an article. With the new design I decided to use tags transparently--after all, tags are there to help users find articles that are related to each other; Why not find the articles for them?

    With a little help from Peter Cooper's Snippets code (Thanks Peter!), I was able to add this feature pretty easily.

      def self.find_related_by_tags(article_id, num)
    		# Find posts which have as many of the same tags as possible
    		self.find_by_sql("SELECT p.*, COUNT(pt2.article_id)  AS count FROM #{Article.table_name} p, #{Article.table_name_prefix}articles_tags#{Article.table_name_suffix} pt, tags t, #{Article.table_name_prefix}articles_tags#{Article.table_name_suffix} pt2 WHERE pt.article_id=#{article_id} AND t.id = pt.tag_id AND pt2.article_id != pt.article_id AND pt2.tag_id=pt.tag_id AND p.id = pt2.article_id AND p.published != 0 GROUP BY pt2.article_id ORDER BY count DESC LIMIT #{num};")
### Summing up There are numerous other bits that I've added; Have a look around and see for yourself and you might find a few surprises. If you happen to find any bugs please let me know.