{ August 27, 2003 }

Macromedia's Hybrid Navigation

I could be late to the party on this, but while browsing around the Macromedia home page this morning, I noticed something interesting about their primary navigation. In their Store, Macromedia's web developers are using a mix of css, javascript, and unordered lists to create a gorgeous, Aqua-style navigation with glowing rollovers, sub-navigation, spacer pipes, and a search area. The code is very lightweight, and renders perfectly in every browser I tried.

But if you go to the home page, you will receive a Flash version of the menu with identical effects and user experience.

Now, perhaps the unordered-list version in the Store was initially created so end-users without the Flash player would receive a consistent user experience. Fair enough. But what doesn't make sense is the trade-off associated with providing two duplicate versions of the same navigation, when one (the unordered-list) is accessible by everyone using a standards-compliant browser, could be easily deployed site-wide without any need for detection or fancy document.write actions, and would (or should) elegantly degrade to older browsers / devices.

The question comes down to value - does the Flash version of the primary navigation enhance the user experience by superseding the limitations (if any) of the unordered-list? From what I can tell, the answer is no -- both provide an identical experience (and a good one at that).

So why bother? To showcase the abilities of Flash? Everyone already knows what Flash can do. The navigation would hardly persuade a novice into buying the application. Political? Who knows.

I'm not writing this to harp on Macromedia or their web crew -- they have done a fantastic job redesigning their site, and have created one of the best examples of unordered-lists for navigation I have ever seen. It's their site, and they can do whatever the hell they want. My central point is that the unordered-list version is actually superior to the Flash version, and should hardly be used a backup scenario.

Comments

And (at least for me) the css/javascript version is a lot more responsive. BTW in Safara the "Search" on the far right renders vertically to high, okay in IE522.

Posted by: Hugh at August 27, 2003 10:54 AM

i remember during their beta tests of the site a few months ago, they developed a sort of time lag with the top level nav so that when rolling down to the second level, a quick brush with another top level nav element didn't switch to its subnav (did that make sense?). hugh, that time lag is probably responsible for your responsiveness complaint. you have to linger on a tab a little longer for it to realize that the action wasn't accidental.

i agree though, they did an excellent job with the non-flash version of the nav...is it a matter of file size? anyone check?

Posted by: Amit Snyderman at August 27, 2003 11:22 AM

I agree that the CSS version is better than the flash because it works in all browsers. However, I'm a little confused by their coding. Why bother with <li class="pipe"> </li>? Couldn't you just make the background image for each list item have the pipes drawn into it? It seems a little odd to me.

Posted by: Mike Steinbaugh at August 27, 2003 12:21 PM

Why can't they use the CSS version everywhere as an example of what you can do with Dreamweaver, and use Flash for more appropriate things? Having the navigation change in different areas of the Macromedia site is annoying.

You can turn off the Flash navigation on their accessibility page, but if you do you get an error message on the formerly-Flash pages ("You may not have everything you need to view certain sections of Macromedia.com."). This is annoying and confusing because they're acting like I broke something by setting my preferences, and it's insulting to people who may need to use the CSS/HTML version because they're using assistive devices. Also, you still get the Flash navigation in some areas of the site despite setting your preferences, and on Mac IE5/OS 9 the Flash loads so slowly it's practicaly unusable.

Posted by: kirkaracha at August 27, 2003 12:38 PM

Mike, Flash will render in 'all browsers' that support the plug-in, unless you're talking about user agents like cell phones and the like (& even those are coming along). If that the case, then the non-flash benefits are clear, but I'm not sure how much that's a part of their target spec.

I've wondered about their decision also-seems like a duplication of work. I could understand it on a home page if they wanted to animate it in or something, but nothing like that seems to be happening. Politics perhaps?

Posted by: A. White at August 27, 2003 12:41 PM

One thing I noticed on the list version using Safari is if you type something into the search box the type is misagligned so that you can only see the tops of the letters.

Posted by: Kai at August 27, 2003 12:42 PM

Visually, the menus remind me of the ones on the cingular.com site. Just as slick (and CSS/Javascript only), IMO.

Posted by: jtnt at August 27, 2003 1:14 PM

The home page includes the delay (flash) as mentioned. But the CSS version I see no delay, a quick mouse sweep turns the sub-cat into a ticker tape word jumble. Also Flash as it's always good with is a bit smoother, CSS/JS's telltale is usually it's "chunkiness" and fractured (and faster) rendering even if it is a 1/10th of a second...

When it comes to someone buying their products, they probably want to be as standards compliant as possible... While on the home page they have a little more leeway and can more actively push their semi-proprietary flash system...

Or maybe they just haven't gotten around to it...

Posted by: LFN at August 27, 2003 1:31 PM

Amen. This is something that will forever boggle my mind. Macromedia isn't the only culprit, many, many sites do this. Flash is a great tool and when used for the right reasons can add value to a site. Why on earth would you provide Flash anywhere you can do the same with (X)HTML?

It just doesn't make any sense.

Posted by: Keith at August 27, 2003 2:11 PM

Now that I am comparing two versions, the non-Flash works better than the Flash one. If you roll across the global nav of the flash version, the subnav below doesn't change. You have to roll off the global nav in order for the sub nav to disappear. Am I making any sense?

Posted by: donny at August 27, 2003 2:58 PM

Not wanting to be the voice of dissension, I hesitate to mention that I dn't find the two experiences to be identical.

I certainly agree with the concept that things should be done in CSS when possible, and not Flash. However, it looks to me like the version on the home page does a few things that aren't easily achieved with CSS.

Specifically, I noticed that the main menu glowing backgrounds fade in an out, rather than just appearing and disappearing. The CSS version doesn't do this. Also, the submenu hover effects contain rounded borders -- and we all know what a PITA those can be with CSS.

Certainly the two are VERY similar, and I probably would have just gone with e CSS version if it had been up to me. But, I don't think it's quite accurate to say they provide identical experiences. The Flash version is decidley more polished, in my opinion.

Posted by: Jeff Croft at August 27, 2003 3:10 PM

I love the new site design as well. I checked out the Store's navigation and I like it better. I understand why they put the lag time on the rollovers for the flash version of the nav, but I gotta say that I'd rather have it respond immediatly on rollover. It just makes the flash nav seem like it's slow at building the sub navigation. Kind of annoying, but not a big deal. I still love the new site design.

Posted by: Ryan Terry at August 27, 2003 3:18 PM

On slower systems (500Mhz iBook) the css version of the navigation appears to be a lot more responsive than the Flash version. It also loads a lot faster.

Posted by: Thijs van der Vossen at August 27, 2003 4:44 PM

I remember a long while ago when MM had a completely html front page people kept complaining that they should have flash...
So I laughed when I read this. I personally think that on your average site it may not make sense to have both menu types, but MM is a showcase site...
and particularly on the front few pages they want to showcase what cute things they can do with flash, and deeper in the site they probably want to make things as accessible as possible, and perhaps also want to show off what they presumably built with DW

Posted by: scottbp at August 27, 2003 7:07 PM

Could they be doing some kind of data gathering with the Flash menu that is just not possible with ole' Javascript? ie. exact player versions, user settings, etc. etc.. That might explain why they want a SWF on as many pages as possible, and the use of the CSS version as backup.

Posted by: Aaron at August 27, 2003 8:02 PM

Maybe their designers are just implying, "hey we know our shit we are so versitile we can do it both ways!"

Posted by: brian sanford at August 27, 2003 8:38 PM

It looks like a bit more elegant version of the menus that are created with the projectseven plugin thingy
www.projectseven.com

Posted by: liz at August 27, 2003 9:24 PM

There is a good article on Flazoom about a slight advantage to Flash version of Macromedia's menu bar:

http://www.flazoom.com/cooler/1062010666,74911,.shtml

To summarize, using setInterval in Flash, the sub-menu items of the neighboring group won't replace the current showing items until you hover over the neighbor for a second or so. It's a nice, subtle advantage that is hard to replicate with DHTML.

Posted by: Brennen Florey at August 27, 2003 9:28 PM

One thing I dislike about flash navigation is, if you use your keyboard to traverse the links of a page, you get 'stuck' in the flash bit and you can't tab past it.

Posted by: billy at August 28, 2003 3:37 AM

Probably not enough of a reason to implement it in the nav, but...

When you go to the home page with a slightly outdated version of Flash, the blank space below the top row of buttons (when no submenus are showing) says something to the effect of, "Hey, you're running a slighly outdated version of Flash! Come inside and upgrade for a while."

The CSS version doesn't do that. :)

Posted by: Nate Cook at August 28, 2003 5:42 AM

What I see as the most relevant to me is the question " why use flash when you can avoid it?" .

http://www.7nights.com/asterisk/archives/examples_of_good_flash_use_needed.php#447

I like the css/javascript version better too.

Posted by: gaston at August 28, 2003 1:16 PM

The usability improvements on the Flash version deal specifically with the types of user frustration that CSS menus usually lead to. The Flash menu requires less precision in the user's movement of the mouse, and that benefit, while small, helps to make the menu more usable. As Brennen Florey pointed out, I wrote about it yesterday on Flazoom.com.

The use of this menu is really geared towards frequent visitors to MM.com. People who visit the site multiple times a week are really the only ones who benefit from this type of sub-menu navigation tool because infrequent users are going to make their decision as to where to click before they discover the sub-menu feature. User Interface Engineering has an interesting usability study that shows that users decide first and move second ( http://www.uie.com/Articles/what_they_want_article.htm ). In that article the use of navigation elements like this sort of 'pop-up' navigation or pull-down menus is questioned in terms of providing functionality to users. In their words:

"In our studies, we observed that once users realized there was more information available to them, they stopped and re-evaluated the screen. Users seemed disoriented by this disruption in activity and they lost confidence that they were clicking in the right places. The users now questioned a choice that seemed to be a good one earlier."

Having said that, both version are well deployed, but the CSS one requires the extra effort on the part of the user. In this case I would argue that the improved user experience is more than enough reason to deploy a Flash based menu (especially on MM's site) over a CSS version.

Posted by: CHris at August 28, 2003 5:34 PM

I use mozilla so at first I didn't even realize there was a difference with these menus. I myself am having a harder time trying to find a use for flash in my own works these days but... the reason I think the flash menu is BETTER is becuase it ensures the site works right in different browsers.. I have found that Internet explorer tends to be a pain the @$$ with css rollover image menus. On my machine and most of my friends machines if you run IE 6.0 the navigation is quircky at most as IE reloads the background image everytime u mouse over and out.. this creates an akward 1 second moment for the user and if you zoom your mouse over a couple of rollovers IE will actually stop loading the rollover glows all together. This has been my main deterence from using block style links with background images in CSS to this day. Mozilla des it fine but microsoft is still screwing off like they usually are.

Posted by: Jim Jeffers at August 30, 2003 4:30 PM

Sure, the CSS version renders very nicely on compliant browsers. But Macromedia, at the end of the day, isn't out to change the precedent for web standards as their main focus; they're out to sell stuff. Specifically, out to sell Flash. While they might be exaggerating when they say 98.7% of browsers used today have Flash, it is probably a greater number than the number of fully compliant browsers.

If anything, i would question why they used the CSS solution on their store page, where, in fact, they're trying to sell the product that created the OTHER version of the menu.

After all that, however, yes, the store pages loads 3 times as fast and looks almost as good...

Posted by: Brent Eveleth at September 4, 2003 4:03 PM

I am glad you ended by saying the CSS version is actualy superior, because it is. Specifically being able to copy the URL and to open in a new Window when wanted. I am not 100% sure but I don't think Flash does that.

Posted by: Paul Watson at September 7, 2003 4:04 PM

I can see the slight advantage in look and feel gained by the Flash menu - the fades and rounded edges and slight pauses makes it seem more "professional"... but I don't think I would have deployed the Flash version over the CSS myself. Flash just dosen't degrade as well, and as a long-time Flash booster it saddens me to admit that Flash's usefulness for major site elements is dwindling. Fortunately MM has noticed this and is compensating by making Flash MX 2004 more of an IDE - Flash is great as an application front-end.

Oh, and Jim Jeffers - check out http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ . You'll never have a problem with CSS rollovers again.

Posted by: Ben at September 7, 2003 5:19 PM

Oh, and Jim Jeffers - check out http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/ . You'll never have a problem with CSS rollovers again.

Posted by: Ben Hollis at September 7, 2003 5:32 PM

That XHTML/CSS menu is nice... until you pump up the textsize to make it readable. Then the last menu item goes under the search box, the submenu gets word wrapped. Sigh.

Posted by: Sebhelyesfarku at September 8, 2003 12:15 PM

I imagine that Macromedia must be in a position similar to that of the big tobacco companies who occasionally advertise to minors NOT to smoke.

In other words, if MM were to present a convincing argument that CSS was as cool as Flash in some ways, they would effectively lose some of their market.

Posted by: Trace Meek at September 9, 2003 4:59 PM

I was just going thru the Macromedia site yesterday and was feeling the Flash navigtion and scrolling on the extensions pages were totally uncalled for. I find it more difficult to get thru the site than before. If they're trying to convince me to design Flash sites, they've failed.

Posted by: onajide at September 9, 2003 6:30 PM

Hmmm. I have been using this horizontal nav type design for some time on one-network. I wanted to maximize use of space for my photo stuff, and such a nav layout got the job done in the smallest space.
I must admit i like it on macromedia's site - and even though i do lots of flash - IMHO never use flash for navigation - especially on a homapage. Google cannot read it and you will not get indexed properly as a result. ( I love this WDIK site look with all the grays - its quite elegant )

Posted by: Jeff Johnson at September 10, 2003 7:34 AM

Their redesign is, frankly, a nightmare. The useful areas of the site are handicapped by one of the poorest and least navigable presentation methods I've ever seen on the internet. Onajide is absolutely correct in his assessment: use of flash for the sake of using flash is pointless, frustrating, and ultimately a huge turn-off. What they choose for their top level navigation and how well it works is insignificant when compared to the horror they've unleashed in the page below the cool CSS/Flash top-level navigation.

Posted by: jfbiii at September 10, 2003 12:23 PM

I agree, why use flash when you can do it in CSS ?

Has anyone got a link to a howto or guide on building such a menu system. I am very new to css and would love to be able to achieve a similar menu system.

thanks!

Posted by: James at May 8, 2004 12:35 PM

Hustler hustler.bz

Nude Video nude-video.us
Hentai anime hentai-anime.us
Nude Black nude-black.us
Sexy Babes sexy-babes.us

Pussy Movies pussy-movies.us

Ebony Xxx ebony-xxx.us

Nude Movies nude-movies.us

Hentai Porno hentai-porno.us

Teen Hentai teen-hentai.us

Manga Porn manga-porn.us

Men Sex men-sex.us

Barely Legal Teen barely-legal-teenb.com
Gay gay-b.com
Pussy pussy-d.com
Teen teen-d.com
Porno porno-v.com
Babes babes-d.com
Video video-n.com