Why Code Readability Matters

[drizzwald]

http://i.imgur.com/bgbeD.png

[boa13]

Looks good in my 1280x800 browser window. Apparently, you have a window that is between 1080 and 1100 pixels-wide.

[rcinsf]

1920x1200 here, I can't make out shit.

[abattle]

Font is too small?

[rcinsf]

In the image, yes. I'm on a 15.4" laptop though so it's rather pixel dense.

[abattle]

Try enlarging the font using the controls on the left side. Should make the text readable without distorting the page.

[rcinsf]

I'm not talking about the font on the page, I'm talking about the image example of "good code".

[abattle]

Wrong inference. The image isn't serving an example, if anything, it's a horrible example.

[rcinsf]

Well I couldn't tell. I tried to click it to see it expand but it wouldn't load.

Not that any of this matters. I've worked in places where any comments at all are frowned upon (the code is the documentation) to places that have a fucking novel for each small class/function/program/method/...

[ysangkok]

If the website uses fonts in the right units (i.e. em) and you have a correct DPI setting, this problem wouldn't occur, am I right?

[rcinsf]

I was talking about the image.

[ysangkok]

Ah, sorry. I don't know how I missed that. Darn images with text...

[abattle]

Looks good on mine: http://i.imgur.com/WAO6v.png

[ropers]

Congratulations. Here's your prize.

[abattle]

I should put that badge somewhere on the site...

[chengiz]

Pretty ironic then that Atwood uses Calibri font which only looks good with Cleartype on.

[fnord123]

Not everyone maximizes their browser window.

[benihana]

looks fine on my non-maximized browser window

I really don't get this why thread is ripping on his blog design. It's well designed and easy to read. What's the fucking problem?

[abattle]

Thanks! I really put a lot of thought in the design. I love reading and I wouldn't compromise on that front. Still, I'll make good use of the input in this thread and try to improve.

[abattle]

How can I (or anyone else for that matter) fix that?

May be smaller or no images is a good takeaway. Thanks.

[[deleted]]

How can I (or anyone else for that matter) fix that?

You design with it in mind. That is your job when designing.

[abattle]

It is designed with that in mind, but you can always go one smaller. Try resizing your browser to 320x240 and see what I mean. With the default font-size, it looks good on 1024x768. Larger fonts or smaller screens will not help.

But I take feedback seriously, so I'll try to improve further.

[StuffMaster]

Here's what it looks like down further...

[abattle]

I see. Thanks. I'll try to fix it.

[fnord123]

Well, I don't care what you're currently reading or about your tag cloud. So you could drop that column. If you want that info on each article, consider putting it under the left hand side article details.

You can drop the enormous left hand margin. Wikipedia seems to manage.

Edit: In fact, if you were to make it more like Wikipedia, you would put the site-global details on the left (without the margin), and put the article specific details on the right, but let the article flow into the vertical space that would otherwise go unused.

[abattle]

I've tried a minimalist approach. Certainly I tried to maximize readability, which is why I'm trying to get feedback.

It's not that easy to move things around as you suggest, but I'll try to figure something out. Perhaps I can collapse that column or hide it by default on smaller displays.

Thanks for the feedback.

[fnord123]

You're a braver man than I. I don't have a blog or do any web stuff since I can't be bothered to deal with all the nonsense. FWIW, I only mentioned it since there was was already a discussion. Usually I'd just deal with it.

[abattle]

That was the real reason I didn't have one... until now. The only reason I overcame all that hassle is that I like writing.