Control on the Home Page

Published in Fiftyfoureleven on Monday, July 5th, 2004

We've revamped the homepage of our blog; something we've wanted for a while now. We're hoping it makes getting thru our blog a little easier.

Well, it's been a long time coming! We've been after this sort of 'control center' on our homepage ever since we saw the unused Kinja mock-ups and then their use over on Textbased.

The missing link

The missing factor all along has been that we hadn't implemented the categories for the blog until last week. Up until that point we didn't have any content for the middle column; sure we could have created a link blog, however we want this part of the homepage to be a type of 'entry panel'.

Entry panel

The idea is that when users hit the homepage after reading a post, where they have likely arrived via Google or an external link, they have everything they need to find more content that may interest them:

Let us have it

We'd love to hear what you all think. The last iteration was heavily criticized for looking like Google Adsense though it was just a temporary step to what you see now. Let us know what you think via comments or send us an e-mail.

Comments and Feedback

Excellent - it exactly meets the three likely User Needs of site visitors, and all above-the-fold.

However (constructive criticism):

  • a stronger variation in colour-scheme between the three columns may aid in giving the impression that each represents a different way of interacting with the site;
  • I love the hover effect you've used in the sidebar - why not use that for the excerpts on the homepage?
  • Yuck - style those default list bullets!
  • The 'Worth a Look' column would benefit from an indication of how many comments there have been, and the date the article was posted (in fact the same holds true for the 'Recently Written' column too);
  • My expectation (based on other blogs) is that I can click on the article title and it will link to the permanent entry - yours doesn't.

The pre-filled comment form is (IMHO) a bad idea too - how many comments are "you" going to end up making? (I know it's in the WCAG, but that guideline is pretty much guaranteed to be dropped for WCAG 2.0 so I think you're safe to ignore it)

Sorry, went off on a bit of a negative tangent - overall the 'control center' fulfils its purpose, particularly in the aspect of meeting our (your users') needs.

Looks like the XHTML parser needs a bit of work too! (who knows all the correct quote entities?) The comments form also failed to remember me.

Matt, thanks for the feedback. I'll answer with an ordered list...

  1. I've added a slight variation for now, but you're right; I may increase the contrast...
  2. I was using this hover effect before, however I found it to be too much of a good thing. Personal taste I suppose, though the four of us here were somewhat in agreement on this.
  3. Nice, on the to-do list.
  4. This too.
  5. Good point, will do.

I'm not sure what you meant with the pre-filled bit, though I was experimenting with some caching over the last few days and the last person to comment wound up having their data stored in the comment form. I've disabled caching for now until I can do something a bit more sophisticated.

Entities, perhaps I can put a list. You should be able to post quotes and double quotes without using entities.

The comment form should remember you now (likely do to the caching thing mentioned above). Give it a try, if you want.

Great feedback, thanks a lot for taking the time!

Yup, comment form remembers me this time!

I'm guessing the entities problem is something to do with the UTF-8 issue..?

  • '
  • "
  • "
  • &

Quotes are appearing correctly in preview... (hits Post and crosses fingers)

PS: Need to add li to the list of allowed tags. :)

Thanks Matt, I'm tweaking things right now. I really appreciate the feedback.

Okay, made some changes. Seems a bit busy to me, but I've been looking at it for too long...

I recieved an e-mail from someone concerned that this homepage smacks a lot of Douglas Bowman's Stopdesign homepage.

While I'll admit that yes it is similar, there are a few points to be made:

  1. This has been in the works for a while, since well before the Stopdesign Reload. We were a bit too busy to code up the categories for the center column; we almost swithced to WordPress due to the lack of time to program our blog!
  2. This was originally inspired by the three column footer over at Whitespace, and some of the rants within.
  3. The search box, front and center, makes sense: I chose Minz's because the search box was most effectively presented in the very center of my field of vision.
  4. Three columns, stuck into 750 pixels, are bound to be similar no matter where you use them. Same goes for 'read more' links and their associated arrows.

For us this makes sense, much like the very common two column layout seen in many places these days.

I like it. And I don't think it's too "Stopdesign-ish" -- even if it were, that'd be a good thing as it's a great site!

I think it's cool and interesting how people are trying out new ways to design blog type sites. Makes me kind of wish I had time to redesign my own site...but I guess it works pretty well for me.

Anyhoo -- I don't have anything constructive to say except, "nice work!"

Kind words are always constructive, more for the person than for the site, in this case! Thanks Keith.

The 'Category Archives' list on your archives page was what I was looking at when I thought 'hey, maybe that'd work on the home page'.

WRT 'Blog Innovation', I've thought for awhile now that the two column format is here to stay. It's these little UI bits where there seems to be a window for the innovation.

Awesome Mike, I really like what you've done with the three columns. They represent a good "doorway" into your content.

However, I would suggest that you spin off the three columns onto a page of their own - the home page. In my (humble?) opinion, there's way too much on any given page now and the pages seem to be very top-heavy.

I'd also consider that percentile that doesn't go "below the fold" - the main focus of the page, the article, has a full screen of content ABOVE it! This doesn't feel right.

Hey Jonathan, thanks for the feedback. I agree with you that it doesn't 'feel' right, but this is a tough one.

This whole change was inpired originally by the three column footer over at Whitespace. It makes a lot of sense there, as it is positioned below the articles. So naturally when you are finished reading it's easy for one to go somewhere else.

The common method for blogs to be laid out is to have a home page that has all of the latest 'News' on it, with permalinks should you want to link to the story. These days, though, with RSS readers and the like, the actual permalinked page gets hit more than the homepage.

So what to do?

In the end I decided to leave some content on the homepage. That way, those users who do visit the site to read the article don't have to click twice to get to the new stuff. Other visitors who arrive via Google etc. and hit the homepage after having read an article don't have to click to far away either.

This bit going around about long homepages is fluff as far as I'm concerned. Scrollwheels work well, and our homepage is cached and compressed, so I can't see people complaining about a wait for it to load.

At any rate we're keeping an eye on things. Hopefully people will give us more feedback as time goes on. Maybe we should remove the articles from the HP just to see if it lures any peeps into complaining!

I've been meaning to respond here for a while, but I didn't manage to do it yet!

I very much love your control center, but have to agree with Jonathan. I'd take out the posts as well. Regarding me, I seldomly access your site through the home page. I rather am taken directly to the individual entry by my Feed Reader. And so would Google visitors, I guess. Maybe you could incorporate the homepage's sidebar ("Recent Comments", Archives and About) into your control center as well and strip off the complete entries. Would be worth an observation, but reading your previous comment I guess you are already thinking about it and making observations.

Speaking of individual entries. Let me say that your sidebar there is one of the best organized and most informative blog sidebars I've seen so far. Very well done!

Minz, thanks for the kind words!

We'll see how things go with the home page. If the posts are stripped out, we could certainly add some other stuff there like recent comments and heck, even a 'link log', as our programmer (who was going to write posts) has indcated that a link-log would be better for him in terms of time.

Home » Blog » Fiftyfoureleven

Check out the blog categories for older content

The latest from my personal website,

SiteUptime Web Site Monitoring Service

Sitepoint's web devlopment books have helped me out on many occasions both for finding a quick solution to a problem but also to level out my knowlegde in weaker areas (JavaScript, I'm looking at you!). I am recommending the following titles from my bookshelf:

The Principles Of Successful Freelancing

I started freelancing by diving in head first and getting on with it. Many years and a lot of experience later I was still able to take away some gems from this book, and there are plenty I wish I had thought of beforehand. If you are new to freelancing and have a lot of questions (or maybe don't know what questions to ask!) do yourself a favor and at least check out the sample chapters.

The Art & Science Of JavaScript

The author line-up for this book says it all. 7 excellent developers show you how to get your JavaScript coding up to speed with 7 chapters of great theory, code and examples. Metaprogramming with JavaScript (chapter 5 from Dan Webb) really helped me iron out some things I was missing about JavaScript. That said each chapter really helped me to develop my JavaScript skills beyond simple Ajax calls and html insertion with libs like JQuery.

The PHP Anthology: 101 Essential Tips, Tricks & Hacks

Like the other books listed here, this provides a great reference for the PHP developer looking to have the right answers from the right people at their fingertips. I tend to pull this off the shelf when I need to delve into new territory and usually find a workable solution to keep development moving. This only needs to happen once and you recoup the price of the book in time saved from having to develop the solution or find the right pattern for getting the job done..