Page tree

Designing for Mobile

Last updated

Watch and Learn

Overview of Mobile Features (1:45)

Adaptive and responsive pages at work.

The mobile features in Theme Press allow you to create responsive and adaptive page designs.

The mobile features in Theme Press allow you to create responsive and adaptive page designs.

ResponsiveAdaptive

Responsive features relate to the size and structure of content. For instance, when viewing your site on a mobile device, Theme Press stacks blocks and shows them at full-width.

From an adaptive perspective, you can create mobile versions of a page and hide columns. Theme Press also allows mobile users to hide or show the menu.

Supported Mobile Operating Systems

We support iOS, Android and Windows Phone.

Required Configuration Changes to Use Mobile Design

In order for users to see the Theme Press mobile view, the Confluence Mobile Plugin and Confluence Mobile Web Plugin (new in Confluence 6.5.x) must both be disabled. This is done by a platform administrator. See the Theme Press Configuration page for steps to take when using mobile features.

To create a mobile version of a generic Confluence page, complete the following steps.

  1. Open the Page tab:
    1. Access a Confluence page.
    2. Press the period (.) shortcut key.

    3. The Theme Press Designer opens.
    4. Select the Page tab.
  2. Expand the Mobile View accordion.
  3. Click the Create Mobile Version button.
  4. The page refreshes to show the new page.

    Notice that the name of the page ends in .mobile.phone.

  5. Once Theme Press creates the page, you can make edits.
  6. You can also view the desktop version by clicking the Desktop Version button in the Page tab.

 

Best Practices

To avoid having to maintain two versions of the page content, consider using the Include Content Macro in the mobile page, so that only the primary page needs to be updated to keep both pages in synch.

If necessary, you can hide columns (and their blocks) or individual blocks from mobile users. You may want to hide these elements when they contain a page tree or table of contents. To hide columns or blocks, complete the following procedures.

  1. Open the Page tab.
  2. Expand the appropriate column or block accordion.
  3. Open the Handling expander.
  4. Check the Hide on Mobile box.
  5. Wait for the page to reload.

To help you organize mobile pages, we've created a page hierarchy that separates them from desktop pages.

When creating mobile pages in a site using Theme Press 1.2 or higher, the plugin adds these pages as children of .brikit.mobile. Therefore, each space with a mobile page has a .brikit.mobile parent page.

If you created mobile pages in a specific space prior to 1.2, move them below the .brikit.mobile page.

Comments, Likes and Labels sections do not appear in mobile pages designed with Theme Press (prior to version 2.2).

This is a known behavior in all versions prior to 2.2. There are no known workarounds, other than to upgrade your version of Theme Press to 2.2 or above. Issue resolved by PRESS-1331.

Confluence's mobile plug-in can be replaced with Theme Press mobile on a site-wide basis only. Administrators can not selectively disable the Confluence Mobile plugin by space.

Still need help?