CoffeeScript and Alternative Navigation

Oct 4, 2010
Episode 39
This week, Jim shows you how to clean up your JavaScript with CoffeeScript, and Nick revisits navigation design patterns. Also, we're in London.
Spotlight

Thanks to those who make Doctype possible!

CoffeeScript

CoffeeScript is a language that compiles into JavaScript. It allows you to leverage the same features of JavaScript, while adding syntactic sugar that makes developing in JavaScript faster and easier.

Find out more about CoffeeScript and check out the code samples here

Alternative Navigation

Breadcrumb navigation is a list of links going from left to right, usually separated by arrows pointing to the right. Going from left to right, each link takes you one level deeper into the site. Breadcrumb navigation is very useful when your site is very deep. If there are a lot of pages and your site features a complex architecture of information, you can give your site visitors a much better picture into the structure of your site, if you provide them with a visual map of where they are. Breadcrumbs are also very useful when the site navigation isn’t readily visible. For example, at http://www.apple.com/imac/specs.html the breadcrumb trail is at the bottom of the page, where the top level navigation isn’t visible.

Read more about breadcrumb navigation here: http://developer.yahoo.com/ypatterns/navigation/breadcrumbs.html

Progress Bars

Progress bars are actually very similar to breadcrumb navigation. A progress bar consists of a list of horizontal links going from left to right, with arrows pointing to the right. The difference is, rather than indicating how deep a user is into your site, progress bars indicate how far along a user is in a particular process, like signing up for a new web service of checking out of an e-commerce store.

Read more about progress bars here: http://developer.yahoo.com/ypatterns/navigation/bar/progress.html

Tag Clouds

Tag clouds are a very interesting form of what I would consider to be experimental navigation. Over the past couple years, tag clouds have really caught on, and are especially popular on blogs and websites that are very heavy on content. They’re even pretty fun to program and write the CSS styling for.

In some cases, tag clouds are actually pretty nice because the improve discoverability. When there are just a few links, and the font sizes aren’t too distant from one another, as in this example, it’s easy to get a sense of what this blog is about, and what some of the popular topics are. However, I’m going to recommend against the use of tag clouds. They’re useful in some situations when the number of tags and the styling is very well controlled. They become problematic when the styling is poor (which it usually is), because they just end up adding clutter to the page.

Read more about tag clouds here: http://developer.yahoo.com/ypatterns/social/objects/collecting/tag/cloud.html