Notas de un Peregrino
Contact

Redesigning the blog ~ Pt.1

July 15, 2011
By Hernán Rodríguez Colmeiro
Under:
webdev

Recently I found out that I was using the readability plugin just too much on the web. Almost every site with content that interested me had such a poor design that I ended up using that service to be able to read them. So my thinking was "OK, that is something I can't do much about, let's just use readability and that's it"... But it turned out that it wasn't quite correct.

I could do some stuff on my side: Making sure my blog didn't fall in that category. So I went back to my old blog, and took a look at the design.

The less I can say is that I was shocked.

I knew I never cared too much about my blog design, actually the design was chosen from a list of free-pre-made Wordpress themes, but that was just too much. Impossible to read, enless scrolling on the mainpage, too many colors... It was one of those sites I would right away click on the Readability button if I was interested in reading something.

As I was clearily failing in my attempt to make the web a bit better, it was time to take action.

Learning about readability

The first thing I had to do was to redesing that blog, and make it something I would like to spend some time reading without any 3rd party service helping me. But in order to do that I needed to know about designing with readability in mind.

I decided to do a bit research on the subject of readability... and ended up spending a whole Saturday evening reading about typography, readability & graphic design, et. al.

I found a bunch of interesting resources, and learned a lot. Some of the sites I found really useful were the following:

That post on the Space theme blog was by far the most useful and interesting of them all, having a lot of examples and written for begginers.

From reading to action

So, to fix my blog all I had to do was to change the theme to something more readable. And, alas, I even got a very good theme available for wordpress: Space. But for some other reasons, I didn't choose to buy Space:

  • I don't enjoy php
  • As a side effect of the aforementioned reason, I wanted to get rid of Wordpress
  • I enjoy python and javascript
  • As a side effect of the aforementioned reason, I wanted something different
  • I'm cheap
  • As a side effect of the aforementioned reason, I was not going to buy Space

Also, as I'm an open source enthusiast and I like to learn new stuff, I decided to go my own way and then release everything under the MIT license.

Getting ready for the job

After spending some months working at Mozilla, I was curious about if I could apply some parts of the workflow used there into something smaller. The basic workflow is:

  1. Write your code
  2. Get it reviewed
  3. Push it to the repo

Then you can add your favourite mixture of IRC, Bugzilla issues and comments, emails, and twitter updates.

After considering that, I came up with the following plan:

  1. Design the layout
  2. Code a prototype
  3. Get it reviewed
  4. Code the blog engine
  5. Deploy

My reviewers would be some designers I appeciate (@ignacioricci and @abadfederico), then after getting the layout approved I would go on hacking the "blog engine".

Next I had to choose the resources I was going to use, being my main restriction that they had to be free to use and redistribute:

From what I'd read about font contrast I wanted a seriff font, and the colors where some of the most complicated things to choose. I wanted something not too fancy but at the same time not very common... in the end I gave up and went with gray/black/dark-red. For the backgrounds I had SubtlePatterns on my radar, just needing an excuse to use one of their designs, and the fonts of Pablo Impallari are always appraised by Nacho so those were pretty easy to choose.

The first design

The ideas I had in mind for the design where minimalism, readability and not doing something fancy. No need to reinvent the wheel, humans have centuries designing for reading and applying some of those concepts would be more than enough. No need of multiple columns, and keeping the ammount of graphics to the minimum, pushing CSS to the limits. Also, sorry for IE users but I really don't care about IE at all, if you want a good experience on the internet go get a real browser. Period.

Borrowing some ideas from Space and from other places (specially on the way bullets are presented and the post metadata), I got the design almost right on the first time. On the first time after spending a decent ammount of my Sunday on it.

It was time for review! I sent some links to Nacho and Federico, to see what they thought, and as you would imagine, I got r-. The most prominent mistake was not having used enough whitespace between text lines, something usually programmers don't appreciate: the more code you can cram on your screen, the betther.

After some modifications and sending links to a broader tester audience and taking their feedback in, the entry design was ready. Now it was time to get the general site structure ready.

The main site

Ink and Paper drafts

The first thing I tried for the geneal layout was pen and paper. Getting an idea of what was what I wanted, before starting typing like maniac. As I want this blog to be my homepage, but also link to some other stuff like presentations and prototypes, I first tried with having the latest entries summaries on the main left column and having two smaller columns on the right for other stuff.

I was pretty sure I was going with that (big colum + 2 smallers) layout, until I actually started typing like maniac. There was no good comination of big left and small two right columns that would work in my 13" screen. Or the left column seemed too small, or the right columns felt too thin to have something inside...

First compromise: blow away one of the right columns. Two columns on the right was probably too much, so I went minimalistic and removed one of them, leaving more space for showing things. It turned out this was a good decision and I liked the final result.

Another thing I didn't want in my home page was the full entries. That always generates tons of pointless vertical scrolling, and no-one reads beyond the second entry... So having a summary (the first paragraph or something) of each entry would be enough. Regarding blog structure, I only wanted tags. I rarely use date-based archives of blogs, I usually go for the posts tagged with the things I'm interested. Also, tags are useful for syndicating to different sites.

No clear reading guide

Then again I had a design to show my reviewers. And yet again my design was rejected. This time top reasons where the two main columns being too close to each other, making it difficult to read the entries, and no clear text alignment for the entries' summaries that also made them hard to read.

The final pieces were the footer and header. I went over traditional with those two: simple title+contact on the header and year+author+license on the footer. I also added a link to the source code of the blog, but that is a detail I'll comment in another entry.

Wrapping up

Redesigning my blog ended up being a very instructive activity. I take some things that I found very valuable:

  • Readability matters.
  • Spend some time reading about typography will make some designing fears/myths go away. There's more science to it than you would imagine.
  • Whitespace matters . If you're a developer maybe you won't understand this (as I didn't), but it does matter a lot!

This post ended up being longer than what I would've liked, but it wouldn't be the first time that happens ;)

Note:

This blog is still in evolution, so comments are not yet implemented. If you have any comment/thought about this post you want to share, just send me a tweet to @peregrinogris !

Hernán Rodríguez Colmeiro ~ 2011 Source ~ Creative Commons License