Making it readable.

Yesterday I took some time to change a few things on this website. You might notice that the fonts are larger but there was a little more to it.

Links

Some usability posts have a good deal of information about underlining or not underlining links. I've opted to use the border-bottom style instead of pure underlining, it really changes the presentation of the links.

Also I made the hover more bright, so that it is a clear feedback that you can interact with the text. When visited, the links default to the text color, when not they have a purplish color like the site theme. Finally, all underlines from links got removed on the all posts lists, it was overwhelming on the eyes and the reader knows that everything on that list is a link.

Code

If there was something that deeply bugged me for a while was the code blocks that were larger than the site content had a horizontal scroll bar, that's gone. But some code examples are larger than the screen making the whole site have a scroll bar, well, I have to make better code snippets in the future. Here's an example of a code block:

task :compile do
  FileUtils.mkdir BUILD_DIR if !Dir.exists?(BUILD_DIR)
  Dir["#{IN_DIR}/**/*.tex"].each do |file|
    sh "#{PDFLATEX_BIN} -output-dir=#{BUILD_DIR} #{file}"
  end
end

Now there's more space between the border and the border got a little more faint, just with a hint that the content stands out from the text but not to look like it doesn't belong.

Contrast

Both font color and background color were changed to lower a bit the contrast. The background now is "off-white" and the font grayish, following the advice from this 64notes post.

Backwards compatible?

Not quite, code blocks can overflow into the sidebar for which I didn't find a fix yet. I'm sorry about that.

Why?

I'm no designer rather a picky reader. Design is way more than making it pretty (which sometimes is a consequence of a good design) is about experience, usability, human factors and more. The fact that I write on the web is because I want someone to read, if I want them to read it should be a, at least, comfortable reading experience. Is the same expectation I have when reading other materials.*

Cross-{browser, platform, reading aids}

I do double check if this site doesn't render very poorly on other browsers and platforms. Most of the time I focus on how it looks like on readability and my iPhone Safari, just to make sure that I didn't make a big mistake. A full check can be done on Browsershots, it takes time so I don't do very often. I also check if the feedburner got all content because that it feeds other readers. Finally I did check for colorblindness which you can do on this website and accessibility on this site.

* Another expectation is that I can navigate through your site using Gleebox.

Published in Jan 08, 2014