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.
Download files here.
My name is Flo Preynat and I am the freelance webdesigner and developer behind shoogle designs. I live in France and specialize in responsive web design. Give me a shoogle or get in touch with me on twitter.
Follow @shoogledesigns
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?
thanks Sicky! Glad u (and ur Julie) like it.
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.
Designing content for the mobile web is not something I’ve had time to look at, but it’s a very fair point Daan. Thank you for this.
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.
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.
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).
Yo mate, did RT the stuff.
This is pretty nice. If I have any idea for a plugin, can I give you a shout?
Check my URL shortening service at http://1click.at
I love the idea and concept, but I feel this may be to complicated for you average internet user to figure out. I would love to see this in a usability test. Just send a user here and watch if they can figure out how to go to another pager, or explicitly asking them to navigate to another page. I expect in the latter if asked they may try out different combinations to get the menu, but if just presented with this site as is.. I can’t see any avg user taking the time to find the menu.
Hi Shuogun,
thanks for your feedback. This is a mere example. but the hiding/triggering feature could come in many shapes and forms, hence be more or less explicit.
but yes, i do agree with you. You would need to know that your audience is used IT-minded before integrating features like this one.