Can a Responsive HTML5 Customized Layout Be Exported to Multiscreen HTML5 Layouts?

[Bernadino50]

In Rh 11, I created a customized Responsive HTML5 layout. Now, however, I'm considering changing my project's output to Multiscreen HTML5 since tagging content (using CBTs) to only be displayed for particular screen sizes is not supported in Responsive HTML5 layouts. Is there a way export my customized layout settings to Multiscreen HTML5 layouts?

[Captiv8r · Accepted solution]

Hi there

Sorry, but it's just not possible. You would need to carefully edit each of the Multiscreen layouts to accommodate the changes you made in the Responsive.

I suppose this is a "catch 22" sort of situation. Responsive layouts are created because you intend to have the same identical content across all mediums. Perhaps slightly rearranging based on the breakpoints. The fact you need different content for different devices causes a monkey wrench to be tossed into things!

Cheers... Rick

[Bernadino50]

I thought that was probably the case.

For tablets and phones I was thinking about applying CBTs to my topics to remove some images, abridge some content, and change certain terms--such as using "tap" instead of "click." I was hoping to avoid the "carefully edit each of the Multiscreen layouts" part of the process.

Do you think it might be feasible for the Responsive HTML5 functionality to be enhanced, in a future release, so that a user could define a few sets of breakpoints, on a Settings screen tab, thereby allowing each set of screen dimensions to be associated with its own conditional build expressions?

[Captiv8r]

Our resident CSS/HTML5 Guru Willam will have to answer that one.

Certainly I'd suggest you submit a feature request to ask for it.

Click here to submit a feature request

Cheers... Rick

[Willam_van_Weelden]

If you have a Responsive Layout from RH11.0.2 or earlier, you can backport it to Multiscreen HTML5. RH11.0.3+ can't be backported. The problem is that the Responsive layouts use techniques and widgets that are not available for Multiscreen HTML5.

For now, it is not possible to dynamically switch CBT conditions in your output based on the device. As Rick suggests, please submit a feature request. If Adobe builds something like this in the future, we can sure hook into the system to get precisely what you are asking.

[Bernadino50]

Unfortunately, I don't have a layout from the earlier versions of Rh 11, but thanks for the suggestion.

I have submitted a feature request, as you and Rick suggested. (Perhaps other forum visitors will also do this, if they consider expanding the Responsive HTML5 functionality to support dynamically switching CBT conditions in the output, based on the device, a worthwhile enhancement idea.)

[juliak2136742]

I will also submit a feature request. My team recently purchased Robohelp for a new project. When material is published online, most users have an expectation that the content will flow smoothly from one device to the next. In this respect, based on my initial explorations of Robohelp, it appears to be a few years behind the technology curve.

[Peter Grainge]

@Julia

I would be interested to learn by you feel RoboHelp is years behind. This thread is about Multiscreen layouts that were introduced in Rh10, two versions back. Then in Rh11 Responsive layouts were introduced that do automatically adapt the layout according to the device on which they are being viewed. Now in Rh2015 there is Dynamic Content Filtering which does more than any other product.

I accept that ability to change tags according to device is not available yet in responsive layouts but to the best of my knowledge, no other tool offers that either so I am not following the "years behind" statement and would be interested to learn more.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[juliak2136742]

Good morning Peter,

Thank you for taking the time to reply to my post.

Perhaps I have not found the right forum or help files for what my team needs to accomplish. We need the ability to publish a single project for a small window (177px wide) and a full-screen window. Content needs to adjust accordingly, so that images and charts are turned off on the small screen, and alternate versions of text are also displayed that make sense without the images. If you could point me in the right direction, that would be greatly appreciated.

My comment about "years behind" is in reference to the use of the XHTML and Responsive vs. Adaptive (or multiscreen) output.

The last XHTML site I coded was in 2011. As you can see from an ongoing survey of DOCTYPE tags, XHTML has been falling into disuse very rapidly since 2013.

http://www.powermapper.com/blog/html-vs-xhtml-version-statistics/

I was really quite surprised to see it used in any 2015 version of software.

Also, the responsive vs. adaptive debate appears to have been resolved in favor of responsive. Even Dreamweaver left behind adaptive design several versions ago, and you can see that default site settings and templates use a Responsive framework rather than Adaptive.

As I am learning Robohelp, I can see it is a complex tool. Certainly, there are interconnected backend components such as collaboration tools, indexing and the dynamic filtering, that save us hours of development. I've tried to create my own versions of these tools in the past, so I respect the work behind these features. I also understand the difficulty of making them accessible at a WSIWYG level.

Unfortunately, my team is under pressure from clients to meet specific needs and standards. Its a difficult conversation to have with them, when you need to explain that the software tool they just purchased, and thought would do one thing, doesn't do quite what was described.

Again, I appreciate your response, and would be thankful if you can set me on the right path for using Robohelp successfully.

[Peter Grainge]

The article states "we collect summary statistics about pages scanned by our service" which begs the question, what did they scan. My own take is as long as what I am producing works...

I have already indicated that RoboHelp offers Responsive and that is what Adobe would now promote to new users. Multiscreen (adaptive) is retained for customers who went with it and prefer to stay with it, maybe because it allows different content on different devices.

Responsive gives different layouts according to screen and images get resized. Where you want different content, beyond just resizing text and images, then maybe Multiscreen is what you need. It is more difficult to set up and you will need a greater knowledge of CSS than with responsive.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[juliak2136742]

Good morning Peter,

The site survey I posted is scanning for the Doctype tag in the heading of the page. You can even do your own informal sample of sites, to see that many... including this support forum, are using HTML 5. What you are making works for you, unfortunately it doesn't work for my client. And what Robohelp is calling "Responsive" output, is not responsive in the way many developers are now using the term. That is, it doesn't give the developer the option of showing or hiding content dependent on screensize. I'm fairly certain I can edit the final files after a project is published, to create the desired result. But again, that is not the workflow or support set-up my customer expected when they purchased the software.

I apologize for the turn this forum discussion has taken, but I still stand behind my opinion that some of Robohelp's current features have catching up to do with other development tools. Obviously, it is Adobe's choice to listen to their customers.

[Peter Grainge]

No apology needed to anyone as this is one of the purposes of the forum.

I will have to defer replying until tomorrow.

[Peter Grainge]

Let me put it another way, the code used is less important to me than it appears to be to you as long as it does not affect what I need to do. In my case it works just fine so I am OK with it. Perhaps on that aspect we will have to agree to have a different take on it.

Of greater importance is what you want to do. It seems that what you want is as simple as one content for the 177px screen and more content on a desktop. That can be achieved using the Multiscreen layout (adaptive) but not, at present, with a Responsive layout. You are seeing responsive websites that you have different content for different devices and expecting the same from RoboHelp. My guess is that those sites have been heavily coded by developers using tools not designed for help authoring. RoboHelp and other authoring tools are designed for users who in most cases do not have that level of coding knowledge. To the best of my knowledge, none of the major HATs offer the option to have different content on different devices with responsive layouts but I stand to be corrected.

Is there a reason you cannot go with a Multiscreen layout? On accessing the output a sniffer detects the device and then presents the content with the appropriate layout. You can set it to sniff for devices with a 177px screen and offer the minimal content, if the screen is bigger then the full version of the help would be presented.

---

See www.grainge.org for RoboHelp and Authoring tips

@petergrainge

[Amebr]

If you're willing to get your hands dirty in the CSS, you can do some responsive coding in the topic stylesheet. (Whether this is a good idea is another question.)

So you could define, say, a style p.PhoneOnly in the topic stylesheet , then add an @media sections with the dimensions you need, and define the style as display: none for those where you don't want it to display. Then you would apply the class to your paragraph that contains the additional explanation. Or I could be misunderstanding what you want to achieve.

e.g.

Stylesheet

p.PhoneOnly { background-color: orange;} 

img.screenshot {}

@media screen and (max-width: 399px) {

      p.PhoneOnly { }

     img.screenshot {display: none;}

}

@media screen and (min-width: 400px) and (max-width: 850px) {

    p.PhoneOnly {display: none;}

    img.screenshot {}

}

@media screen and (min-width: 851px) {

    p.PhoneOnly { display: none;}

    img.screenshot {}

}

Topic

Assign the style to the paragraph/image so you end up with something like:

<p>This content appears for all devices</p>

<p><img src="https://upload.wikimedia.org/wikipedia/en/2/26/Papasmurf1.jpg"

   alt="" class="screenshot" border="0" /></p>

<p class="PhoneOnly">This contains extra information that explains the

graphic, which doesn't display for the phone size media query.</p>