# Responsive HTML5 Output

Responsive HTML5 outputs are easier to work with than Multiscreen HTML5 as there is only "one" output.

- With Multiscreen HTML5, you specify a different screen layout for each device. Some authors will prefer that approach as they can use different layouts with different content on different devices.

- With Responsive HTML5, one screen layout is used on all devices. What happens here is that if the user is viewing on a desktop, they will see one arrangement of the components of the screen, if they are viewing on say an iPhone or Android phone, they will see the components resized and rearranged in a layout to better suit that device. Your Adobe RoboHelp output takes care of all that. View on a desktop and resize the window to see it happening. Notice how the images get resized on the fly.

## New in RoboHelp (2015 release)

The new layouts in this release greatly enhance the end-user experience. In the new layouts you can:

- Configure the search results to appear in the content or topic panes

- Use the Comments field in the Status tab of Topic Properties for Descriptions that appear in the search instead of the first few lines of the topic.

- Show breadcrumbs and search context in the search results.

- Easily show/hide widgets such as index/glossary/TOC and so on.

- Add social widgets out of the box so that pages can be shared on Facebook or Twitter.

- Choose to hide the branding bar on smartphones to give more screen space.

- Convert to right to left layout with the click of a button. Note that you cannot create topics using right to left languages in RoboHelp. The content can be created by translation agencies or Technical Communication Suite users can link to FrameMaker content.

The new layout remembers the state of the books in the TOC and two or more books can be expanded.

## Setting Up

In the Output Setup tab, you will see a Screen Layouts option. Right click that to open this dialog. Note the Check for new screen layouts link. This dialog can also be accessed from the Responsive Layout dialog.

Having picked your preferred layout, expand it to see its parts. As with Multiscreen HTML5, you can right click any of the resources it uses but there is now a much easier way to edit selected items. Right click the layout name itself and click Edit to open the simplified layout editor. It provides the options that most authors will want.

That's it, your Responsive HTML5 layout is ready to be integrated into your project.

## Generating the Output

The General settings allow you to select the screen layout to be used in this Responsive Single Source Layout.

- If you change your mind about what you set up earlier, you can select a different one from the dropdown.

- You can add to the list by clicking Add from Gallery.

- You can make final edits by clicking Customize.

- You can check the appearance by clicking Preview.

- Note the new Dynamic Content FIltering option in Adobe RoboHelp (2015 release).

## Content

The Content settings are the same as with WebHelp. With Responsive HTML5, the content will be the same on all devices. Use Multiscreen HTML5 if you need to have different content on different devices.

If you are using Dynamic Content Filtering, the build expression should only exclude content that you do not want to be included anywhere.

## Search

The Search settings are also the same as with WebHelp.

## Optimization

The Optimization settings are the same as with Multiscreen HTML5 and need to be defined for the range of devices you will be supporting. For most authors, the settings will be as shown below.

## Publish

The Publish settings enable you to place your output directly onto a server. Use these or just give your developer everything that is in your Generate folder.

## SharePoint

If you use SharePoint, the settings will need to be defined here. See SharePoint Integration for more information about SharePoint.