Multiscreen HTML 5 - What to give to Development?

[Guest]

Hello,

I am creating a new help project for one of our iPad apps. This is the first time I have compiled with the Multiscreen HTML 5 primary layout.

When I compile in WebHelp, I check the entire WebHelp folder (...\!SSL!\WebHelp) into our SVN content management system for Development to get. (With HTML, they just take the .chm file of course).

For these iPad multiscreen builds, should I just give Development the contents of ipad folder (..!SSL!\Multiscreen_HTML5\ipad)?

Thanks very much for the help. I saw in another post that you can change the color shemes for the multiscreen layout, so that's good news. I will give that a try as well.

Kevin

[Peter Grainge]

It is likely that is what you will do but by no means certain. Take a look at the RoboHelp Tour on my site. In the RoboHelp 10 content I describe the options. You may want to show that to your developers too.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[Willam van Weelden]

You'll have to give the entire output folder to your developers. If you have more than one layout, the root folder will contain several outputs, one for each device.

The root folder contains scripts and files to direct the user to the correct output for their device. This becomes even more important if you ever want to used merged HTML5 help or multiple devices.

Greet,

Willam

[Guest]

Yes the index.htm in the root folder (/Multiscreen_HTML5) is a sniffer. On startup it determins which screen layout to use. If you have only one screen leyout you can also use only the corresponding subfilder (/Multiscreen_HTML5/android_phone or whatever) and start the index.htm in that folder.

[Guest]

Thank you all for the kind responses. I met with Development yesterday, and they're going to give it a try.

In regards to the removal of the Glossary, I did that, and the large button disappears, but a small "unclickable" button remains at the bottom left. In addition, the project title is not showing up unless I click in that field (under the Search field) a few times. Here's the image. Any suggestions would be much appreciated.

Thanks again,

Kevin

[Willam van Weelden]

Hi,

You can best do that through the HTML. Select the text in the editor and switch to HTML mode. Delete the text and it's DIV-container to get rid of it.

Don't forget to remove the glossary page from your layout.

Greet,

Willam

[Guest]

William,

Thanks again. I do occasionally go into the HTML tab in the editor and change text; however, in this example I'm not sure how to do that. The project name that is missing is not found in an individual topic (htm file), and the tiny Glossary button is not, either. Sorry to sound completely dense, but where would the text for the blank name and the small glossary button on the iPad's home page shown in the previous screenshot be in the HTML? I'm probably just missing something obvious here. I did remove my glossary page from the layout.

Sorry for the follow-up but any suggestions are welcomed. Thanks.

Kevin

[Willam van Weelden]

Hi,

That explains the deformed tile. To get rid of the glossary tile altogether, go to HTML mode and delete the following HTML:

<div class="homepagebutton">

                              <a href="Glossary.slp" class="homepage_glossary"><?rh-lng-string

                               lngname="Glossary" lngvalue="Glossary" ?></a>

                    </div>

(The <a> tag has probably been deleted already.)

Greet,

Willam

[Guest]

William,

That trick indeed got the tiny Glossary button to disappear. Thanks.

However, the title still only appears if you click in its field (on the home page). Is there any chance I would need to edit something in the mobile.css file or would that be used only for colors?

Here is the portion of the xml  I probably messed up somehow concerning the title.

Thank you very much. I apologize for all of the questions, but I really do appreciate the help. This iPad help is new territory.

Kevin

[Guest]

William,

I believe I figured it out by changing a color in the mobile.css file. The name now appears in the generated iPad project in RobohHelp. Thanks for all of your help on this one.

Kevin

[Guest]

Hello William or anyone interested in this question. The mobile.css file has been no problem tweaking with just one exception.

In the code, I've tried changing the search results font to black, and it seems like I have tried so everywhere that it might work, but I am striking out more than Dave Kingman circa 1978. I just want to get the results to be black and stay black when highlighted (or a color otehr than white.  I'd even use the orange I have elsewhere in the file - just not white.

If anyone knows where in the mobile.css file or elsewhere the settings are for this, I'd love to know. Obviously, I went to the search results area part of the file and replaced some of the color settings but still haven't been able to change the color.

Thanks for any help and sorry for all of the HTML5 issues.

Kevin

[Willam van Weelden]

Hi,

Exactly what colour do you want to change? The highlight colour in the text or the highlight color of the links on the search results page? Or smething completely different?

Greet,

Willam

[Guest]

William,

Really just the topic results color (list of topics). In the example, I'd be fine with Application Settings appearing in black font with and without it being highlighted. As of now, the selected highlight color is a grey, so the black would show up either way.

Incidentally, I'm feeling much like Charlie Brown in the "everything I touch gets ruined" sense. Now the background for the topics has gone black. It's not for the TOC, or Index, or Search but the topics themselves. I tried changing code at the beginning of the mobile.css file, but I only proceded in figuring out how to change the background color on the TOC, Index, and Search pages, which is handy to know but not what I was looking for.

Sigh,

Kevin

[Willam van Weelden]

Hi,

The CSS selector for the results text preview is span.wSearchContext and span.wSearchContextSmallScr. The topic background is set in div.wTopic.

Tinkering with the HTML5 layouts is no walk in the park. I will publish a couple of articles about this in the coming weeks. Stay tuned to my site!

Greet,

Willam

[Guest]

Thanks very much, Willam.

To begin with, sorry for misspelling your name this whole time. There is no phantom, second "i." Poor editing job on my part for a tech writer.

We had our developer take a look at this HTML5 help today, and the iPad style, my default layout, works with an android phone and android tablet, but, ironically, not on an iPad itself. So, I contacted Adobe regarding this. The look and feel needs to be consistent but as of now it's not. Here's what our developer wrote in an e-mail to those of us working on it: "RoboHelp is supposed to detect the device type and screen resolution and redirect to the appropriate page, but that does not appear to be working at all. It sends the iPad to the Android phone site, my Android tablet to the iPad site, etc. None of it looks exactly the way it looks on Kevin's preview through RoboHelp, even though I verified we have the same stylesheet."

What he is referring to concerning my preview is that the preview I see in RH after I generate the help is not accurate. It is not what is truly being seen in the devices themselves. So, I've been trying to make changes to the mobile.css file basing these changes on what I'm seeing in the RH preview, which is what we now know to be inaccurate and not truly what the user will see. We believe that has to do with me running IE9 and IE9 not fully supporting HTML5. So, that is a fixable issue on our end.

I hope Adobe can give us some guidance on the output problem, though. When you wrote that HTML5 is no walk in the park, you were completely accurate.

Again, thanks for all of your help.

Kevin

[Willam van Weelden]

No sweat, I'm used to a slew of variations on my name

The question now becomes: What is different? IE9 is supported but different devices may render a bit different. But the CSS and HTML used in the layouts is nothing exotic that I know of.

Can you give some examples of what is not the same?

Greet,

Willam

[Guest]

I did upgrade to IE10 today, and it looks like the RH preview does indeed mirror what we saw yesterday on the devices.

Since iPad is my default screen profile, I assumed my preview would resemble what we saw on the actual iPad. (Barring the color descrepencies from IE9, it did look similar to what we saw on the android phone and tablet.)

So, we saw the iPad layout on the android devices.

But on the iPad, we saw the android layout.

I did contact Adobe and hope to hear back soon. Maybe I'm simply not setting up something correctly in RH, but I don't think that's the case. Again, thanks for all of your help.

Kevin

[Willam van Weelden]

Hi,

You are seeing two different layouts. The above is the iPad layout and the latter is the Android tablet layout. If you want all devices to use the same layout, go to your SSL setting and remove the device selectors you don't need.

Alternatively, select the iPad layout for all screens, although this will duplicate the output for every device.

Greet,

Willam

[Guest]

Thanks very much, Peter. Yes, this helps and I will pass on to the developer.

One last question about Multiscreen: Is there a way to omit the glossary from the output and just keep the TOC, Index , and Search?

On the Screen Profiles tab, None is not an option for glossary. I know in other types of RH compiles, you can do that, but I do not see an option in the RH editor for Multiscreen.

Thanks again.

Kevin

[Willam van Weelden]

Yes: Remove the glossary tab from the accordion widget used in the screen layout. Just select the Glossary tab and delete it.

Greet,

Willam

[Guest]

Thanks very much, William. That was simple enough.