A Renewed Focus
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.
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 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 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:
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.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.
-
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.rhtmlfile. Now I just need to loop over@archiveto provide a list of semi-recent post.1 2
<% @archives = @articles.slice!(5, 10) if @articles.size >= 5 %>
-
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 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: 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.
Sorry, comments are closed for this article.


Discussion
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?
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.
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!
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.
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).
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.
I noticed that as well. It’s almost a turqouise 1ppx solid line running straight through. This was on Firefox/Win XP
Looks great Justin. Love the footer.
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.
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. ;)