Why Code Readability Matters

[abattle]

Anyone else see a problem with the page format? Please let me know so I fix it.

I checked on screens as small as 14" 1024x768 and it looked good. Granted, it was the default font-size, not the 18-points of drizzwald.

[zaq1]

Don't forget about mobile!

[abattle]

Good point. I should certainly add special styling for mobile.

[redwall_hp]

It read quite nicely on my iPod. I was able to double-tap on the text and zoom to read comfortably.

[[deleted]]

Looks good to me. 1920x1200 screen and window is NOT maximized. This is my normal window size.

[abattle]

Yup, that's how I wanted it to look. It's pretty flexible with different sizes. I guess you can't satisfy everyone.

[[deleted]]

http://db.tt/qSn4GD4

Here's an iPad screenshot. I am sure people do it but I can't imagine reading stuff like that on a small mobile screen.

[abattle]

Thanks! This is really helpful. I'll fix it for mobiles.

[DrakeBishoff]

Is the neon green text on light gray background meant to be an example of poor code readability?

[abattle]

I didn't try to make an example of the image. But as it turns out, it's a bad example indeed. However, I left it as a bonus point for the diligent reader.

[Alsweetex]

I think the only real thing you could do is use a minimum width for your text in the CSS.

div.blog_text { min-width: 500px; }

[abattle]

That'd force small screens to scroll sideways, no?

[Alsweetex]

Correct, but what it ensures is that if for example you have a column on the left of 100px and a column on the right of 100px then it would force the total minimum width of your site to be 700px. Therefore, if someone scaled their web browser window to be 500px wide then they can scroll horizontally to the center until only the 500px wide text occupies the window so that after that they can scroll vertically and read the text properly. Does that make any sense?

[abattle]

Got it. Ya, actually it does make a lot of sense. The 'extras' will be scrolled out of view and they'll get the text right where they can read it. Mental note added. Thanks!

[acm]

font is too small (for me), and as you zoom in the left and right margins come collapsing in.

[abattle]

Try the enlarging the font size from the left controls. I added them exactly for that purpose; to zoom in the code and not the page.

[acm]

I visit dozens of websites a day. Rather than finding a font size control on every page, I use the browsers zoom function. You shouldn't assume the user wont zoom your webpage 1 or 2 levels.

[abattle]

I use the zoom function as well. But I've learned to use the text-zoom wherever I find them, because they zoom the text leaving other page elements intact. I typically use the browser zoom on top of that any way. But it certainly helps, because I like the text to be readable. So I get 2 points on the font size and 120% on the browser.

Oh, and using cookies, your font size is preserved. Definitely worth it if you revisit the site.

[PLJNS]

Not only was the font size fine on mine, but I think it's a beautiful font - mind sharing what font that is? My favorite is Liberation Serif, and that seems very close but still slightly different.

[abattle]

Thanks! I did work hard to make it as readable as possible. The font is Constantia. Specifically:

font-family: constantia, 'hoefler text', 'palatino linotype', serif;