

A Cleaner, Simpler Blog Page - thecombjelly
http://thintz.com/essays/simplifying-this

======
petercooper
_I've also set all of the non content elements to a 30% opacity, when the
mouse isn't over them, to hopefully focus even more of your attention on the
actual content._

It just makes them more noticeable to me since it's such an unusual concept.
This is both a pro and con with going against the grain - it makes you stand
out.. which isn't the desired effect this time. The bizarre font combination
doesn't help either. The ultimate in clean/simple is probably found in
Readability/Safari Reader - at least, from all the raving I've seen over the
last few days ;-)

 _UPDATE: I've now also set the text to be justified and am looking into
hyphenation. Justified just seems to be a little more pleasant and smoother._

It might seem that way to the eye at first, but in reality, it just ain't so.
Fully justified text is harder to read and has negative effects on retention:
[http://www.adamsdrafting.com/2007/05/03/justified-text-
versu...](http://www.adamsdrafting.com/2007/05/03/justified-text-versus-
ragged-right-text/)

Study 1:
[http://www3.interscience.wiley.com/journal/120024982/abstrac...](http://www3.interscience.wiley.com/journal/120024982/abstract?CRETRY=1&SRETRY=0)
Study 2:
[http://www.eric.ed.gov/ERICWebPortal/custom/portlets/recordD...](http://www.eric.ed.gov/ERICWebPortal/custom/portlets/recordDetails/detailmini.jsp?_nfpb=true&_&ERICExtSearch_SearchValue_0=ED337749&ERICExtSearch_SearchType_0=no&accno=ED337749)

The UK government also gives this advice in a style guide:

 _Avoid fully-justified text - the 'ragged' right edge can particularly help
people with dyslexia in keeping reading position._

Making a site harder to read for people with dyslexia (an extremely common
disability, even amongst techies) is not a good step towards "simple."

That's the thing about readability. It's not about what "looks good" or "feels
good" to you as an author - it's about how readers actually read and react to
your styling. Relying entirely on your own gut instinct is like trusting the
Web design client who's raving "make the logo bigger" and "use Comic Sans -
it's a great font!"

~~~
thecombjelly
> It might seem that way to the eye at first, but in reality, it just ain't so

I'm going to look into this more, thanks.

~~~
Groxx
"rivers" and weird spacing from the OP's first link are a bit distracting,
yeah, but here's my personal easy-to-believe reason for non-justified text:

Ragged edges make it easier to detect different lines of text, because you can
see the lengths easily.

This makes it harder to lose your place, and easier to slide your eyes back to
the left edge to continue reading. Every subtle clue to your location is
helpful for quicker reading, and justified text pretty much destroys it. And
personally, quicker often == easier, as if you _can_ read it quicker, it
somewhat implies a lower "cost" to the mechanics of reading that text.

~~~
petercooper
_Ragged edges make it easier to detect different lines of text, because you
can see the lengths easily._

Another way of looking at it is in the Y dimension. It's almost gospel now
that we read fluently by scanning the tops of letters, so having letters of
varying heights and upper shape improves readability. Turning this around, it
might be fair to intuit that ragged right provides similar benefits in
vertical scanning and place keeping.

------
modeless
I like the idea. My 2c:

Pick one font for content and (possibly) one other font for headings/menus.
Different weights count as different fonts. Keep the number of fonts very low.
Above all, _do not use Comic Sans, ever_.

The animations are distracting because they last too long; make them snappier.
This is a common mistake when designing UI animations; people are afraid that
their great animations will go unnoticed if they are too short and make them
too long instead. Trust me, we will notice your short animations. Also there
is a bug: your animations can't be interrupted, so if you mouse in and out 10
times they will continue flashing long after the mouse has stopped moving.
Have you considered using CSS transitions instead of Javascript?

Empty space is just as important as text. You have left plenty of horizontal
space, but your vertical spacing is inconsistent. The menu at the top needs
more vertical space around the links (or perhaps the same space needs a
smaller font with increased tracking AKA letter-spacing). The vertical space
between items in the right column seems random, with very little space above
the RSS link, extra space in the top of the green box and no space at the
bottom. The left column has more space under the byline than above the
headline which is weird, and there is zero space below the footer.

~~~
thecombjelly
Thanks for the feedback and for the great explanations. I'm a programmer and
only beginning to learn visual design stuff...

As I strive for simplicity, your suggestions about spacing makes a lot sense.
It would be simpler visually to have things be more consistent.

------
niyazpk
A whle ago I designed a WordPress theme keeping simplicity in mind. It got
good reviews. Check it out: <http://wordpress.org/extend/themes/clear>

~~~
eavc
I just installed it. As a non-coder, is there an easy way to make the
numbering on ordered lists aligned in the same way that the bullets on
unordered lists are? At the moment, the numbers stick out to the left of all
the other content.

Otherwise, it's gorgeous.

~~~
niyazpk
I will fix it (after my office hours) so that you can get the update directly
from your admin.

~~~
eavc
That would be great. Thank you.

~~~
niyazpk
I am waiting for the new version of the theme to get approved to the theme
gallery. This seems to take a very long time.

If you shoot me an email, I will send the theme files to you.

------
aymeric
Has anyone noticed the author offers tutoring? I find it a very interesting
idea.

Is it a widespread practice? Has someone had a tutor and would like to share
with us how tutoring/mentoring helped him?

------
chmike
The opacity change when the mouse is over text doesn't work with touch screens
(iPad, iPhone,...). Appart from this I really like the idea.

------
gr366
I don't think it's necessary to fade out the header and sidebar. The layout is
simple enough that having those components at full opacity shouldn't be
overwhelming.

Also, while the fully-justified body text produces nice, straight left and
right edges, notice that because it's not a very wide column you get some
significant spacing between words. If you want to keep it this way, you might
look into using a hyphenating javascript library, which will help with the
rhythm of the text.

~~~
thecombjelly
The layout is simple, but at least to me, the orange of the menu bugged me...

~~~
isleyaardvark
The downside of the opacity is that 1) the contrast between the text &
background in those areas is reduced, and 2) people won't necessarily know to
hover over those areas to increase the contrast. I personally don't think the
hover color is too bold, but the current opacity is really overdoing it. "Want
to learn to Program" is particularly problematic, and should be about as dark
as the text below it.

I'd also recommend playing around with the line-height and measure, see:
<http://webtypography.net/toc/>

------
giu
I'm also using a very minimalistic blog theme for my own, which emphasizes the
content more than anything else: <http://giu.me> . I have to admit that I
didn't chose the best link color, but since my theme is _beta_ , it's surely
going to change (I'm using the standard Blue; a lighter color surely would be
better) .

On a sidenote: I would replace the Comic Sans MS font with another one; that
font shouldn't be used for homepages IMHO

~~~
thecombjelly
> I would replace the Comic Sans MS font

Yah I've been playing with the Google Fonts and I think I'll be switching that
soon. I just had to have something a little different and that was the
quickest, easiest at the time.

~~~
edash
You should also check out <http://typekit.com/>

It isn't free, but it is reasonable. And they have a much better selection of
fonts.

~~~
thecombjelly
Yah, typekit is good and has a much better selection of fonts, but I'm broke
currently :-)

------
stoney
Looks nice, the only bit I don't like is that if it is full screen you have a
vast expanse of white on either side of content, which I find a bit
distracting for some reason. I always think dark bars down sides help to focus
your eyes into the content area.

~~~
thecombjelly
Hmm, I'm not sure about that one, does anyone know of any studies or have any
opinions related to darkening the sides?

~~~
stoney
I was talking purely from personal preference, but would be interested to know
if there were any studies done on this.

Widescreen movies on a 4:3 aspect TV always use black edges, but maybe that's
just tradition or to do with contrast or something like that.

EDIT: Just noticed that HN has a grey content area with white around the
edges, which I like, so maybe my preference is more to do with having
different colour sides than dark sides - i.e. some kind of boundary to the
content area.

------
mreid
I also did something similar when I switched my site to Jekyll. The usual blog
content + header + sidebar format seemed unnecessary for me so I started by
focusing on the content and building up from there:
<http://mark.reid.name/info/site.html>

I currently use justified alignment, but given the mounting evidence against
it I might switch to ragged right next time I'm playing with the CSS.

------
d0m
I find the colors pretty ugly

~~~
aymeric
pretty or ugly? :)

------
fookyong
this kind of form-over-function platitude is all well and good until you
realise that conversions are 500% higher when you have your product's call-to-
action box set at full opacity ;)

even more so when you've got employee mouths to feed. put money in the
equation and a lot of design exploration of this type just becomes a waste of
energy.

that said, nice idea!

~~~
thecombjelly
Well actually it seems to be driving _more_ traffic to my tutoring page.
Compared to the volume I've had before from HN and the number of tutoring
inquiries had, it seems to be much higher. Although currently that really has
no statistical significance... I'll monitor things and see if it really
matters or not.

~~~
fookyong
anecdotally, I'm sure people are curious in the short term.

but I'm pretty sure the current best practice for maximising CTR is to, well,
make sure stuff is visible. feels silly to even dispute this.

------
nileshtrivedi
I loved the idea and immediately sat down to make my own template. Here is an
attempt: [http://nileshtrivedi.com/ubuntu-1004-on-dell-
vostro-1520.htm...](http://nileshtrivedi.com/ubuntu-1004-on-dell-
vostro-1520.html)

I haven't got around to add a navigation section yet.

------
swingley
Love the idea. Hopefully more will follow and reduce the need for
'readability' or the safari reader option.

------
elrodeo
I agree with him, and that's why I love Posterous. The default Posterous theme
fits all his criteria except for the font size.

------
yurylifshits
Maybe, you should increase the line height to around 1.5 of the font size for
readability.

~~~
thecombjelly
Seems to make it more readable. As well, some quick Google searching turns up
studies and opinions that it is most readable around 130% of the font size.

------
ethan
simple, clean, and forgettable

------
drivebyacct
God. Justified text is the most annoying thing in the entire world.

