A new site design

As will be immediately obvious if you’re reading this in a web browser, I’ve redesigned mattgemmell.com – yes, you’re still in the right place!

As I’ve mentioned previously, this blog is built and deployed statically with the wonderful Octopress. The distribution includes a default theme which you’ll no doubt be familiar with. Here’s how this site used to look, using an only-very-slightly tweaked version of it:

Previous site design

I’ve wanted to change that theme for some time now, and I’ve finally been motived to do it by the clean, readable presentation of The Magazine, Medium, and indeed the new Loop Magazine (I wrote a piece for the inaugural issue, you know).

I recently happened upon Aron Cedercrantz’ Octopress blog theme on github, and liked the style very much. I’ve made a number of changes to it, as follows:

  • The header has been redesigned.
  • The typography is now serif-based, rather than sans.
  • The theme is now more responsive to varying screen sizes and devices.
  • I’ve integrated the default Octopress theme’s responsive mobile navigation.
  • I added my footnotes popover functionality.
  • Purple is my favourite colour, so it’s the active/hover link colour rather than the usual blue. I’ve kept the dark red visited-link colour, for contrast.

I’ve also taken this opportunity to clean up elements on this blog itself:

  • The header navigation has been simplified.
  • I’ve made my About page a bit briefer.
  • I’ve removed (almost) all sidebar elements, except for the one and only ad.

I’m very happy with the new theme, and hopefully you’ll agree that it’s an improvement. If you’re reading this via my RSS feed, here’s a picture of the new design:

New design (Mac)

It should also work well on your beloved iOS devices too, as the following screenshots show. The article shown in each screenshot is Staying Afraid.

iPad, portrait and landscape

New design (iPad, portrait)
New design (iPad, landscape)

iPhone, portrait

New design (iPhone 5, portrait)

(I like how “Matt” tucks in above “Gemmell” in this layout.)

iPhone 4 or earlier, landscape

New design (iPhone 4, landscape)

This layout uses the mobile navigation popup-menu, to avoid having lots of tiny links.

iPhone 5, landscape

New design (iPhone 5, landscape)

The additional horizontal space on a landscape 4-inch display allows the full navigation to be shown.

There are inevitably some rough edges, of course, and I’ll be continuing to test and tweak the design over the coming weeks. I hope you’ll find the new design more pleasant to read and browse.

My hope is that the cleanliness of the design will not only be more comfortable for you, the reader, but will also encourage me to improve my writing’s focus, succinctness and indeed frequency. In the worst case, it’ll at least look that way.

As ever, thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *