# The Employee Care US SSLs

This topic provides information about HTML5 layout that you will find in the Single Source Layout pod.

## Multiscreen HTML5

Multiscreen HTML5 allows you to create different outputs for different devices from the same content.

The steps are:

1. In Project Set-up you can use the supplied profiles and layouts or you can set up your own. Screen Profiles set the parameters to identify a device by combining pixel settings and browsers.

2. In the Multiscreen HTML 5 single source layout you map those profiles to screen layouts.

The screen profiles and layouts are shown in Project Set-up. Here you will see all the profiles and layouts available to a project. You can add and delete as required. The profiles and layouts shown below are the defaults when you create a new project.

On first accessing the single source layout, all the screen profiles in the project will be listed on the left. They will also be listed on the right and be mapped to a screen layout. If you don't want an output for all the devices, simply highlight them on the right and use the Remove Screen Profile(s) button. They will be removed from the list and outputs will only be created for those profiles on the right.

If you give users the URL to the sniffer, it will run through the profiles in top to bottom order until it finds a match for the browser and pixel settings. Use the Move Up and Move Down buttons to set the order.

If you add new profiles later, they will not automatically appear, you need to use the Add Screen Profile(s) button in any layout where you want the new profile to be included.

The familiar options for defining the content for each profile are shown below and you need only complete those details for the profiles you retain on the right.

The Search settings allow you to define different search parameters for each profile. You may want to show a smaller number of characters on devices with small screens. Note that RoboHelp 10 allows you to exclude specific file types from the search results.

The Optimization settings allow you to optimize the output for each device.

When you start the generation process, you will see RoboHelp creating an output for each of the profiles you included. What you will find in the !SSL! folder is shown below. The index.htm file is not the start page that you are familiar with in WebHelp. In each of the output folders you will find the familiar structure with an index.htm file that is a start page for the layouts.

Your developers have four options.

1. They can put all the outputs on a server and point all devices to the index.htm page shown below. That is a "sniffer" and will detect what it needs to know about the end user's device and serve up the appropriate help.

2. They can put the content for a specific device on the server and link to the index.htm file found in the output folder for the device.

3. For Android devices you can go to File > Generate > Native Mobile App and create a file your developers can install on the device.

4. For other devices, your developers can take the HTML5 output and convert it using their preferred tool.

You do not have to create multiple outputs. You can use this layout to create help just for a tablet or you can use the Desktop layout to create WebHelp in HTML5 format.