Set up a device layout

Last updated Monday, May 23, 2016 in Sitecore Experience Platform for Developer, Administrator

A device layout in Sitecore represents a specific way to present and view content. To determine which hardware and software a visitor uses, and how best to present the website content, Sitecore analyzes a HTTP request for the site page. Sitecore identifies the device and chooses the appropriate layout to make the page design adaptive. Adaptive design is determined by the rules that a developer configures.

You can use the browser agent, query string values, and any of the Sitecore Device Detection rules to define layouts. For example, if you anticipate that visitors will use desktop web browsers and mobile phones to access your site, you can configure the layout for each device type to create a different layout for each device.

Configure Sitecore devices

Devices are configured in the Content Editor under sitecore/Layout/Devices. To configure a new device:

  1. Log on to the Sitecore Content Editor, go to sitecore/Layout/Devices.
  2. In the Content Tree, right-click Home, click Insert, Device and give the new device a name.

    All_SitecoreAzure_DeviceDetection_DeviceItem_Screenshot

  3. The device item has three fields that are used to identify a visitor's device:
    • The Browser agent is an exact user agent string that identifies the hardware and software a visitor uses to access your site. Use this if there is a specific device and browser that you want to target.
    • The Query string is a part of the URL of the page. For example, the page can be configured to show the print layout if a visitor accesses the page with the query string parameter: "p=1".
    • A Rule: You can use the default rules included in the Rules Set Editor, or you can define your own rules, based on the Sitecore Device Detection database.

    All_SitecoreAzure_DeviceDetection_Phablets_Screenshot

  4. Use the Rule Set Editor to specify the rule for detecting a device. For example you may want to define a special layout for Phablets. If we define a Phablet as a smartphone that measures between 5.5 and 6.99 inches diagonally, then you could configure the rules like this:

    All_SitecoreAzure_DeviceDetection_RuleSetEditorPageLayout_Screenshot

  5. After you define the device type, you can configure how a page layout will be rendered for that specific device.

Send feedback about the documentation to docsite@sitecore.net.