The Celebrated New Miscellany of Mr. Simon Collison

Mr. Simon Collison

Even though it’s early in the year, I’d venture to say that this is one of my favorite designs this year. I’d be surprised if it didn’t make it into most top 10 lists at the end of the year (wink, wink).

I believe the beauty of Simon’s redesign lies with his successful translation of Ben Schott’s Miscellany. In his excellent process post Simon details his fascination with the book, and I believe his redesign really embodied the sense of irreverent sophistication. Just looking at his blog, I couldn’t help but want to speak in a British accent and wear a top hat (ok, maybe not). Simon knew what he was going for, and I think he pretty much nailed it.


Widget Fig 1. A widget forms a basic grid unit

As far as I can tell, Simon did not use grid unit numbers that are defaults for most CSS frameworks. There may be more columns/units at play, but the basic four-column structure is clearly evident in his “widgets” — for lack of a better word. The widgets delineate a 228-px column that is also the width of his sidebar. It’s a curious choice, though, since the elements don’t really align with the underlying 10px (or 11px if you count the lines) grid background.

However, most interesting was Simon’s treatment of the main body — the column of text was not centered in its container. The #content_pri div had a right and left padding of 110px and 87px, respectively. I am not entirely sure of the reason (any enlightenment is appreciated!), but it works. It did not detract from the design, and my best guess is that the offset evoked the pages of a book.


The design breathed new life into Times New Roman. I must admit it was a brave choice, given that the typeface is ubiquitous among Word documents. As Simon himself noted, he used various styles to spice up the typography. For example, the titles for the widgets (see “Twitter Happier” in Fig 1), were given a 1px letter-spacing and set in small caps. The small caps were not set using the font-variant: small-caps rule, but rather with text-transform: uppercase and a larger font size for the first letter. As far as I can tell, on the Mac, the two methods yielded similar results. However, there is no such guarantee on Windows.


My criticism for this site, if it even counts as such, would be the fact that I’m not entirely sold on the use of footnotes in blog posts. Despite that, I honestly can’t think of a better solution as pop-ups and rollovers get annoying. Simon has made footnote hunting very easy — smooth scroll-downs and scroll-ups put you right back into the flow. It certainly beats searching for footnotes in print.


I’ll have to admit that this design was a strong motivator behind my own redesign. Not that my redesign can compare, but I did draw some inspiration from it.

The redesign could have gone in other different directions, but Simon chose one that really exuded a unique personality. His redesign was indeed a sophisticated one.


There are no comments yet

In Association With