Jump to content
Larry Ullman's Book Forums

When Js Isn'T Available.


Recommended Posts

Hi,

 

I've been using Twitter's bootstrap as a base for my site. I've been just playing with it in most browsers to see how it works. But one thing struck me, when JS isn't enabled I'm not sure how to overcome these problems. Forgive me if this is in Larry's book, I haven't finished reading it although I did have a quick look. I notice that in your site Larry if you disable JS and then resize your screen you get the bootstrap collapsed menu, however you can't click it to reveal your navigation links. I too would have the same problem plus I have a login within my navbar.

 

I'm just wondering how or what exactly you go about fixing this problem? Again, apologies if this is covered in the book, I couldn't see it.

 

Thanks

 

Jonathon

Link to comment
Share on other sites

Unfortunately, that's the nature of the beast. With JS disabled, you lose a lot of functionality, and certainly, that's one if the downsides of relying on JS libraries to do all the work for you.

 

Obviously, you'd most likely want the non-JS version of your site to mirror the JS version as much as possible, but that's not always possible/practical. With that said, I think Larry says in one of his books somewhere, as long as the non-JS site works and gets the user the information necessary, that's good enough (even if the site looks/behaves like crap). I more or less agree with this, but obviously, if given the time, making a non-JS version of your site that is similar in appearance and functionality never hurts.

 

Here's my main COA when designing a site to have both a non-JS and JS version:

 

1) Plan, plan, plan! In regards to the above, this means trying to minimize JS as much as possible while still giving a good experience. By minimizing the JS used, the two sites will be more similar and it'll be less work to get both working correctly.

Unfortunately, if you're locked into something like Twitter bootstrap, then you might have your work cut out for you in this regard. This is one of the main things I don't like about a lot of JS libraries these days: they use JS for a lot of things you don't need JS for; nowadays, you can do a lot with HTML and CSS alone.

 

2) Use noscript tags for content that is required as a replacement for JS-generated content when JS is disabled. For example, you might make a new, second menu within noscript tags to handle navigation when your Twitter bootstrap menu is busted because JS is disabled.

 

3) For content that requires JS, either generate the markup for it using JS, or use CSS to hide the content by default, and then use JS to display it when the page first loads. If you don't do one or the other, then you will get JS-dependent content appearing on the screen, which is useless and confusing to users who have JS disabled (ala your Twitter menu).

 

4) With all the above in mind, develop the entire site first without using any JS. This will serve as a solid base. After that, add JS functionality as needed, keeping all the above in mind. Because this may be time-consuming, you may want to consider launching with the non-JS version only (since that should be enough to do whatever on your site), and then adding JS functionality here and there post-launch.

 

And that's basically it. Obviously, depending on the scope/size of your site, this may add considerable time to development, but that's the price you pay if you want a decent non-JS site. I think a log of people these days don't find it worth the effort to do all of the above though (so they don't).

 

And keep in mind that there are other things to consider these days as well. For example, "mobile first", which is a good guiding principle and strongly emphasizes loading content non-essential for the mobile version using JS. These sorts of considerations may very well conflict with designing a good non-JS site, so please keep that in mind.

 

Well, I've blabbered on long enough, and I probably mentioned a bunch of stuff you already knew, but there ya go.

 

- The other Jonathan (with a slightly different spelling)

  • Upvote 3
Link to comment
Share on other sites

As always thanks Jonathan.

 

Yes I suspected number 2, but wanted some input from a .js Aficionado. I'm going tobuild a site in Yii. Plan to do the whole thing with no Ajax so that it works. But started looking at Bootstrap and thought i'll have a play. Then got well into it, but i'm trying to keep in fairly .js minimal.

 

Thanks

 

Jonathon

Link to comment
Share on other sites

No problem.

I don't think that libraries like Twitter Bootstrap are bad (after all, they wouldn't be so popular if they were), but they do very much serve as a crutch for people who want to quickly get up a site that "more or less" works, but could be a lot better if they took a little extra time to develop their site without using those libraries.

 

You're a smart guy, Jonathon, so if you have the time and willingness to better learn the core of JS (which would prove invaluable, I think), then you may want to consider doing all the JS yourself. It's not as hard as you think for most things.

 

As a side, don't forget about the bloat that libraries like Twitter Bootstrap bring to the table as well. That's something that you should very seriously consider with the proliferation of mobile these days.

 

Well, good luck, and keep us posted.

Link to comment
Share on other sites

There are actually 1000s of lines of CSS in the un-minified version. It's only really to play with Yii however, but I quite liked it. I'm not much of a designer. I can code CSS fine, it's just I severely miss the art side of it and making it look nice.

 

Thanks anyway, you must drop me a email and let me know how your project was going.

Link to comment
Share on other sites

The project is coming along.

I set it aside temporarily to focus on more important things (e.g., family and projects that make money), but I'm back on it and hoping to finish sooner than later (I just need to stop being such a perfectionist about things).

Link to comment
Share on other sites

One thing I noticed about twitter before is that if you disable js in your browser it doesn't work and that they prompt you to get it enabled. So I am guessing this would be the thing to do with your website, come on this is now 2013, those that do not have js should rollover and die.

Link to comment
Share on other sites

Those that don't have JS enabled can include the blind, using screenreaders. Or someone using their Kindle or Nook. Or someone using a low level mobile device. Or someone using a gaming device's browser. Or a very high level user that uses a Javascript blocking plug-in. There are many reasonable causes for someone not to have Javascript enabled.

  • Upvote 2
Link to comment
Share on other sites

I knew the kindle was no match for the iPad, Amazon have some catching up to do. Well even so it's the same with eBay they warn that some of the features of a page will not work without js being enabled. But apart from that gotcha Larry on those good points.

 

Link to comment
Share on other sites

You also talk mainly of the American market are you aware that the technology in Asia is super advanced although it may not appear to be. So most of us have js here and in Hong Kong most people use a Samsung Galaxy Note over an Apple iPhone.

Link to comment
Share on other sites

Edward, I've lived in Japan for the past 7 years (and although I do agree that some countries like Korea are ahead of Japan), there is no way that Japan is more advanced than America.

 

Also, the Samsung Galaxy III is the most popular smartphone in America.

 

And let's not forget that none of the above has anything to do with the discussion at hand. Larry is absolutely right on the mark with his statements above.

Link to comment
Share on other sites

 Share

×
×
  • Create New...