# UI best practices

There is no single proven recipe for Decentraland mobile UI yet — the platform is new and we are still iterating. The recommendations on this page are the current best practices, distilled from work on real scenes. Treat them as a starting point and test on a real device.

## DOs

* **Design mobile-specific UIs**, or vary your UI by screen size and platform. Use [`isMobile()`](/creator/scenes-sdk7/building-for-mobile/detect-platform.md) to branch.
* **Keep critical UI inside the** [**safe area**](/creator/scenes-sdk7/building-for-mobile/safe-area.md).
* **Minimize options.** Show only what the player needs right now and progressively disclose the rest.
* **Place actionable dialogs at the center of the screen** — anywhere a player needs to read and respond.
* **Place non-actionable messages at the top-center** — status, notifications, and ambient information.

## DON'Ts

* **Don't size UI elements purely in pixels.** Pixel-only layouts will look different on every device. Use the `virtualWidth` / `virtualHeight` mechanism described in [On-screen UI](/creator/scenes-sdk7/2d-ui/onscreen-ui.md#screen-virtual-scale) and pair it with platform-aware sizing.
* **Don't place elements outside the safe area.** They will clash with the system controls.
* **Don't rely on small buttons.** Small targets are unreliable to tap on a touch screen.
* **Don't bind key actions to `IA_ACTION_3`–`IA_ACTION_6`** (the `1`/`2`/`3`/`4` keys on a keyboard). They are not easily reachable on mobile. See [Input on mobile](/creator/scenes-sdk7/building-for-mobile/input-on-mobile.md).

## Sizing

The single most useful recommendation when adapting an existing desktop UI to mobile:

> **Design and test the UI on desktop first, then scale UI sizes by 3× for mobile.**

Combined with the SDK's `virtualWidth` / `virtualHeight` setup, this gives you readable text, comfortably tappable buttons, and a layout that holds up across devices. Always confirm the result on a real phone — see [Preview on mobile](/creator/scenes-sdk7/building-for-mobile/preview-on-mobile.md).

## Current limitations

These limitations apply to scene UI on the current mobile client. They are tracked and expected to be lifted over time.

* **`border-radius` is not supported on mobile yet.** Rounded corners on `uiBackground` will render as squared on the mobile client. Plan your visual design accordingly, or branch the styling on `isMobile()`.

If you hit a limitation that is not listed here, please [report it](/creator/scenes-sdk7/debugging/report-bug.md) so we can document and prioritize it.

## Related

* [Mobile safe area](/creator/scenes-sdk7/building-for-mobile/safe-area.md)
* [Detect the platform from code](/creator/scenes-sdk7/building-for-mobile/detect-platform.md)
* [On-screen UI](/creator/scenes-sdk7/2d-ui/onscreen-ui.md)
* [UX & UI Guide](/creator/scenes-sdk7/designing-the-experience/ux-ui-guide.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.decentraland.org/creator/scenes-sdk7/building-for-mobile/ui-best-practices.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.