---
title: Creating mobile pages
related:
  - https://docs.kentico.com/k8/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md
  - https://docs.kentico.com/k8/developing-websites/designing-websites-using-css.md
  - https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/reference-device-macros.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

This page describes tasks that are common when developing mobile pages in Kentico.

## Switching device views

Kentico allows you to develop pages and page templates for specific devices. Once you [enable](https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/enabling-mobile-development.md) and [create](https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/creating-device-profiles.md) device profiles, the device selector appears in the **Pages** application, and you can switch the context between different profiles.

1. Click the device selector. A list of enabled device profiles appears.
2. Click a device profile.

![Switching between device profiles in the Pages application](https://docs.kentico.com/docsassets/k8/creating-mobile-pages/Device_Profile_Selector.png "Switching between device profiles in the Pages application")

By default, pages do not have device-specific layouts. When you view a page on the **Design** tab, you can see and modify the content of the default page layout for the given page.

If you create a [device-specific page layout](https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/creating-page-layouts-for-devices.md) for the page template, or if the page uses a shared layout that has a [layout mapping](https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/mapping-shared-mobile-layouts.md) defined for the current device profile, you can see the structure of the device-specific layout.

> **Note:** **Device layout priority**
>
> Custom [device layouts](https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/creating-page-layouts-for-devices.md) always take priority over [shared layout mappings](https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/mapping-shared-mobile-layouts.md). If you defined a custom device layout for a page's template, the page always uses the custom layout even if the template originally uses a shared layout with a mapping for the current device.

Page templates share web part zones between their default page layout and all device layouts. If you modify the content or configuration of a web part zone, the changes also affect the output of the template's other page layouts that contain a zone with the same ID.

You can find all web part zones that do not exist in the current page layout at the bottom of the page with a gray header and the _(not in layout)_ suffix.

![Design tab with a device layout that uses its own unique web part zones](https://docs.kentico.com/docsassets/k8/creating-mobile-pages/Design_Tab_Custom_Device_Layout.png "Design tab with a device layout that uses its own unique web part zones")

When the system renders the page on the live site, only the content of zones that exist in the currently active page layout are visible.

## Previewing pages on different devices

The **Preview** modes of the **Pages** application allows you to view pages as they appear on different devices.

> **Note:** The Preview mode only imitates the size and appearance of the device. The pages are still rendered with your browser engine.

1. Select the device profile that you want to preview.
2. Switch to **Preview** mode.

The page is shown in a frame that imitates the device. To rotate the device 90 degrees, switch between **Portrait** and **Landscape** orientation.

## Customizing the preview frame

Kentico allows you to customize the dimensions and look of the **Preview** mode when using device profiles.

The preview consists of nine pieces, eight forming the frame and one center piece, which contains the content of the page.

1. Open the **Device profiles** application.
2. Edit () the device profile for which you want to design a custom preview frame.
3. On the **General** tab, enter the **Preview width** and **Preview height**.
4. Click **Save**.
5. Switch to the **Theme** tab and upload files that represent pieces of the frame. Upload the following pieces and their alternatives for the rotated version of the preview frame. It is recommended to upload the files into a separate folder.

   - top left, top center and top right piece
   - center left and center right piece
   - bottom left, bottom center and bottom right piece
6. On the **Theme** tab, click **Create** to add a new CSS file. Name the file _DeviceProfile._
7. In the stylesheet, specify which image corresponds to which part of the preview frame. Each part of the frame has a CSS class. Use the following pattern to construct a CSS selector that identifies a particular class:

   ```none

   .DeviceFrame.<device profile name>[.Rotated] .<vertical direction> .<horizontal direction>

   ```

   - Add the .Rotated suffix to identify pieces of the device when it is rotated.
   - Replace  with one of the following: _TopLine_, _CenterLine_, _BottomLine_
   - Replace  with one of the following: _LeftPiece_, _CenterPiece_, _RightPiece_

The following is an example definition of a preview frame piece.

```css

.DeviceFrame.iPad.Rotated .TopLine .LeftPiece
{
    background-image: url('./Images/top_left_rotated.png');
    width: 126px;
    height: 114px;
}

```

## Allowing visitors to override the device detection

Some visitors may prefer to view the standard version of the website (i.e. the content of the _Default_ device profile) even when using a device that fits into a different device profile. Kentico provides a component that allows users to switch between the content created for the detected device profile and the default version of the website.

1. Open the **Pages** application.
2. Select a page and switch to the **Design** tab. For best results, use a page that visitors can access anywhere on the site, such as the master page.
3. [Add](https://docs.kentico.com/k8/developing-websites/developing-websites-using-the-portal-engine/using-and-configuring-web-parts.md) the **Switch mobile device detection** web part onto the page.
4. Set the following properties for the web part:

   - **Mobile link content** - sets the text of the link that the web part displays on the device-specific version of the site. This link allows users to switch to the default version of the website.
   - **Desktop link content** - sets the text of the link that returns visitors to the device-specific version of the site.
5. (Optional) Define the _SwitchDeviceDetection_ CSS class in the website's stylesheet or directly in the web part's CSS styles. The web part applies this class to the generated links. See also: [Designing websites using CSS](https://docs.kentico.com/k8/developing-websites/designing-websites-using-css.md).

The web part appears only for visitors whose device matches a non-default device profile. If a visitor switches to the default (desktop) content, the web part displays a link that re-enables device detection for the given visitor and returns them to the device-specific version of the site.

## Adjusting web part properties for specific device profiles

If you need to change the behavior of web parts according to the current device profile, insert the appropriate [macro expressions](https://docs.kentico.com/k8/macro-expressions.md) into the web part properties. This allows you to dynamically adjust pages that use the same content for their default page layout and device layouts.

See also: [Reference - device macros](https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/reference-device-macros.md)

### Example

The following steps show how to make a web part visible only for the _Medium (Tablet)_ device profile.

1. Open the **Pages** application.
2. Select the page containing the web part.
3. Switch to the **Design** tab.
4. **Configure** (double-click) the web part. The **Web part properties** dialog opens.
5. Expand the **Visibility** section of the web part properties.
6. Click **Edit value** () next to the checkbox of the **Visible** property. The **Edit value** dialog opens.
7. Enter the following macro expression:

   ```none title="K#"

   {% CurrentDeviceProfileName == "MediumDevice" %}

   ```
8. Click **OK** to insert the macro value into the property.
9. Click **OK** to save the configuration of the web part.

The system evaluates the macro expression when rendering the page. If the name of the current device profile matches the text (_MediumDevice_), the macro returns a true value, which dynamically enables the web part's **Visible** property.

## Using device-specific transformations

The [transformations](https://docs.kentico.com/k8/developing-websites/loading-and-displaying-data-on-websites/writing-transformations.md) that you use to display data have a significant effect on the design of pages. If you need to assign different transformations for specific devices or device profiles, add [macro expressions](https://docs.kentico.com/k8/macro-expressions.md) into the transformation properties of the appropriate web parts.

See also: [Reference - device macros](https://docs.kentico.com/k8/developing-websites/developing-websites-for-mobile-devices/reference-device-macros.md)

### Example

This example demonstrates how to create and assign a dedicated transformation for displaying news documents on mobile devices.

1. Open the sample Corporate Site in the **Pages** application.
2. Select the **News** document and switch to the **Design** tab.
3. **Configure** (double-click) the _News repeater_ web part. The **Web part properties** dialog opens.
4. Scroll down to the **Transformation** property and click **New** next to the textbox. The **New transformation** dialog opens.
5. Type _NewsList\_mobile_ as the **Transformation name** and enter the following code:

   ```html

   <div class="description" style="width:500px;">
      <a class="header bold" href="<%# GetDocumentUrl() %>"><%# Eval("NewsTitle", true) %></a>
      <p>
        <%# Eval("NewsSummary") %><br /><br />
        <span class="black bold"><%# GetUserFullName(Eval<int>("NodeOwner")) %> | </span>
        <span class="gray"><%# Eval("NewsReleaseDate") %></span>
      </p>
    </div>

   ```

   This is a simplified version of the default _corporatesite.transformations.NewsList_ transformation, without teaser images and with a limited text width.
6. Click **Save** and **Close** the dialog.
7. Click **Edit value** () next to the **Transformation** property.
8. Enter the following macro expression in the **Edit value** dialog:

   ```none title="K#"

   {%

    if (CurrentDevice.IsMobile AND
     GlobalObjects.DocumentTypes["CorporateSite.Transformations"].Children.Transformations.Exists(CodeName == "NewsList_mobile"))
        {"corporatesite.transformations.NewsList_mobile"}
    else
        {"corporatesite.transformations.NewsList"}

   %}

   ```

   > **Info:** This macro evaluates a condition and returns the transformation name according to the result.
   >
   > - The _CurrentDevice.IsMobile_ part of the condition checks whether the page is being viewed by a mobile device. This directly searches the data available for the current device (the device profile of the current visitor does not affect the result).
   > - The second condition checks if the _corporatesite.transformations.NewsList\_mobile_ transformation actually exists in the system. While not necessary in this example, similar conditions allow you to load transformations designed for specific devices. In these cases, you can use a dynamic parameter in the transformation name, such as the exact device name (_CurrentDevice.DeviceName_).
9. Click **OK** to insert the macro value into the property.
10. Click **OK** to save the configuration of the web part.

When a visitor views the News page on a mobile device, it automatically displays the simplified list of news items according to the new transformation (_corporatesite.transformations.NewsList\_mobile_).

![Output of the simplified news transformation used for mobile devices](https://docs.kentico.com/docsassets/k8/creating-mobile-pages/6.png "Output of the simplified news transformation used for mobile devices")

Users with non-mobile devices can still see the original full-sized transformation (_corporatesite.transformations.NewsList_).