DocumentationAEM as a Cloud ServiceUser Guide

Authoring a Page for Mobile Devices

Last update: June 4, 2024
  • Topics:
  • Authoring

CREATED FOR:

  • User

Adobe Experience Manager pages are based on a responsive layout. Responsive layout adapts your content to fit the target device automatically, eliminating the need to author content for specific devices.

When authoring a mobile page, the page is displayed in a way that emulates the mobile device. When authoring the page, you can switch between several emulators to see what the end-user sees when accessing the page.

Devices are grouped into the categories feature, smart, and touch according to the capabilities of the devices to render a page. When the end-user accesses a mobile page, AEM detects the device and sends the representation that corresponds to its device group.

NOTE
To create a mobile site based on an existing standard site, create a live copy of the standard site. See Creating Live Copies.
AEM developers can create new device groups. See Creating Device Group Filters.

Use the following procedure to author a mobile page:

  1. From global navigation open the Sites console.

  2. Edit a content page.

  3. Switch to the desired emulator by clicking the Emulator icon at the top of the page.

    Emulator icon

  4. Drag and drop components from the component browser or asset browser on to the page.

  5. Modify the responsive layout of the page and its components based on the selected device.

The page will look similar to the following:

Mobile example

NOTE
The emulators are disabled when a page on the author instance is requested from a mobile device.
recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab