---
title: "Set up a device layout"
slug: "set-up-a-device-layout"
abstract: "Customize device layout to better optimize user experience."
---
# Set up a device layout

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](https://doc.sitecore.com/xp/en/developers/105/sitecore-experience-manager/rules-and-parameters-for-device-detection.html "Rules and parameters for Device Detection").

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.

<details>
<summary><h2>Configure Sitecore devices</h2></summary>

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.

    ![Insert device](https://doc.sitecore.com/api/markdown-image/xp/en/developers/105/sitecore-experience-manager/images/InsertDevice.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](https://doc.sitecore.com/xp/en/developers/105/sitecore-experience-manager/create-custom-rules-for-sitecore-device-detection.html "Create custom rules for Sitecore Device Detection"), based on the Sitecore Device Detection database.

    ![Define your own rules](https://doc.sitecore.com/api/markdown-image/xp/en/developers/105/sitecore-experience-manager/images/DefineYourOwnRules.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:

    ![Rule Set Editor](https://doc.sitecore.com/api/markdown-image/xp/en/developers/105/sitecore-experience-manager/images/RuleSetEditor.png)

5. After you define the device type, you can [configure how a page layout](https://doc.sitecore.com/xp/en/users/104/sitecore-experience-platform/edit-the-layout-of-an-item.html) will be rendered for that specific device.

</details>