Andrew Ingram

New Website: Design Decisions

Posted on .

An explanation for some of the design decisions behind my new site.

One of the first things that might strike you about my new site design is that it's simple, very simple. This was a decision motivated by a number of factors. The first, and perhaps most important, is the fact that I wanted to get something launched quickly.

I've always struggled with spending time on web development projects outside of work. This is largely due to me being a bit of a perfectionist and feeling like my personal website should represent the very best of my abilities. This website alone has been partially rebuilt a half dozen times without ever seeing a release. With the new year I decided it was time to get it built and launched. My new mentality is that this doesn't have to be my best work, so I avoided worrying about any functionality that I might need at some point in the future. This means I only designed and coded what was needed to get the site live.

Launch requirements

  • A very simple blog system, No categories or tagging, and no comments. I'm not actually opposed to having comments on my site. But in my experience richer discussions tend to happen on Hacker News and Reddit, so I want to encourage that instead.

  • All old content should still exist, but be hidden. As mentioned in the previous post, I'm treating this rebuild as a fresh start. So the old content is hidden from the archives and even given the noindex meta tag. I also put redirects in place to map all the old Expression Engine blog post URLs to their equivalents in the new system.

  • The site must be fast. For a site as simple as this, there's simply no excuse for any page taking nearly a second to load, as was often the case with the old site. My use of TypeKit does cause a few problems here because it blocks page load until the script has loaded, I'll be revisiting this once I've done some reading about solutions. I'm very happy with the speed of the new site, with most pages only taking a couple of dozen milliseconds to render.

  • Good URL schema. I've become a bit of a URL purist in the last few years, and my last site was setting me up as a bit of a hypocrite, so this time I've done my best to get it right. This means that no URL segments that only serve as namespaces rather than real pages, good slug generation, etc. With a site this simple, it was pretty straightforward to implement this.

  • Large font size. Like many before me, I'm a big believer in the arguments put forth in this article that text on screen should be bigger than in a printed book. This, combined with the fact that I personally have poor eyesight, meant it was a no-brainer to go with large type.

  • A strict baseline grid. Good typographic rhythm is a major component of legibility and contributes significantly to aesthetics as well. It's easy to do, even if my use of ems meant a few calculations, and makes such a big difference. Once I implement the functionality for asides, I may even go crazy and use incremental leading.

  • Use a legible serif typeface for body text. I'm currently using Adobe's Chaparral Pro (actually a hybrid slab-serif), hosted by the excellent TypeKit. It was one of the few I found that stays fairly light even at large sizes. I'm using Times New Roman as the fallback because it seems to have similar metrics, which makes the switch to Chaparral less jarring in browsers like Firefox.

And that's more-or-less it. I plan to keep working on it, particularly the aesthetics. I might have given the impression that I'm opposed to graphical touches and imagery, but it was simply a case of not considering them launch-critical. I look forward to adding a splash of colour and tweaking the layout here and there.

Inspirations

I was heavily inspired by Idan Gazit's new site, he is one of the valuable few who effectively straddle the line between designer and developer. Past sites by Garrett Dimon, Nathan Borror and Wilson Miner have also had a big influence on me, my obsession with the content-out approach to web development started with these guys.

Next time I'll be talking about the technical implementation of the site.