October 2nd, 2005

A Renewed Focus

10 comments on 2104 words

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 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 to get it to do some things I wanted to do. I was able to keep this process sane with the help of SVK and a couple of helpful artciles.

  • 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 (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.

    1
    2
    
    
    <% @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.

    1
    2
    3
    4
    5
    6
    
    
      
      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};")
      end
    

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.

Discussion

  1. topfunky topfunky said on October 3rd

    It looks fantastic!

    I love the little touches, like the circular icons for “Post Comment”, etc.

    My only criticism is that the live comment preview is a little jarring when the input box jumps down a line because of the preview. Maybe it could load on the side?

  2. Justin Palmer Justin Palmer said on October 3rd

    Thanks Geoffery! I’m not sure if it needs to run down the side or what, but I do agree (now that you’ve pointed it out) that it needs some adjustments.

  3. Tracey Tracey said on October 4th

    Excellent redesign and use of the typo blog engine. I predict that typo will overtake Wordpress in the future. The possibilies for customization are endless.

    I havent seen the live preview before. This is fantastic!

  4. Alex Beard Alex Beard said on October 4th

    Very nice job with the redesign. The colors, typography, and composition all seem to flow very well.

    This definitely has given me a little bit more incentive to speed my redesign up a bit.

  5. Stephen Haberman Stephen Haberman said on October 5th

    Very cool…I like the big “RSS Subscribe” icon. I usually have a devil of a time finding it on other sites.

    The footer is nice too, I like the blue-ish color scheme.

    Constructive feedback, on my laptop (1024×768), in Firefox “A Renewed Focus” has a line through it connecting over to the “RSS Subscribe” icon. And on IE, the sidebar is pushed all the way down to the bottom (my guess is because of the find_by_related_tags code snippet which for my IE doesn’t wrap/have a scrollbar like Firefox but instead makes the content column very wide, apprx. 4x the width of my screen).

  6. Justin Palmer Justin Palmer said on October 5th

    Stephen, Thanks for the comments. I really need to get my Windows box up and running again so I can test this design.

    It’s strange that Firefox Win renders differently than FF on the Mac.

  7. Alex Beard Alex Beard said on October 5th

    I noticed that as well. It’s almost a turqouise 1ppx solid line running straight through. This was on Firefox/Win XP

  8. Ezra Ezra said on October 5th

    Looks great Justin. Love the footer.

  9. Michael Hessling Michael Hessling said on October 13th

    This is the best Typo design I’ve seen yet. Fantastic. The footer is especially nicely done. I’ll have to get my own Typo installation up and running. And soon.

  10. cboone cboone said on October 28th

    Yeah, the site looks fantastic Justin. Very nicely done.

    Regarding the flickr caching issue: I’m just now finishing a small project - that unfortunately isn’t officially live yet, so I can’t point to it - that faced the same issue. The site is an aggregator, and almost all the content is cached and swept hourly. But - basically so that demos of the site can look good and very alive - I decided to load the flickr feed asynchronously.

    That gets around the caching issue, and means that there’s no possibility of timeouts from flickr not responding in a timely manner.

    Seems like one of the best real uses of Ajax I’ve come across.

    Anyway, you might consider the same thiing for your footer; especially since by the time a reader gets to it, it will probly have loaded, and thus no one will ever know. ;)

Sorry, comments are closed for this article.