Configuring Preview Devices for Traditional Mobile Sites

If your publication is generated in separate versions for desktop and mobile devices, then you need to:

• Add some additional configuration information to the device.xml file described in Configuring Preview Devices.

• Add some logic to ensure that the correct templates are used when displaying the preview.

Assuming you have just one desktop site and one mobile site (the usual case), then you can drop one of the top level elements (medium, for example). The additional configuration you require consists of param elements that you can add to the mobile device definitions:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<device-list>
    <large>
        <device>
            <name>Desktop</name>
            <width>1280</width>
            <height>1024</height>
        </device>
    </large>
    <small>
        <device>
            <name>IPhone 5S</name>
            <width>320</width>
            <height>568</height>
            <params>
              <param name="device" value="iphone5s" />
            </params>
        </device>
        ...
    </small>
</device-list>

The param elements specified in the file result in the addition of corresponding parameters to the generated preview URLs. For example:

http://editorial-server:port/article-id.ece?token=preview-token&device=iphone5s

Adding such parameters to one or both device definitions makes it possible to differentiate between mobile and desktop preview URLs. You then need to set up some mechanism to make use of the information and ensure that the correct preview is displayed. Some possible methods include:

• If the publication serves different templates based on the HTTP User-Agent, add a filter to the servlet filter chain that that sets the correct User-Agent based on the device parameter in the preview URL. The example preview URL shown above, for example, might result in the following User-Agent string:

  User-Agent: "Mozilla/5.0 (iPhone; CPU iPhone OS 5_0 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9A334 Safari/7534.48.3"

• Use Apache or Varnish to redirect requests containing the parameters you have defined to a different server, and to set the appropriate User-Agent as above.