Sitecore Experience Management

Set up a device layout

Abstract

Customize device layout to better optimize user experience.

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.

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. Right-click Devices, click Insert, Device and give the new device a name.

    B0F6F278780D4F94B855967574C01051.png
  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.

    3E71A5FBCC964A8F829705007C0DCCA7.png
  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:

    F0587FF62D4640B6B27FA4ED7DB7132D.png
  5. After you define the device type, you can configure how a page layout will be rendered for that specific device.Edit the layout of an itemEdit the layout of an item