NodeUP three column scrolling


If you’ve been following this blog a little, knows that I have a crush on node.js. I’ve found a node.js podcast, nodeUP and on their site they have a pretty interesting layout, which I quickly want to get into.


Column 1:

This column just holds the logo, some contact and subscription info, it’s fixed and does never scroll, unless you’re on a twenty year old screen or something.

Column 2:

This might actually be the most interesting, containing a list of published episodes. What else is genius about this, is that the twitter profile pictures of whoever is in the episode is under it. That’s great, especially for this developer community, because they often are active on twitter, or maybe have the same picture on github. At first glance you see who you might be interested in hearing talking on the show and clicking the corresponding show.

Column 3:

Column 3 shows the topics of the episode and has an HTML5 audio player. Sadly the topics don’t have a mark at which point they are in the file, but here the profile pictures actually link to the corresponding twitter profiles.

Whenever you hit the bottom of the third column, the middle one still keeps scrolling and as soon as you scroll up again, both 2 and 3 scroll up, so they are loosely paired, depending on which of them is longer. I find that’s not a bad idea, you just have to focus on the area that moves, which is not too hard because our attention is drawn to moving objects anyhow.

Summing up

I personally like this and also that it’s different, because everybody keeps using that same vanilla WordPress theme all over and this is a very lightweight approach, that kind of stands out a little.

What do you think about this? Is it confusing or a good idea?

Thank you for reading! If you have any comments, additions or questions, please leave them in the form below! You can also tweet them at me

If you want to read more like this, follow me on feedly or other rss readers

Leave a Reply

Your email address will not be published. Required fields are marked *