Web International Awards

payday loan

19

OCT 2009 8

Javascript DOs and DONTs. Complete with 17 examples from real web

I've talked about accessibility a couple of times, especially when the main technology used to build a site was flash. You can check the first and the second flash degradation articles before reading this one. In this article I will cover some DOs and DONTs with regard to javascript enhanced websites.

There's only around 5% of internet users which do not have javascript turned on, but that doesn't mean you should disregard them and create a beautifully working site with javascript which fails completely if javascript is not available.

In order to fully understand what I am talking about, you should visit the sites showcased in this article, view them with javascript on, then turn off javascript and refresh to see the difference. Some sites, as you'll see, do a better job then others when it comes to working properly without javascript. All these sites are impressive if javascript is on, but may be completely useless if javascript is off.

Really good examples of javascript enhanced sites

Helloewy

loewy.com screenshot

Helloewy is the blog of Loewy, a NY web development company. They created an accordion for the entire posts structure of the blog which works quite well. I've seen many accordions across the web, but this one's the first one that also automatically scrolls your page and adjusts its position accordingly to the tab you just clicked. The best thing is that with javascript off, there's no accordion, but all the content is there in the exact layout. It's just that it is all expanded, which doesn't bother me - the what is javascript user? - at all.

Youlove

youlove.us/one screenshot

Youlove's older version of the site was bundled with awesome transparencies, animations, sliders and scrollers which resulted in a visual aesthetic that took your breath away. The new version is similar, but for me, its not that bright as the previous one. With javascript off, that first version gave nothing up in terms of usability and available content. It just got rid of animations, sliders and scrollers. Transparency was preserved as it was built using CSS not javascript. Awesome website!

Alexandru Cohaniuc

alexcohaniuc.com screenshot

Alex's website is similar to the first one presented just before. It also uses an accordion to group his portfolio on categories, all tabs beeing expanded if javascript is off. It is a one page website, and the little javascript tricks add some spices to its design and make it beautiful.

TEDx Bucharest

tedxbucharest.com screenshot

TEDx Bucharest has and interesting and original concept in terms of layout, structure and navigation. Funny thing is it uses javascript for a small amount of the website, which is flying in a few thumbnails on the homepage / guests page, and to create some sort of a tooltip while hovering those thumbnails. Besides the flying in effect, the strange tooltip could have been easily created with some tricky css. The important point here is that with javascript off all functionalities are preserved. Nothing too extraordinary, but the concept and progressive enhancement cannot be disregarded.

The full article will contain more example of website that do a bad job when using javascript, and some who are right on the edge of falling in the same category, but are not quite there yet.

Really bad examples of javascript enhanced sites

U No Why

unowhy.com screenshot

U No Why is simply Amazing! It has a totally original navigation concept. It moves so smoothly and responds fast to user's mouse, is bundled with lots of visual effects and subtle transparencies but unfortunately turns into a screenshot if javascript is off. In fact, if javascript is off, you can either look at one photo, click the logo or close the browser. Which one would you choose?

Engage Interactive

engageinteractice.co.uk screenshot

Engage interactive is entirely constructed on sliding doors, panels and slideshows. All are powered by jQuery. There's quite some JS work behind this site. Very well thought off, javascript tags are located at the end of the source files. On the other hand with javascript off parts of their site are inaccessible the menu being nowhere to be found. You could still check out a part of their portfolio though, if that's any good because they fail the ultimate goal, which is allowing visitors to contact them. Twitter link doesn't count here!

Djafar Inal

inaldjafar.com screenshot

I gave two examples of websites that successfully use accordions to enhance user experience. Here's one that fails almost completely. Inal's website fails because if javascript is off, there's only one tab of the accordion fully expanded. This may be due to the fact that Inal's website uses a horizontal accordion as opposed to Alex's and Helloewy's websites above which have vertical accordions. However, a few css tricks and if javascript were off, those tabs on Inal's website could have all been expanded and placed vertically.

Made by Elephant

madebyelephant.com screenshot

Another website that uses jQuery a lot. Sliding doors, tabs, forms. It looks and feels great if you have javascript available. The moment it's gone, the whole site gets scrambled. No thank you!

Nerve Music Store

Nerve Music Store screenshot

Nerve is a music store that has its entire UI developed using javascript. That's great because the interactivity provided is awesome and could rival easily with Beatport. Just turn your javascript off and then you get a spinning gear that spins and spins and spins...Forever.

Eyedraw

eyedraw.eu screenshot

Eyedraw is yet another site that uses plenty of sliders and sliding doors. These features make it look chic. Unfortunately, with javascript off you're left to viewing a few thumbnails and no ability to contact the designer. Auch!

Webalon

webalon.com screenshot

Webalon uses javascript to create a huge dynamic slider on their homepage and some nifty fading effects. Apart from that, it appears that they should have some sort of lightbox in their portfolio section, which unfortunately doesn't work even with javascript available. Needless to say, with javascript unavailable there's no fading and the content slider completely vanishes into a dark mist.

Bonadies Architect

bonadiesarchitect.com screenshot

What was the first thing that crossed your mind when you saw the above screenshot? Hmm, let me check this minimal website? Well, please do check it with javascript off, because there's nothing more to see than what you just saw in the screenshot. Useless website if you do not have a decent modern browser with javascript on. I must say that it is really interesting if you are lucky enough to use a modern browser. Transitions, animations, elements moving around.

Best Before

bestbefore.ro screenshot

Best Before has a really, really interesting website. Smooth animations, fading elements, movement of elements around the page make sliders look dull. Too bad the site turns into a blank page if javascript's off.

Those who remained neutral: neither good, nor bad

Jaboh

jaboh.it screenshot

It was a little bit hard to put this site into a category. I was going first for failure to use progressive enhancements, but then I said. Ok, it does have progressive enhancement in certain areas. Now, it depends if the homepage is considered a vital part or not. So is it? I am asking because this minimal site that "abuses" of sliders, slideUps and slideDowns throughout its content areas and navigation has one major problem when javascript is off. The content on the homepage suddenly disappears. Call for Sherlock Holmes guys!

Loewy design

loewydesign.com screenshot

Does Loewy sound familiar? yes it does. And it does because they did a great job with their blog, which is showcased up in this article. Anyhow, the agency seems to lack consistency as their main website has some issues. While javascript is on the site is bundled with smooth animations, a nice navigation and sorting menu in their portfolio section and more. If javascript's not available some features like the aforementioned sorting menu stop working. The most important fact here is that the site remains accessible. One can navigate wherever would like, use the contact form, but those little details that made the site interesting are gone.

Adam Rix

adamrix.com screenshot

Adamrix is a full page slideshow that showcases the portfolio of a talented designer from Manchester. The site lacks navigation and means for making contact if javascript is off.

Position Relative

position-relative.net screenshot

Position Relative uses javascript to animate navigation - it is a one page website - and to create a nice lightbox, which I think is custom made. With javascript off, there's no animations and the lightbox turns into links to new pages. The navigation also meets some issues because without javascript, jumping to the exact location of the correct section is not pixel perfect. Scrolling with the mouse fixes this issue.

Similar posts will follow. I could use a helping hand in finding really unique and original pieces of material so please let me know about any websites you may have similar to these ones. If you liked this article you can subscribe to our RSS feed and stay updated as new articles get published.

Published on Monday, October 19th, 2009 at 2:17 pm in javascript, showcase.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.
 
  1. Inal says: October 21st, 2009 at 10:42 pm

    Salut,
    Premièrement J’ai juste envie de dire qu’on est en 2009, et que Javascript est utilisé par 97% des utilisateurs du web. Deuxièmement essaye d’utiliser Facebook sans javascript.

    English version:
    Hi,
    Firstly, I just want to say that in 2009 Javascript is used by 97% of Internet users. Secondly, try using facebook without javascript.

  2. admin says: October 21st, 2009 at 11:19 pm

    Hy Inal,

    Those statistics range from website to website. You should check on your own website how many people do have javascript within their browser. For a non-technical niche website, that percentage will be much lower, while for an IT site it will probably go to almost 100%.

    I don’t really use Facebook, sorry.

    French:
    Ces statistiques sont différentes du sit au sit. Vous devez vérifier sur votre propre site combien de personnes ont JavaScript dans leur navigateur. Pour un sit de niche non-technique, ce pourcentage sera beaucoup plus faible, alors que pour un sit informatique il ira probablement à près de 100%.

    Je n’utilise pas Facebook, désolé.

  3. Buttons and usability says: February 9th, 2010 at 3:03 pm

    […] 3. Javascript DOs and DONTs. Complete with 17 examples from real web […]

  4. Make your own jQuery slider using XML says: March 4th, 2010 at 4:54 pm

    […] 3. Javascript DOs and DONTs. Complete with 17 examples from real web […]

  5. Awesome Slider demo and source codes says: March 4th, 2010 at 5:05 pm

    […] 3. Javascript DOs and DONTs. Complete with 17 examples from real web […]

  6. Christopher says: March 22nd, 2011 at 1:39 am

    So basically you’ve shat on a bunch of websites that don’t have graceful degradation when Javascript is off, in a world where the only people browsing without Javascript are paranoid nerds and ancient hardware.

    Graceful degradation is a valid concern, but your article represents these as design faux-pas when all they really are are lazy developers who didn’t think about the 1%.

  7. Bogdan Pop says: March 22nd, 2011 at 1:04 pm

    Christopher

    Given the fact that some of these websites have a really basic design, yes. Simple animations can be done via CSS, so after javascript, a css fallback would be nice and an actual usable website would also be nice if using an older browser.

    It’s not about the 1% or 3% visitors that can’t use the site, it’s about the wrong mindset developers go to work with.

    If there’s any chance your target audience doesn’t use a modern browser, than you have to develop for that specific audience.

    Your market is gold and you must develop especially for it.

  8. Zachary Meiu says: July 21st, 2011 at 6:23 pm

    “It’s not about the 1% or 3% visitors that can’t use the site, it’s about the wrong mindset developers go to work with.”

    “If there’s any chance your target audience doesn’t use a modern browser, than you have to develop for that specific audience.”

    Absolutely! Very well said!





Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.


If you do not have a username, you can register in just a few clicks.