Very large product suites with TopNav HTML5

[bunnycat]

Has anyone created a Help Center for a very large product suite (with lots of component products under one parent product) with the TopNav HTML5 Flare project.

We're noticing an implied limitation with TopNav HTML5 - because of the top nav menu / TOC implementation - there is no physical room for more than about 5 top-level items on that top nav bar.

The examples I've seen here are essentially one product with a pretty reduced/flat top level hierarchy in order not to overload that top nav bar or the 2nd and 3rd levels.

Anyone solve a situation like this? I know other teams in my giant org have solved it by using javascript and/or special divs for their own secondary top navigation bars tucked under the top nav bar - and their top nav only contains the most generic stuff like About, Videos, etc. But they had dedicated contractors who were UX designers, so could also code right around any limitations in Flare.

Also with the very large suites, it looks like there are going to need to be many conditionals and different output directories, depending on what individual module the customer bought. Or one Help to help them all, regardless of what user bought, which could also be confusing...

[mdgates]

I personally haven't built a Top Navigation output for several products but here's an example of a Top Nav Help system for several products: https://help.kcura.com/9.2/Content/index.htm

If you hover over the links, it looks like the topics are in product-specific folders in Flare. This seems like a fairly simple and efficient way to organize a lot of content for a lot of products. In this example, a customer for any product seems to have access to documentation for all the products. But once they click on a product on the Home page, they seem to go a product specific set of topics. I guess if this approach is acceptable depends on the organization. I know Microsoft has only one Help system for Office.

Even for my one-product, one-Help system approach I had to create master books in my TOC to limit the number of top-level items.

[devans]

That's why I stuck with the HTML5 Tripane format. It's not as modern (although I still think it looks good) and it means your users aren't going to become disorientated.

[NorthEast]

We're noticing an implied limitation with TopNav HTML5 - because of the top nav menu / TOC implementation - there is no physical room for more than about 5 top-level items on that top nav bar.
The examples I've seen here are essentially one product with a pretty reduced/flat top level hierarchy in order not to overload that top nav bar or the 2nd and 3rd levels.

When you say there's "no physical room", if the items don't fit on the first row of the top nav menu, it'll display a second row (and presumably a third).

If you look at Flare's help, the top nav menu is intended for navigation to the main sections of the help, and once 'inside' a section you navigate using the context menu on the right (which is a menu proxy / skin component).

I'd suggest looking at what you can do with the menu proxy; you can have multiple menu proxies in a page, customise what they display from the TOC, and also choose which TOC they display.
The output of a menu proxy is also a standard HTML list, so they're easy to customise and style, and use with third-party tools and controls.

Or of course, if you don't need/like top nav, or viewing help on a phone isn't important, then maybe tripane is a better choice.

[kwag_myers]

I have a similar project in development and the plan is to have one generic Flare project linked to a separate Flare project for each product. The idea is for the Help icon in each product to be linked to its own Help.

But we're just getting started and I only have one product and one Flare project so far. We're not far enough along in development to know if, or how it's going to work.

One thing to keep in mind is that a topic doesn't need to be in the TOC to be included in the output. As long as there's a link to it, the topic will be included. The downside is that the user is required to do more navigating to get to the desired topic.

If you must have every topic in the menu, then maybe you should use a top nav layout for the Home page and tripane for the rest.

[kkelleher]

I have a similar project in development and the plan is to have one generic Flare project linked to a separate Flare project for each product. The idea is for the Help icon in each product to be linked to its own Help.

I hate to be the bearer of bad news, but if you're hoping to use run-time project merging, you're out of luck. Top Nav doesn't support run-time project merging. I'd suggest you request it from MadCap.

Another option might be to import the projects into a master project that uses Top Nav. I haven't thought through exactly how that might work, since our web app has a multi-pane layout similar to tripane. But I like the Top Nav look and am digging for a reason to use it some place.

Thanks,

Kristen

[morganhancock]

@Bunnycat did you ever find a solution? Could you share the solution the other teams in your org used? I'm trying to add a second navbar as well...

I'm not afraid of hand coding it, but I'm not sure where to place it in the master pages so that it appears above Flare's navbar. And if I don't place it in the master pages, then where should I place it?

[bunnycat]

@Bunnycat did you ever find a solution? Could you share the solution the other teams in your org used? I'm trying to add a second navbar as well...

I'm not afraid of hand coding it, but I'm not sure where to place it in the master pages so that it appears above Flare's navbar. And if I don't place it in the master pages, then where should I place it?

No real solution yet to this dilemma. Several other writers have asked me if/why Flare project merging @ runtime isn't supported. I refer them to Flare Help and forums.

We were able to get another team's Top Nav project where they enhanced the TopNav by using couple of javascript files to drop the top nav menu down below the logo. It only helps so much though.

Still no real, good solution for the large product suites in one Help system yet. Since we don't know how or where the disparate Help systems will actually end up on the SaaS portal servers, we still aren't sure how to get all the Flare projects to work together nicely other than doing imports.

[NorthEast]

I'm not afraid of hand coding it, but I'm not sure where to place it in the master pages so that it appears above Flare's navbar. And if I don't place it in the master pages, then where should I place it?

You could put a secondary navigation control in a master page, however it'll be positioned below (after) the top nav skin in the output.
You can't really do much with the CSS alone (without some nasty hacks), but it's easy to move elements with a script.

For example, in this help, I position a load of elements (status bar, logo, search) above the top nav skin (which is just the menu).
http://desktophelp.sage.co.uk/sage200/s ... ection.htm

That's done with a simple script; e.g.

Code: Select all

/* This moves the div 'my-header' above the top-nav menu generated by Flare. */

$(document).ready(function(){
	$("div.my-header").prependTo("section.inner-wrap");
});

[morganhancock]

Thanks, David! That worked perfectly!