# 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.

## Setting Up

Note: In the following examples, the Employee Care 3 sample project is used.

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.