« Blogs as Stores: A Comprehensive Overview of Ecommerce Solutions for Bloggers | Main | The Easy way to get audio, video, podcasts and photos posted to your blog »

John T. Unger

AHA award for David Smith's ToyTalk blog

John T. Unger August 23, 2007

Aha It's been ages since I handed out an AHA award, but David Smith's ToyTalk blog is definitely deserving! David hired me recently to do a couple hours consulting on how he might increase the stickiness of his blog and build his reader base. Although much of the advice was about social interaction, I also suggested some design ideas and features he could add that might make his blog a better resource.

David did all the coding himself, mostly using tutorials from here as well as articles from the Knowledge Base. But there were also a few things he had to figure out on his own, and he's done quite well with that. My favorite thing he's done is the implementation of my suggestion for his category list in the sidebar.

I almost always suggest using a drop down menu for categories to save space, but in his case I thought it would be fun to add little toy icons to the category list. Since toys are so visually appealing, the icons turn the category list into an exciting menu that should drive a lot more clicks to his archive pages. It looks even better than I expected, so I think this is something that I'll suggest more often in the future. The next step would be to create slightly larger icons that can be used in the title of posts to display the category… With a little CSS and template modification it wouldn't be too hard (take a look at the tutorial on styling author comments to get an idea of how this might be implemented). You could also take a look at the CSS for Michael Sippey's recent redesign of his blog for some ideas.

David emailed me to say that he's got a bunch more new features that he's working on adding. I'll definitely be checking back to look at his progress. Nice work, David!

More Like This: AHA: Applied Hacking Awards

Tags: , , ,


Sarah says:

I would really like to know how to put tabs at the top like he has...that is excellent! If I had a static website, I'm sure I could find & purchase a template that did something like that, but not being a designer/coder, I have no idea how to implement this in TypePad. And TypePad doesn't offer any templates that look like that - it has to be hand-coded, doesn't it? I can't even find a good TypePad designer who doesn't charge thousands of dollars for a one shot template creation/installation.

Debra Hamel says:

I love the icons in the category list. And the site as a whole looks nice. Two small suggestions for improvement: 1. Make the links change color when you move over them. It's a visual reassurance that you're hitting the link. You don't have to check in the status bar to make sure you've done it. 2. I like the tabbed menu at the top but it might look better if it were separated from the top banner, either by a white line or, probably better, if the tabs were a different color from the banner. For example, they might be light pink when not active and hot pink when hovered over.

David Smith says:

Sarah - thanks for the kind comments about ToyTalk. ToyTalk is built using Advanced Templates in TypePad. I had no idea how to do any sort of coding when I started out and the site was much more basic 18 months ago. I have since implemented many hacks, including a lot from this site, to improve the design and navigability of the site. As for finding someone to help you set up a navigation bar across the top of the blog, John offers this for a very reasonable fee in his 'Hacks for Hire' section. There's a DIY tutorial as well if you feel like trying it yourself.

One tip - I have a 'dummy' blog that I use to test out any design changes. I always start out by trying new code on this dummy blog so that if it all goes haywire it doesn't hurt my main site. TypePad allows multiple blogs so setting up a dummy is easy.

Debra - thanks also for your kind words. Funnily enough, when I view ToyTalk in Internet Explorer there is a white line between the nav bar and the banner. In Firefox the line disappears! I'm not a good enough coder to know why this happens, I'm afraid...

I really like your idea about switching the colours on the nav bar to be pale pink when not highlighted. I'll try this on my dummy blog and see how it looks!

Joan Stewart, The Publicity Hound says:

I love your suggestion for the icons next to the category names. This idea can work well at blogs devoted to lots of other topics, too.

Also, John, I found your recommendation for a drop-down box for categories interesting. That's what I have at my blog at PublicityHound.net (WordPress) and I'm always afraid that new visitors won't understand that they need to click on "Topics" to see all the categories.

john t unger says:

Hi Joan,

Thanks for stopping by!

The trick with using icons is that they need to make immediate sense (which can be harder with abstract concepts) and need to display clearly at a small size. If both of those requirements are met, I think they're a very enticing and attractive way to get people to view more of the older content

Drop-down menus present an interesting problem as well… Initially, I wanted to minimize the amount of space taken up by categories and date based archives to make room in the sidebar for stronger, more important calls to action (or, for some bloggers, things like advertising designed to monetize the blog). But lately I've been re-thinking this a bit because I'm coming to realize that making it easy to browse the archives is the best way to keep readers on the blog and get them more involved. The archives themselves may actually be a much better source of revenue in the long run than some of the more obvious calls to action.

One solution I've come up with recently is to integrate the drop-down archives with the search field under a broader sidebar heading of "Search." You can see an example of this at Debra Condren's new blog which is in the final stages of design this week. I was happy enough with the way it worked out that I've also applied the same technique on most of my own blogs. I'll be checking the stats to see if it has the desired effect.

suzuki says:

Hello! This blog that it was difficult as for the English for the Japanese who watched blog of English study in various ways now that it came from Japan was interesting

The comments to this entry are closed.


TrackBack URL for this entry:

Listed below are links to weblogs that reference AHA award for David Smith's ToyTalk blog:

typepad hacks is a typepad featured weblog typepad hacks is listed on Alltop social media


Email RSS Comments  
Subscribe to TypePad Hacks with email Read TypePad Hacks posts via RSS Join the conversation at TypePad Hacks via RSS (comments feed) subscriber count



Twitter Logo
    follow typepadhacks on twitter

    Read and reply to the 100 most recent comments at the TypePad Hacks Community Page



    Powered by TypePad
    Member since 03/2005

    TypePad Status

    Creative Commons License