Configuring Preview Devices

Content Studio's content editors and section page editors provide preview functionality that allows the user to see what the content item or section page they are working on will look like on various devices. They are able to switch between 3 main previews corresponding to 3 device types: PCs/laptops (large), iPads/tablets (medium) and mobile phones (small). Each of these device categories can, however, include any number of specific devices that the user can select from drop-down lists.

You can configure what entries should appear in each of these lists: the names of the devices, and their screen resolution. To do so you need to create an XML file that looks something like this:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<device-list>
    <large>
        <device>
            <name>Default</name>
        </device>
        <device>
            <name>TV</name>
            <width>1980</width>
            <height>1080</height>
        </device>
    </large>
    <medium>
        <device>
            <name>iPad</name>
            <width>768</width>
            <height>1024</height>
        </device>
        <device>
            <name>Galaxy III</name>
            <width>768</width>
            <height>1024</height>
        </device>
    </medium>
    <small>
        <device>
            <name>iPhone 5</name>
            <width>640</width>
            <height>960</height>
        </device>
    </small>
</device-list>

You can omit the width and/or height elements from any device configuration if you wish. If you do this then the preview will use the maximum space available. The Default device in the above example has no width or height elements, with the effect that the Default preview displays as it would in an ordinary browser window.

You then need to add an entry that references this file to configuration-root/com/escenic/studio/preview/DeviceSelection.properties in your Content Studio configuration layer:

configXML=custom-device-file-url

where custom-device-file-url is the URL of the file you have created. You can specify either a relative or absolute URL.

For a description of how to create a studio configuration layer, see Content Studio Configuration Layer.

A sample custom device file that you can copy and edit is included in the Content Engine distribution:

/opt/escenic/engine/siteconfig/config-studio-skeleton/com/escenic/studio/preview/device.xml.

An RNG schema that you can use to validate your finished custom device file is also included in the Content Engine distribution: /opt/escenic/engine/schemas/device.rng.

The technique described above will only work for responsive design publications like those produced by recent versions of the Widget Framework. In a responsive design publication, pages include CSS media queries and Javascript that automatically adjusts layout and content to suit the current display device. For older publications that do not use responsive design techniques, and rely on the use of separate sites for desktop and mobile devices, some additional configuration is required. For details, see Configuring Preview Devices for Traditional Mobile Sites.