2

I am trying to create a navigation bar that will sit at the top of my website for all of my pages.

I am much more familiar with the code that the Raphael library uses, and it will be much simpler for me than creating a bunch of tiles and the corresponding JavaScript.

Is there any problem with using a canvas for these sorts of purposes?

Does anyone have a better idea?

Thanks in advance for any advice.

UPDATE: Problems with render speed? Again, I'm totally open to alternate suggestions!

matt hoover
  • 326
  • 2
  • 7
  • 23
  • 1
    How complicated should that navbar become? Do you need to use any SVG features? – Bergi Oct 23 '12 at 22:34
  • how will the nav bar be accessible to users with no JS? – logical Chimp Oct 23 '12 at 22:37
  • 1
    @ logical Chimp What types of users don't have JS? The library claims to be compatible for all users with IE6 (2001) or above – matt hoover Oct 23 '12 at 22:39
  • @Bergi I just figured that it would be an easy way to make the nav dynamic and look pretty – matt hoover Oct 23 '12 at 22:40
  • 1
    whatever you do, start with a element based "non-js" version, that you remove and enhance for users with js. ... but i agree - most users have js, just a question of whats "mission critical" content. – Bosworth99 Oct 23 '12 at 22:54
  • @Bosworth99 So my question is why "ought" I to do that? This isn't a huge production website, and I want to be able to easily change graphics later on so why not use a canvas? Does javascript fail to load on occasion? Also what do you mean by "mission critical"? – matt hoover Oct 23 '12 at 22:58
  • 1
    re: "What types of users don't have JS?" - please see my answer below, or see http://www.searchenginepeople.com/blog/stats-no-javascript.html and/or http://stackoverflow.com/questions/1785083/how-do-web-crawlers-handle-javascript – Peter Hanley Oct 23 '12 at 23:11
  • @PeterHanley explains this very well. I'm all for new goodness on your web site, but you need to ensure that the mission critical (ie- your naviagtion) content is always available to non-js entities (like web crawlers, the overly cautious, and your gran-mamma)... – Bosworth99 Oct 24 '12 at 00:41

1 Answers1

3

Short answer: Probably not the greatest idea.

Longer Answer: As logical Chimp hinted, using the canvas for a crucial element is certainly a bad idea, as browsers with no javascript support and/or no canvas support (including web spiders, and browsers that are for various perceptual differences (blindness, etc)) would see nothing. (for people, this means they won't find your sub pages. For web spiders (Google, etc.) this means no one would ever find your sub pages.)

If you want to use Raphael or another canvas based solution, for accessibility you should start with an html based navigation element (like ul li in a div as has been done for years), and then you'll replace that via javascript when the page loads (see HTML5 Canvas replace to <div> for an example of how to do this (includes a jsfiddle link)

The reason it's not the greatest idea is that you'll need to ensure that you keep your html nav element in sync with your canvas based one - although I guess if it's being generated by a server side process (e.g. wordpress) it's not too much more work to build the html nav element, and then you only need to test it regularly to ensure it's working.

Community
  • 1
  • 1
Peter Hanley
  • 1,254
  • 1
  • 11
  • 19
  • So would it be possible for me to test and see whether or not a user has JavaScript enabled and if not have a different "non-java" layout appear? – matt hoover Oct 23 '12 at 23:22
  • 1
    Yes, that's totally possible - although one test is done automatically, in that browsers that don't support javascript just ignore anything in the script tags. See http://stackoverflow.com/a/121259/602581 for one implementation idea, but frankly it's more important that the site work when you test it with javascript disabled, and with canvas disabled. If Raphael doesn't already support some sort of compatibility test, you could also use http://modernizr.com/ – Peter Hanley Oct 23 '12 at 23:24
  • Also, maybe look at the modernizr load tutorial -- http://modernizr.com/docs/#load – Peter Hanley Oct 23 '12 at 23:38