If you’re an aficionado of the web community’s twitter feeds, you probably have seen Arc90 and the @readability crew officially launch their web & mobile app which ‘zaps online clutter and saves web articles in a comfortable reading view’. And If you have read my blog before, you will know my love for minimalism and clean design. Therefore you won’t be surprised if I openly admit I absolutely love that “Imagine a web designed for readers” concept the guys from readability have come up with.
The BAD
Hostile environment for reading is how those clever people have described the web as it stands today. And hostile it is indeed. Between the site’s natural navigation features, the “advertise here” spaces people tend to put everywhere on their pages (in a natural attempt to monetize their blog), the most innovative, sometimes funny, mostly boring & annoying advertising banners , and f**k knows what else, it gets hard to concentrate on what you are reading.
The GOOD
But it doesn’t have to be that way…indeed. There are alternatives. The use of RSS readers is certainly one of them, although the simplest (and free) ones tend to drop some of the content (like pictures, and other media). Readability, as stated above, is definitely another way, and I can only encourage you to sign up to this service. But here’s a post about something I have been thinking about, looking at this whole “clean my page to help me concentrate on what I’m reading” concept.
Wouldn’t it be clever if we could have our blog’s web pages designed to show all our valuable content, all the side advertising crap we need to keep to make sure our families have bread on the table, and other social network links, but allow our visitors to concentrate on what they are actually reading by giving them dynamically the possibility to switch to a cleaner and minimalistic view of the article.
Thinking of it, not only it does seem possible, but also it could be mega easy using jquery and a couple of functions and classes. Let’s get crackin’ then!
The UGLY
Here’s the kind of page I often find on designer’s blogs. To be honest, I don’t personally agree with that kind of design, but yet again, I don’t personally need advertising revenues today. Problem: It’s got way too much on it. Some ads in the middle of the post which personally make me want to throw the laptop through the window (ok maybe not), some moving banners, some flashing pictures, in summary it gets hard to read what looks like a decent article (in fact it’s just this article you’re reading lol).
Anyway, here’s a screenshot of what such a page would look like. Please note the red annotations covering areas having absolutely nothing to do with the blog article.
READ-ABILITY
OK, let’s apply something really simple: set the class of all the div elements not containing any relevant data from the article to “hide”. I used pictures to illustrate my advertising banners for this demo. Therefore, I applied the “hide” class to all my advertising img elements. But the very same can be done on a series of divs.
This done, create a couple of logos to trigger your readability feature. I created a couple of Content Only and Show all buttons, and place them respectively in two separate divs of class “Hide” and “Unhide”.
Now, let’s turn to jquery and make sure that all the elements of class ‘Hide’ are being hidden upon the click of the Content only button, and of vice-versa for the Unhide class and the Show all button. Make sure your CSS includes a display:none setting for the .unhide class.
As you have may have noticed, I gave the effect a 200ms execution time to emphasize the resulting readbility effect. Hope you like it. I let you check out the demo now.
Nice idea, I was thinking about a “ad-switch” too some time ago, but had no time yet to come up with a good idea
That readability app really triggered the idea for me… glad to hear we’re on the same track then.
Brillant.
Thanks my friend…
Awesome ideia friend! Shoogle Designs is my top blog always. Big Hug
Thanks Gab! you’re the one!