Hacker News Restyled: a new extension for Chrome and Safari

Social news site Hacker News has come a long way from its modest roots in 2007. It has diversified its subject matter (though tech and startups still dominate) and in the process has become essential reading for developers, designers and entrepreneurs. I scan HN headlines regularly, at least once every day. Unfortunately, the site’s design is a total eyesore. There’s inadequate line spacing, poor use of typographic hierarchy, little contrast, and comments that stretch out too much – it’s better on the eyes to read on narrower columns.

A simple Chrome or Safari extension that restyles HN’s look is an obvious choice and there are many popular options out there. Yet few address how I tackle HN so I decided to create my own: You can download the Chrome variant at the Chrome Web Store and the Safari extension is available as a direct download on Cloud. You can find downloads and source code for both at my GitHub.

I like to make Hacker News as scannable as possible; I usually ignore comments, point totals and other article stats. To emphasize this I adjusted typography; headlines are bumped up to 24px Helvetica. All other text is secondary and set to 14px or smaller.

Many other extensions are minimal to a fault; there’s little contrast or division between headlines. That cuts down on scan speed as you scroll down a web page. So instead I went in the opposite direction: I added extra white space between articles along with soft gradients to emphasize splits between headlines. I also shifted HN’s color palette away from sepia and oranges to neutral, soft whites. Branding aside, neutrals are just more comfortable to browse through for longer periods.

Note that while I’m not so much into HN article stats, they do help measure “hotness” and article popularity. It’s a lot easier to scan these stats visually instead of deciphering HN’s default view with several tiny numbers crammed next to a headline. To achieve this I swapped out the numbers and replaced them with multi-colored, CSS3 based bar graphs. They automatically appear when mousing over an article and display points (red), comments (yellow) and article age (green). To get a quick snapshot of what’s hot you can tap ‘s’ to turn all article graphs on at once.

Overall, my extension is a slightly different slant on Hacker News than what’s already out there. It’s not for everyone, but if you read HN I encourage you to check it out.