RoboHelp 2015 Setting Media Queries / Break Points for Responsive HTML5 Online Help

Master Advanced Skins and Layouts in RoboHelp 2015 without CSS Knowledge

01 shot searchRoboHelp 2015 has introduced dramatic improvements to creating HTML5, especially with its HTML5 layout editor. The previous release of RoboHelp made HTML accessible. The newer, “2015” version has virtually eliminated the need to make any modifications to CSS code in order to achieve stunning results.

In this webinar, special guest and expert, Willam van Weelden, makes the difference between using the layout editor and editing CSS code crystal clear.

Register here to get access to the webinar recording:

Mastering Complex Skin and Layout Customization for HTML5 in RoboHelp 2015 without CSS Knowledge

Note: When you follow this link, you will come to our event page. There you will need to click on [REGISTER] to obtain access to the recording. You will receive a confirmation webpage that has a link with the webinar name. Click on this link and you will see title and description, and the [REGISTER] button will have changed to [VIEW NOW].

The following minute markers will help you locate the portion of the recording that is of highest relevance or interest to your needs:



INTRO to topic by guest Willam van Weelden

  1. Agenda
  2. Overview of customization to be covered
  3. watch for tips on controlling search results
  4. Controlling “brand” header in HTML5 Responsive shown on mobile devices
  5. sidebars
  6. social buttons/widgets for FACEBOOK and TWITTER






Modifying topic properties and making changes with the Status Tab … you can create a topic “summary” and place it into the comment field


Enabling the summary for the output:

  1. Go to output tab
  2. Choose settings … go to the [Search] category
  3. Necessary choices are shown


DEMO shows the “after” version of search in which you can add useful comment summary text; this feature is now useful



  • use output setup
  • layout editor cosmetically looks like editor for RoboHelp 11 (previous release)
  • TIP: generating real output for testing with small content is more effective than the preview

    RoboHelp Media Query / Break Points settings


Working with media queries; now easily have control over number of pixel widths for different devices. RoboHelp 11 required painful edits to CSS and testing.

Using RoboHelp 2015 you can even eliminate width changes for a device (e.g. have only desktop and smartphone layout).


Working with specifications for TOC (Table of Contents)

Creating a 2-level “drill-down” TOC … easier selection for users


Working with WEBHELP LAYOUT to change skins. All required options are in one place now


How to remove TOC of INDEX; this took 1.5 hours to do with CSS in old RoboHelp 11 … it only took 45 SECONDS in this live DEMO!


With HTML5 RESPONSIVE, you can now swiftly select your default PANE within basic settings of the LAYOUT EDITOR

TAKE-AWAY MESSAGE: much less time required and less technical staff can do this


Adding SOCIAL WIDGETS for Facebook or Twitter

  • In old RH11 this required a lot of work between several programs
  • Now an option you can turn on/off within the LAYOUT EDITOR

Maxwell Hoffmann

I am the Adobe Global Product Evangelist for Tech Comm Suite. I am passionate about powerful, single-source publishing that can deliver content anytime, anywhere, any way.

3 thoughts to “Master Advanced Skins and Layouts in RoboHelp 2015 without CSS Knowledge”

  1. Sounds as if it’s exactly what I need. However, I’m unable to play the webinar (tested in two environments, three browsers each). Adobe Support told me this morning that it’s a known issue with no ETA and that they couldn’t help me.

    So how may I get this information please? I’m open to any alternatives. Even a transcript or copy of closed captioning would help.

    1. Hi Denise,

      this is a problem that came up with an Update of Adobe Connect a few days ago. We are working on it, so that the webinars will be accessible in a few days ago.

      I will reply here again, as soon as the problem is solved.

      Thanks for your understanding and patience.

      Kind regards,
      Stefan Gentz

      1. Hi, Stefan.

        Thank you very much for your reply. I was able to view the webinar today, and it was well worth the wait!

        I especially appreciated the portions on how to customize search and use the .scss alternative to editing .css files.

        Kind regards,
        Denise Wenner

Leave a Reply

Your email address will not be published. Required fields are marked *