Skip to main content
B
Bernadino50
Inspiring
March 24, 2015
Answered

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

  • March 24, 2015
  • 3 replies
  • 1194 views

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?

This topic has been closed for replies.
Correct answer Captiv8r

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

3 replies

A
Community Expert
AmebrCommunity Expert
Community Expert
August 4, 2015

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>

    J
    juliak2136742
    Inspiring
    July 28, 2015

    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
    Community Expert
    Peter GraingeCommunity Expert
    Community Expert
    July 29, 2015

    @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

    Use the menu (bottom right) to mark the Best Answer or Highlight particularly useful replies. Found the answer elsewhere? Share it here.
    J
    juliak2136742
    Inspiring
    July 29, 2015

    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.

    Captiv8r
    Captiv8rCorrect answer
    Legend
    March 24, 2015

    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

    B
    Bernadino50Author
    Inspiring
    March 24, 2015

    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
    Captiv8r
    Legend
    March 24, 2015

    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices