Push the minimalist approach one step further by hiding site navigation

Simple things are most of the time the most appealing ones. It is so true in life, and this happens to be true (this is my opinion anyway) in web design. I often take peeks at minimalist web designs thinking “this web site has got nothing on, yet it looks wicked”.

Now, this post is not about entering into a real debate on how one would qualify a site as being minimalist. We can use ‘plain and simple’ or ‘clean’ websites if the ‘minimalist’ term bothers you.

Cut a long story short, I reckon simplicity, ie the removal of superfluous links/pictures/distractions and the look for simplicity on a web page often do the trick and bring so much more appeal to the eye,… and the brain.

Today, I have decided to push this minimalist approach one step further, by removing (temporarily) navigation links, footer, (more if you like) from an already-clean-cut website to emphasize my theory on minimalism.

I have created a fake analytics firm delivering usage reports through smart phones (in this case I used a picture of the iphone), and decided to have a little play around with the moto of the company (based on the concept of control and measurement), and allow visitors to interact with the layout of the site by pressign down the Control Key.

The idea of course is to let visitors land on a mega-clean webpage where the main product, company logo and moto only would feature before revealing (by pressing down the CTRL key) the rest of the site (ie navigations links, sections, footer…etc).

I used jQuery for this, but im sure there are many other ways to do this.

Here’s the jQuery code I used if you are interested. I’m simply toggling classes of elements (between nodisplay and display) with function(event), and specifiying the event as being event.ctrlkey.

jQuery code

That’s it folks! You may apply this technique to your own minimalist designs if you like the visual effect.

Don’t forget to check the demo.

Radu says:

July 21, 2010 at 1:20 pm

I was just about ready to yell out about usability and taking control away from the user blah blah blah. But the I got to the part about what the demo is for. The idea of [Ctrl] and the keypress. It’s so wickedly creative that it just completely beats down any concern for usability. It just bleedin’ rules! And on top of that it’s all done in 10(!) lines of jQuery. ::bowing down in awe and restecpa::
Yes, I said “restecpa”. Does anyone still get that reference?

shoogledesigns says:

July 21, 2010 at 1:29 pm

thanks Sicky! Glad u (and ur Julie) like it.
Daan says:

July 21, 2010 at 1:33 pm

Ali-G?

But yeah, it’s quite creative, though to make it perfect you might want to create a link as well on the ‘[Ctrl]‘ for users without keyboard, like on mobile phones etc.
Radu says:

July 21, 2010 at 3:23 pm

Yep, Ali G.
I agree; it’s not perfect. The design could use some work and it’s not exactly uber-accesible, but I liked it for the creative side, which isn’t something you get to see everyday. Especially not in a tutorial.

Andrew Champ says:

July 21, 2010 at 1:51 pm

I love it, simply amazing. The only problem I have is that it’ll view the additional content when I press any button on my keyboard. Any fix for that? And how would set up a different key to do that, is there a list?

Thanks for sharing, very cool.

shoogledesigns says:

July 21, 2010 at 2:46 pm

Hi Andrew, first of all thanks for the comments and the thumb-up for this post. and thank you for highlighting this bug to me. I reproduced it and quickly found the issue. I should have used the keydown(function(event)) and added a if (event.ctrlkey) line. In short: action is Keydown and event is ctrlkey. fyi, You can use the same setup with different keys. Use the event object properties fir this (I let you google it), but yeah you could be using event.altKey or event.keycode == ? and replacing the question mark by the correct value (check this here: http://bit.ly/9ZNynk).