Faded sidebar

I’ve occasionally mucked with my blog’s theme with a general aim of removing superfluous crap that makes reading posts harder. A couple weeks ago something Parker Higgins wrote inspired me to try a little harder:

How awesome is @niemanlab’s “faded” sidebar? And zen mode? That’s a site that cares about its readers.

You can view an archived version of the Nieman Lab site should their design change. The top of the sidebar isn’t faded, but overall I think the fading there is makes it a little easier to concentrate on a post without switching to “zen” mode (removing all navigation).

For my theme, I made the sidebar always faded except when hovered over, and float to the right as far away from the main content area as possible. All “header” content is in the sidebar so that there’s nothing preceding a post’s title.

I intended to remove anything hardcoded* for my blog, anything I don’t understand or not used, and anything that doesn’t validate, but I didn’t get very far on any of those. I doubt this will be useful to anyone, but patches welcome.

*Yes it is also a little ironic I’ve never bothered to published modified source used to run this blog until now.

3 Responses

  1. Andy Brooks says:

    Loving the fade, Mike!

  2. Gordon Mohr says:

    I like it… having the main article centered on-screen would be another reader/text-centric move (as instapeper and other Readability tools do).

    The use of softer shades – and varying those shades dynamically — works so much better on screens than paper that it’s still underused online, compared to everywhere it could help, due to old design habits.

  3. Thanks Andy!

    Gordon, good point regarding variable shading not working in paper (nor serving much functional purpose in non-interactive video).

    I thought about centering but wanted to leave as much space as possible between the main article and sidebar, and also leave as much room as possible for the odd wide content, like the long preformatted lines in my following post.

Leave a Reply