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

Beyond WebHelp: Editing HTML5 Layouts in RoboHelp 11

RoboHelp is extremely powerful and yet easy to use. One of the hallmark features of new version 11 is the icon-driven “wizard” for modifying HTML5 responsive layouts. As powerful as this visual editor is, there are some major layout changes that you cannot accomplish with the visual editor alone.

RoboHelp expert, Willam van Weelden, recently was our guest in a webinar which covered step by step how to make major changes to responsive HTML5 layout by directly editing both HTML and CSS files.

This blog covers highlights of the webinar with minute markers to help guide you to key functions. You may view the webinar by clicking the title here: Beyond the Wizard: Editing HTML5 layouts in RoboHelp 11 – Session 1.

Key highlights of Editing HTML5 Layouts in RoboHelp 11

8 min

Preview of removing the Index widget

10:00

Introduction to contents of screen layouts folder

10:30

Using [F12] to show Developer option view

12:00

Selecting an element visually to have it selected in HTML view

15:00

Overview of processing instructions

16:00

Discussion of “class” which contains multiple panes

19:00

Removing the Index widget from the search page

23:00

Removing the IX widget from tablet layout in HTML5

26:00

Modifying template files via edits to CSS

38:00

Modifying the “phone” or mobile-sized layout

42:00

Adjusting margins to zero to make all buttons or widgets visible

NOTE: See also Session 2 of this webinar series.

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.

Leave a Reply

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