The target of this experiment is my little sidebar which is attached to the right-hand side (at the moment) of every single page. The main point is that I got sick of continually seeing this sidebar beside my main content: it’s distracting.

To put the emphasis back onto the content, I thought of a few things such as changing the colours (to a lighter shade) as well as text size in order to help the sidebar fade into the background. However, nothing really quite cut it. The only thing that really seemed to work was to remove the sidebar completely! The idea seemed silly since there are some useful links and tools in there (it’s surprising how many people want to translate my posts and there’s the neat little search box). Could there be a compromise? Ideally, we want to see the sidebar when there’s something inside we want to make use of but at other times hide it away to keep the page tidy. Hovering over the area where the sidebar is (as you would if you wanted to use something inside it) proved to be the simplest trigger.

But if the sidebar is hidden, how to people know it’s there? I thought of having a little button there which provided a visual cue when the sidebar was hidden, but that went against the idea of hiding it in the first place since there was always something there, being distracting.

Instead I decided to display the sidebar for a couple of seconds when the page is loaded and then to fade it out automatically. This visual change in the page is enough for the eye to recognise the change (in this case the block fading out) in the peripheral vision so that the visitor knows there’s a sidebar but it’s just hiding at the moment. That’s the idea anyway.

Before & after showing sidebar

What are your thoughts?

It is possible using standard CSS but the results are somewhat limited: I only got it to work in Firefox and IE on my computer (Windows). But since those browsers account for probably 90% of visitors, and the change is really only a handy little cosmetic one to aid visitors, it’s worth sharing how to do it!

It all simply comes down to the cursor property in CSS.

What to use:

img.zoomable { cursor: url(magnify.cur), -moz-zoom-in, pointer; }

Example:

If you want to download the special magnify.cur file that I created for this example, then feel free: download magnify.cur

I hope that helped the person on the forums, even just a little bit.