Grow your CSS skills. Land your dream job.

Javascript disabled?

  • # July 7, 2008 at 3:35 pm

    I keep seeing on this forum and elsewhere that a good rule of thumb when designing a site is to have a fallback for people with Javascript disabled. Anytime anyone presents any design that makes use of Javascript, there’s always somebody who inevitably chimes in "don’t forget about people with Javascript disabled!"

    My question is this – who are all these apparent legions of people that don’t have Javascript enabled?? Most stats that I can find say that 95%+ of web users have Javascript turned on. In addition, IE6 and 7, Firefox 2 and 3, and Safari 2 and 3 account for about 98% of web traffic combined – all modern browsers that support Javascript and (I believe) ship with it turned on.

    This tells me that the <5% of people who have Javascript disabled are using either:

    1. A modern browser with JS intentionally turned off
    2. An old browser
    3. A specialized browser (WebTV, cell phone, etc.)

    In case 1, the user has decided for themselves that they don’t want to see JS-based content (for whatever personal reason), and in cases 2 and 3, the user wouldn’t be seeing your site correctly anyway, JS or not – those browsers don’t support the latest standards.

    Is it worth the time to craft JS-free fallbacks for our sites just for this specific group of people? Again, going by the stats, there are more people with screen resolutions of 800 x 600 than there are people with JS disabled, yet everyone designs their site for 1024 x 768 nowadays – even major corporations (Apple, Microsoft, Amazon, etc.).

    # July 7, 2008 at 5:31 pm

    I’ve asked myself the same question in the past. I think that’s it’s important that your website is accessible for anyone, so also for the people without css or javascript. What about blind visitors (I hope I say it good this way in English?) or the mobile phone visitors? Ok, they can’t have all the functions that the people with javascript turned on have, but my opinion is that the content of your site should be accessible for those people too.

    .V1
    # July 8, 2008 at 3:08 am
    Code:

    Great fallback. (trying to make a point here)

    # July 8, 2008 at 5:52 pm

    You will undoubtedly at some point be pressed for time and create some web functionality that is 100% reliant on javascript. It’s not the end of the world, but if you are trying to be the best web designer you can be, you shouldn’t. You are probably right that it is a very low percentage of people who are visiting your site without it, but no matter who they are and why, it shouldn’t mean they are penalized in any way.

    This is especially true when it comes to key functionality. If you wanna add some fancy animation to your menu bar, that’s awesome, but it sure as heck better default to a regular menu with javascript off. And don’t forget about that "Add to cart" button… The last thing you need is your client ripping you a new one because they are getting calls from people who can’t seem to add products to their cart.

    # July 8, 2008 at 6:10 pm

    Again it comes down to target audience. If your users won’t be using mobile devices, or using their work’s / school’s computer you can ignore old browsers and lack of JavaScript. You will also suffer from poorer SEO because spider bots don’t have JavaScript enabled either!

    I prefer to use JavaScript to enhance usability and design, not dictate or create it.

    # July 9, 2008 at 8:47 am

    Personally I don’t think you should require JS to perform main functions on a web application, but I do understand the nicety and some improvement on usability issues it can do.

    Here’s what mostly can’t use or don’t support* JS:

    • Mobile devices[/*:m]
    • Screen readers for people with disabilities[/*:m]
    • Text-browsers[/*:m]
    • Users with NoScript-plugin installed[/*:m][/list:u]

      (* JAWS, for instance, supports javascript to a degree. An AJAX-powered webpage does create problems for JAWS’ rendering/reading)

    # July 9, 2008 at 2:50 pm
    "chriscoyier" wrote:
    This is especially true when it comes to key functionality. If you wanna add some fancy animation to your menu bar, that’s awesome, but it sure as heck better default to a regular menu with javascript off.

    I bring this up because I wanted to add some animation to my portfolio site. When you click a main category in the menu, a submenu smoothly slides down from "underneath" it (not really, but it just looks like that because it expands from a height of 0px).

    Now, there are two ways I could have done it. One is to use CSS animations, which is super simple to do. The problem is it’s only visible to Safari users, and the CSS isn’t valid because the properties are prefixed with "-webkit". The other way is to use Adobe Spry effects, which are JS-based but will therefore work for anyone (with JS enabled, of course).

    Therein lies the problem. I opted to use Spry effects, but it didn’t occur to me until later that without JS, the submenu is completely inaccessible. This is because it’s drawn initially at 0px height, and then there’s no way to make it expand since the JS does that. If you turn styles off as well, then you can see it (because the 0px declaration disappears).

    I’m just frustrated that there’s no good choice. If I go with JS, the submenu is inaccessible for people that have it disabled; if I go with just CSS, the animation is only visible on Safari; if I go with neither, there’s no animation. Why must everything in web design be so difficult?! :lol:

    .V1
    # July 9, 2008 at 4:17 pm

    Javascript is not a problem aslong u gracefull degration for browsers / users who dont support / have javascript enabled.

    Also, as long your menu has been build with a good solid markup and <a href>’s there should be no problem.. it would still be accesable, the javascript would only help with showing fancy show hide animations etc.

    # July 10, 2008 at 5:08 am

    Also just think carefully before making main content only viewable through javascript (if there’s some kind of XML-load or what have you), as Google writes in their Webmaster Guidelines:

    "Google Webmaster Guidelines" wrote:
    Use a text browser such as Lynx to examine your site, because most search engine spiders see your site much as Lynx would.

    If fancy features such as JavaScript, cookies, session IDs, frames, DHTML, or Flash keep you from seeing all of your site in a text browser, then search engine spiders may have trouble crawling your site.

    Else, I’d say go for it. Make it fancy, and impress (future) clients if you can ;)

    Also, if you don’t have Lynx or don’t want it, I recommend checking out the Yellowpipe Lynx Viewer-plugin for Firefox

    # July 10, 2008 at 9:25 am

    A good example on JS-reliability, is when you need it to perform search. Search is a function which should never require anything else than the standard HTML setup (input-elements aso..) to perform its actual function. JavaScript could of course help out with usability, like auto-completion (sometimes this works not as intended) or showing similar searches.

    I’ve used sites where the submit-button looks like this:

    Code:

    This fails and does not degrade gracefully. The page I got it from didn’t even include a <noscript>!

    # July 10, 2008 at 4:13 pm

    In stat of using inline javascript like in that example I suggest to use jquery and keep the javascript out of your xhtml!

    .V1
    # July 12, 2008 at 7:45 am
    "Edwin" wrote:
    In stat of using inline javascript like in that example I suggest to use jquery and keep the javascript out of your xhtml!

    Or use Adobe Spry to keep javascript out of your xhtml. POKEMON@@@

    # August 1, 2008 at 12:11 pm

    is there any way to detect if a user has javascript disabled and then load an extra css file?

    .V1
    # August 1, 2008 at 1:44 pm
    "robotobi" wrote:
    is there any way to detect if a user has javascript disabled and then load an extra css file?

    <noscript>
    <link rel="stylesheet" type="text/css" href="bla.css" />
    </noscript

Viewing 14 posts - 1 through 14 (of 14 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".