Refactoring a Website Design (21st September 2013)

I don’t always link and comment other articles. But when I do, I make sure they are awesome.

Ian Storm Taylor writes about Refactoring Github’s Design, drawing similarities with good code maintenance. It’s a bit like realigning instead of redesigning but gives permission for larger changes so long as they reduce and rationalise the end result. With examples.

By applying these technique to GitHub’s new design, it reveals several ways to streamline the design. It uses small tricks to open up fiddly areas. It creates a more generous rhythm. All whilst retaining features!

Some of this can be credited to simply spending more time to come up with a better solution. However, limiting the choises to visual gardening rather than developing a new look and feel is what makes this refactoring a lot like looking after code. This is not creating a new platform: this is tidying up and applying best practice to the existing platform.

A few choice paragraphs below.

That’s a lot of different ways to visualize the same idea. All of those different treatments make the page feel more cluttered. Unless you have a good reason for making visual elements slightly-different from one another, you should default to keeping things consistent.

Inconsistency isn’t limited to appearance either. I often end up with a design with duplicate content that could be combined if I just came up with a better abstraction. A good example of this is the repo’s name and file path:


There’s no reason we can’t combine the two instances of “analytics.js” into a single path. And then, since we’re working in an interactive medium, we can do things like shrink the font-size for long file paths.

I say “for some reason”, but the reason’s actually obvious: GitHub needed a place to put that button, and the toolbar was right there! Adding an extra button was trivial. But that’s why an interface needs to be refactored every so often, just like a codebase. Quick fixes are great in the heat of the moment, but over time you build up debt that reduces the quality of your product.