New Flare user to attempt help for app ... needs help

[Vikings52]

Hello,

I've been a tech writer for sixteen years and authoring help during all of that time but just got Flare a few weeks ago. And now I was just told something needs to be done within a couple weeks. That is the obligatory prologue which means ... help.

I have been practicing in Flare: importing CHM file, importing HTML files, creating new ones from blank, etc. Mostly, though, I have been using a tri-pane layout with an HTML5 target. I will be honest, the lack of a WYSIWYG like I am used to has made creating the actual content in a topic very difficult and frustrating since I am hardly an XML pro. Anyway, here's what I am supposed to deliver. For most of you with experience, this is probably really, really easy, so thanks for your patience.

We have a consumer app for iPod/iPad and android that needs some really basic help. I have attached images to help illustrate it.

App Help A shows the page that takes the user to the help when they click Help Center. I doubt I will need to do anything with this. Just showing to follow the sequence.

App Help 1 shows the main page I will need to create. As you can see, there are only five links here. But I have no idea how to make these links show boxes around them like they are buttons. I will also need to navigation button at the top (but I think that would be default in the help creation, but I could be wrong.) I feel pretty dumb being miffed by what amounts to a six main topic help project when most of mine have included 200-300 topics.

App Help 2 shows an example of a help page accessed from one of the buttons on the previous, Need Help? page. Again, this has a header bar (if that's what it's called) with topic navigation panes. The images below the text are just that, images and not links. They do not want pop-ups just links to new pages that replace the old and cover the screen.

A few overriding concerns:

Once you get to the individual topics as shown in App Help 2, it looks like I need two headers/separate navigation panes and not sure how to do that. The HTML5 Skin Editor's Styles tab is pretty convoluted to me and I am having trouble adjusting the heights of headers.

They want the screen to swipe to the right to reveal the next page. (Not sure if that is the correct terminology ... screen moves when link is clicked to reveal new topic as opposed to clicking and it's right there. A quick Flare help search didn't come up with any derivation for 'swiping'. (Felt a little like Dora the Explorer: Swiper, no swiping.) I assume that is part of a style.

I assume this design merits a top navigation target. Is that correct?

Also, will I need multiple outputs for iPod app, iPad (because it is bigger), and Android? Or does Flare automatically fit the help based on the output in HTML5?

Again, I'm sorry for such a long and detailed e-mail. I have been creating practice projects, watching and attending virtual seminars, and I even purchased and started reading MadCap Flare for Robohelp Users (although it's a bit dated now.) But knowing the time line I was given and the incredibly vague standards I was provided with so far (aka none) of its look and feel (not sure what is wrong with the current one created by our graphics department and Development). I know this is a migraine waiting to happen, and if anyone on the board can offer any kind suggestions to accomplish any of the things I've mentioned, I really, really appreciate it.

Thanks very much,

Kevin

[ChoccieMuffin]

Oh Kevin, I so feel your pain from your post!

I can't help as I don't do what you're trying to do, but I know there will be some experts along soon. The forums have been playing up a bit so they might not have seen your post yet, and the US has to wake up too. In the meantime, search for "Responsive" in the Flare help, I'm pretty sure that's part of what you want to do, so that you don't need to create three different outputs. Instead you specify (don't know where but Help will tell you) the width of the different outputs and Flare does some magic and displays the correct one.

Welcome to the forums, by the way. I am sure you will find it a very helpful resource. Chin up, we'll get you there!

[kwag_myers]

App Help 1 shows the main page I will need to create. As you can see, there are only five links here. But I have no idea how to make these links show boxes around them like they are buttons.

This setting is accessed in the Skin Editor > Styles. click Navigation Element and set the Border Properties in the right pane.

I will also need to navigation button at the top (but I think that would be default in the help creation, but I could be wrong.)

I'm assuming you mean a button that displays the Help Home page. If so, this too is accessed in the Skin Editor > Styles. The Home Button has color, font, and border properties. It looks to me like you have an image and I can't take the time to help you with that (sorry, have deadlines of my own).

App Help 2 shows an example of a help page accessed from one of the buttons on the previous, Need Help? page. Again, this has a header bar (if that's what it's called) with topic navigation panes. The images below the text are just that, images and not links. They do not want pop-ups just links to new pages that replace the old and cover the screen.

Most web browsers have a Developer's Tool, or Debugging Mode you can use to view your Help in the different formats. Press F12 and look for one of the following: IE Tools > Resize, FF Responsive Design Mode, Chrome Device Mode.

They want the screen to swipe to the right to reveal the next page.

That is done with JavaScript, which is what Flare uses, I just don't know if it's a feature.

I assume this design merits a top navigation target. Is that correct?

I recommend a WebHelp Mobile output to start. If you can't get that to work, then try the top nav.

Also, will I need multiple outputs for iPod app, iPad (because it is bigger), and Android? Or does Flare automatically fit the help based on the output in HTML5?

It's called Responsive Web Design. As long as you avoid fixed settings, like px and pt, and use em's for line spacing and percentages for table and image dimensions, you should be alright. Again, try the mobile output and test it using the Designer's Tool of a web browser to see how it looks on the different screen sizes.

[NorthEast]

Firstly, I'd be finding out what's behind those screenshots.
Presumably there is some working app, framework, stylesheets - so does your solution need to work with that, or is it completely standalone?

App Help 1 shows the main page I will need to create. As you can see, there are only five links here. But I have no idea how to make these links show boxes around them like they are buttons. I will also need to navigation button at the top (but I think that would be default in the help creation, but I could be wrong.) I feel pretty dumb being miffed by what amounts to a six main topic help project when most of mine have included 200-300 topics.

Just create a link (a) class; then set its border, background colour, background image (for the arrow), and a fixed width (so they all line up).

I assume this design merits a top navigation target. Is that correct?

By the looks of it, I don't think it requires any skin at all (i.e. set to none).
The top bar is presumably the app itself, since it's across all areas (not just the help) - so why would you need a skin?

Also, will I need multiple outputs for iPod app, iPad (because it is bigger), and Android? Or does Flare automatically fit the help based on the output in HTML5?

You need to ask that question - do they need to be different, and if so, how?

For example, if the app is fundamentally different on phones and tablets, it may make more sense to have two separate help systems.

But otherwise, I'd guess you have the same content for all devices.
A normal web page will just fit to whatever the size of the browser/device.
Whether you need to look at responsive design (i.e. different styles/content for different screen sizes) depends on whether that's actually a requirement.

They want the screen to swipe to the right to reveal the next page. (Not sure if that is the correct terminology ... screen moves when link is clicked to reveal new topic as opposed to clicking and it's right there. A quick Flare help search didn't come up with any derivation for 'swiping'. (Felt a little like Dora the Explorer: Swiper, no swiping.) I assume that is part of a style.

That looks like a slideshow, so I'd take a look at Flare's built-in slideshow feature.
It might not actually support swiping, mind.

[Vikings52]

Thanks to everybody for their kind responses and help (no pun intended). This is all really valuable information as I start to understand Flare better. Again, I appreciate the time it took for you all to respond.

[Vikings52]

Hello and thanks again for the responses. I was wrong in that the project (while still small) will have 25 topics instead of 6. However, in the header area there are the next and previous buttons, but there are the dots beneath the heading title. So, if you are on the default first page, the first circle is colored and so on. Can that be an automatic setting in Flare? Is that related to browse sequences? Here is a picture of what I just did a poor job of explaining. Thanks.

[kwag_myers]

I think you're referring to pagination, and I'm not sure Flare has a way to display it. At least, there's nothing in Help or the WebHelp Mobile sub-forum that I can find. If it were my project, I'd talk with the developers to see about having them build the skin and you supply the XML files for them to plug in.

Personally, I don't see dots adding any value for 25 pages. If you figure out how to display the pagination, I suggest using page numbers.

[Vikings52]

In the ongoing saga of the tech writer given a new tool and told to create a small project that replicates the one Development did in a couple days ...

Only a few topics, but some are showing the browse path breadcrumb, which I want to hide. In addition they are showing drop-down options.
Please see browse2.png

I don't want either and ironically some of the topics are just fine like the following.
Please see browse1.png

That back arrow button works but since I am in a pinch for time. I simply added an image and made it link to the home page. That heading is really an H2 style I defined, but I don't think I can add that back arrow image in the h2 style, can I? I'd like it to be left justified in the tab header box. I know that is not how a longtime user would set it up, but I'm just trying to draw on RH experience to make this happen.

And finally, when I select a topic and go to the Topic Properties tab, the Stylesheet drop-down is unavailable. Shouldn't I be able to assign a stylesheet to individual topics if necessary?

Thanks again for all of your help.

[kwag_myers]

How many PageLayouts do you have? I'm guessing you have one with, and one without the Breadcrumbs Proxy.

[Vikings52]

Actually, I haven't done anything with the master pages ... if those are indeed the same as page layouts. I actually did get those Feature drop-downs to go away by clearing out the TOC. (Everything about this small project so far has been counter to all my help projects in the past.)

I think I might now have what it is they want (although it is suspect that they actually even know what they want. I have been told to do this quickly because we have to justify the purchase of Flare .. even though all Dev had to do was replace some existing images in the current project.)

Anyway, on my home page, there are two items (Get In Line and Profile). links which remain underlined. I have removed and replaced these links and done local formatting, but I just can't seem to get them to look like the others (with no underline). I'd appreciate any suggestions very much. (The image is attached below.)

Finally, I made my header bars a style like h1, h2, h3. They're fine and I can even insert an image in there. However, is it even possible to make the image I insert into the style a link of its own? In my case, it would be the back arrow linking back to Need Help. Obviously, I can do it under the header style h1, but it doesn't seem like I can do it that way in the style? If I am wrong, please let me know.

Thanks very much, and I apologize for all of the questions.