Dan Rubin's Superfluous Banter - Latest Comments in Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Mike — Mon, 26 Jul 2004 20:01:15 -0000

Oh, and I think Blogger uses it too (on the CMS part where users edit their weblog), I was really confused when I saw their matrix, but now I understand how it works!

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Mike — Mon, 26 Jul 2004 19:59:14 -0000

I'll be trying this for sure. Tabstrips with overlapping tabs can be seriously confusing. But, I am building a serverside scripted app (php), so I'm not about the matrix. Should i just include all possible tabs in the matrix, even though users might not even see some of the tabs (due to the rightsmanagement). Anyway, I'll see if I can get it to work.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

stan — Fri, 21 May 2004 13:07:03 -0000

I hate to be a harebringer of bad news but overall there are still problems with this solution in ie 5.x for mac. The nav does not line up.

ie does funny things when you try to line things up lots of times.

sorry.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Bryan — Mon, 10 May 2004 01:32:34 -0000

This is a great idea and method. It allows for the opportunity to create a similar flash navigation where you don't have to worry about preloading the image rollovers. I just created an example that would be something like what I would see in a flash navigation. Anyways, let me know what you guys think. Its just an animated gif.

http://www.btkdesigns.com/m...

Bryan

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Jim — Sun, 09 May 2004 17:34:55 -0000

I picked up on this method after reading Dave Shea's article 'CSS Sprites' over at ALA.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Bob Easton — Sun, 09 May 2004 00:12:49 -0000

Regarding accessibility by screen readers: both Jaws 5 and Home Page Reader 4 do just fine with this experiment. Confirmed by actual testing. They both read the text links exactly as presented in the HTML. The images are completely irrelevant as they are background images, and the screen readers don't even know they exist.

Unlike the image replacement techniques which often use display:none to hide the text, this technique leaves the text available to screen readers.The technique is much more accessible than some image replacement methods.

Very nice job Didier!

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Didier Hilhorst — Sat, 08 May 2004 10:23:25 -0000

Kris — You are absolutely right, and I noted exactly this in my reply to Nicks\'s comment. But personally I find that the possibility of users browsing with images turned off and CSS turned on is rather an exception. However I do not have any data to back this statement up. It would be interesting to know what percentage is using these particular settings. I know it is usually done to improve download speeds etc. I think CSS-IR has its place in real world web design, and I don\'t think we should avoid this method just because there\'s a possibility of it not working properly. As far as IE/Mac is concerned I think my updated version solved some issues, but I did not check that myself.

James — Please see Navigation Matrix Reloaded for an updated version of this method, which effectively solves the flickering issue in IE6.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

James Holbeach — Sat, 08 May 2004 03:46:58 -0000

Hi DH, firstly a very clever solution to a problem I've been thinking about for some time. However, as with Jon, the flicker in IE makes it unacceptable (note in Moz it works BEAUTIFULLY!).

I tried changing my settings back to automatically, reloaded the browser, but the flicker was still there, no matter what I did?

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Kris — Thu, 06 May 2004 06:43:00 -0000

Didier, I recall an article on ALA, possibly written by Douglas Bowman, in which a floating bug in IE/mac is addressed; when both the element and the content of that element are floated, IE/Mac suddenly behaves properly on adjusting the width of the element.

I don't remember which article it was, but I am sure it is easy enough to find.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Kris — Thu, 06 May 2004 06:37:24 -0000

Though it is a great technique, Dan's method has a major accessibility flaw and is not so much, as he states, 'accessible'. Being able to be read by screenreaders is only part of the story. Turning image-loading off in a graphical desktop-browser is all that is needed to render the menu inaccessible.

Until this issue is resolved, I will not use CSS-IR for critical site functionality.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Susanna — Thu, 06 May 2004 01:32:17 -0000

For more information on this technique, read the article "CSS Sprites: Image Slicing's Kiss of Death" in A List Apart: http://www.alistapart.com/a...

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Didier Hilhorst — Wed, 05 May 2004 08:17:13 -0000

Bruno — I'm afraid I will have to agree with Andrei regarding support for IE5.x for Mac. Just a small fraction of users browse the web using IE5.x for Mac and I think it's not worth the effort and trouble to hack my way around to support that browser.

That said if anyone has a quick fix that doesn't require a zillion hacks I'm all ears. The more that is supported the better obviously. But at a certain point it's not worth the effort.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Bart N. — Wed, 05 May 2004 07:18:10 -0000

That's some sweet navigation !

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Andrei Herasimchuk — Wed, 05 May 2004 00:04:01 -0000

Why is anyone using Mac IE 5 anymore? Dump it? Safari is far better and free. If you are using OS 9 with Mac IE 5... well... if one wants to live in the dark ages (in computing time), then I think designer's should just let them stay there. 8^)

Nice job D.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Bruno — Tue, 04 May 2004 22:41:12 -0000

Didier, thanks for sharing your experiments wth us! Visually the result his awesome. Unfortunately, it isn't IE 5.x Mac friend due - I think - to the browser CSS position related bugs. Have you check it out?

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Didier Hilhorst — Tue, 04 May 2004 22:06:29 -0000

First of all I'd like to thank everyone for the very kind and encouraging words. This method certainly has some flaws and there's definitively room for improvement. I'll address some of the individual remarks and commments below. Michele — Thanks for pointing that out. It's a bit of an odd thing really, but I tested it and it happens indeed. Isn't code a wonderful thing? I'll update the stylesheet soon.Brian — I need the bottom two rows (-66px and -88px) because on the active state the tabs overlap other sections, i.e. the gray colored active tabs are actually wider than the width of the list element (visually). To make sure it looks good, and correct, the remaining parts of the image are included in adjecent elements. Download all the files and play with the background positions in the CSS file and you will see why they are needed.Andrew — That's an interesting view on the matter. I think you are right to make the analogy and link the various methods, although I did not specifically look at these two articles at the time I created this example. Of course I based my work on knowledge posted by others, including Dave, Dan and Douglas.Nick — This example inherits the problems inherent to the FIR (and similar) methods: when stylesheets are enabled and images disabled the navigation will not work, i.e. users will not see anything. However, none of the content is actually hidden or not displayed , so to my knowledge blind users working with JAWS should be able to use the navigation. However it would be nice to have a confirmation on that, if possible.Jon — The damn flickering is something the IE team should fix, honest, too many designers are suffering from this obvious flaw. That said the flickering in IE6 will only occur in one instance. IE6 has an assortment of options to check for newer versions of stored pages, that are located under Tools » Internet Options... » Temporary Internet Files » Settings. In that list you can choose between:Every visit to the pageEvery time you start Internet ExplorerAutomaticallyNeverThe automatically option is checked by default. Most designers set this option to every visit to the page to make sure they're not viewing a cached version (when testing). When the latter setting is used it will flicker no matter what you try, IE6 will load the image again each time you hover, and thus result in flickering, unfortunately setting a background image the the list element itself does not solve the problem. But my guess is that just a small percentage is using these settings (it just happens to be the small percentage looking at this and other examples, probably.) With all the other settings no flickering occurs, to my knowledge.Tony — That's an odd problem. No such thing happens in my version of Opera (7.03). Normally it shouldn't occur in Opera 7.5 Beta 1 either. The image is downloaded once. The only thing that happens in the hover state is the change in background position. I have no explenation for the problem except that the image didn't load correctly the first time around (due to an unknown reason.)

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Tony Crockford — Tue, 04 May 2004 20:39:51 -0000

the first time I looked at the example in Opera 7.5beta1 the tabs didn't show up in the normal state and only appeared on rollover.

a ctrl refresh sent them away again...

thought you'd like to know.

tony

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

justin — Tue, 04 May 2004 20:30:33 -0000

If I'd known that I was going to be viewing such beauty, I would have put on a diaper. Simply lickable!

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Ireney Berezniak — Tue, 04 May 2004 19:36:27 -0000

Great post indeed! I love the creative use of the CSS. Fine method to maintain accessability while treating with eyecandy at the same time! I'll be sure to "steal" this technique for my own use >8P

ib.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Alex Weber — Tue, 04 May 2004 19:36:01 -0000

not really new, but very nice and very cool

bye alex

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Jon Hicks — Tue, 04 May 2004 19:35:48 -0000

I've been using a similar method recently (not with all images in one file - I wish I'd thought of that!), but have a problem with flicker in IE 6. Its only a second or so, but its bad enough to look unacceptable.

To get round it, I had to apply the rollover state to the background of the <li> and set the background-image in the <a> tag to none. It still uses the same image file. Have you come across this problem with this method?

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Bruce Boughton — Tue, 04 May 2004 18:40:07 -0000

I've been using this technique for ages, in mock-ups at least. To me it seems the best technique for image based navigation menus since it eliminates the delay between loading the mouseover image without any complicated JS pre-loading. It can take some fiddling to get right, depending on context but it's pretty easy once you get your head round. It's nice to see it showcased in such a clear manner.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Zelnox — Tue, 04 May 2004 18:02:09 -0000

Amazing (^_^)//

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

eric — Tue, 04 May 2004 17:44:51 -0000

Nick, Didier is replacing his links with background images, when read by something like JAWS it should render as an ordered list, as he said. There's nothing in his code that he can apply an alt="" field to.

Re: Navigation Matrix @ Dan Rubin’s SuperfluousBanter

Craig — Tue, 04 May 2004 17:24:38 -0000

Great explanantion Didier, maybe we will even see it used in site sometime soon ;-)