Starting with HTML5: Working with the Screen Layout Editor

If you ever tried to modify or create a Screen Layout, you will have noticed that the Screen Layout Editor sometimes behaves erratic. In short, the editor is not a complete WYSIWYG as it doesn’t support all HTML5 tags and CSS styling. In this article I will point to some limitations of the Screen Layout editor as well as listing a few best practices to help you develop Screen Layout.

Styling? Use a browser.

The first thing you will notice when styling widgets is that the Screen Layout Editor does not show the widgets as the reader will see them. See these two images of the TOC from the Blue Ocean layout:

The simple remedy for this is using a browser for developing your Screen Layouts: Create a wireframe in the Screen Layout Editor, publish a project and open the output with a browser. Open the CSS in the output and style the Layout as you like. When you’re done, copy the modified CSS into the Screen Layout folder of the RoboHelp project.

HTML5 support

First a clarification: HTML5 is mostly used as a name for a family of related technologies for creating interactive sites. The relevant technologies for RoboHelp are the HTML markup and CSS3. The HTML5 markup introduced several new elements, such as <aside>, <menu> and <video>. The RoboHelp Screen Layout Editor does not fully support these new elements: They will appear as read tags in Design view:

Although the Screen Layout Editor does not correctly display these tags, you can use them nonetheless. The output is unaffected. For best compatibility with older browsers and the Screen Layout Editor, avoid the new elements and use DIV’s instead.

CSS3 support

CSS3 brings new styling options such as transitions, multiple background images, shadow effects and rounded corners. (Look for an overview on http://www.css3.info/preview/). Almost none of these effects are supported by the Screen Layout Editor. You can use these new options as many modern browsers support part of the CSS3 standard and will take advantage of your styling.

There is one catch: if you use the new CSS3 markup, be sure to specify markup for older browsers too. For instance: the new CSS3 gradients are not supported by older browsers. Be sure to specify a background image or simple colour for when the browser does not support the gradient.

Positioning

The CSS position property allows you to place elements relative to one another or even give them a fixed location in the browser window. Using the position property can be very useful to position an element, such as a logo, at exactly the correct location on your page.

The RoboHelp Screen Layout Editor almost completely ignores the position property. The Screen Layout Editor does pick up the position: relative; property in some cases but it ignores the other options. Should this bother you? When you don’t mind that your output doesn’t look as intended in the Screen Layout Editor, there is nothing to worry about.

I won’t go into the discussion whether you should use absolute positioning or even fixed elements. But to say something on the matter: Try to avoid it.

Note: Do not use positioning of the top element of a widget. You may never know where a user wants to insert a widget and adding positioning may yield unexpected results for users.