When you have the device detection implemented, you will have two User Groups, "Visitor - Desktop" and "Visitor - Mobile". The Alternate Pages approach described below assumes this has been done.

Alternate Pages

With alternate pages, you take desktop users to one page, and mobile users to another. These pages can be styled appropriately for the different devices.

For example:

Desktop	Mobile
Detailed horizontal navigation with dropdowns and flyouts.	Simple single level dropdown menu.
Multiple columns of content, containing links to related pages.	Single column of core information.
A range of font sizes.	Larger font sizes to ensure legibility on small screens.

The concept is to take the user to one page, and then redirect them to a version that is appropriate for their device. In this example we call the first page the "Main page", and it then has two child pages, "Desktop Page" and "Mobile Page". In a real application all three pages might have the same name, but we differentiate them here for clarity.

Main Page
- Desktop Page
- Mobile Page

The "Main Page"

The "Main Page" is the page that will appear in the site navigation, and if appropriate have a DirectURL associated with it.

Set View Page permissions to
Allow for both "Visitor - Desktop" and "Visitor - Mobile"

Set the BE / Settings / Options / Redirect to First Child to Yes

This page does not have any content in the page body.

The "Desktop Page"

Set the View Page permissions to:
Allow for "Visitor - Desktop" and 
Deny for "Visitor - Mobile"

Set the BE / Settings / Options / Redirect to First Child to No

The page body should contain the content, styled appropriately for desktop users.

The "Mobile Page"

Set the View Page permissions to:
Deny for "Visitor - Desktop" and 
Allow for "Visitor - Mobile"

Set the BE / Settings / Options / Redirect to First Child to No

The page body should contain the content, styled appropriately for mobile users.

 

Sites containing multiple pages

In a single page site, the above triplet of pages will work fine. However if your site contains several pages, you will want to optimize the styling to save repeating settings on multiple triplets of pages.

The general solution for avoiding repeating settings is to use the Inheritance built in the Behavior Editor. However in this case, you want to have two different sets of values inherited, one for desktop pages, and one for mobile pages. As the parent page can only hand down one set of values per component type to its child pages, we need to use two different component types. We already have  the "Page" component, which we will use for the desktop pages, but now we use the "Simple Page" component for the mobile pages.

The Behavior Editor settings themselves should be set as high up the tree as you can, so as to avoid you repeating them:

Menu (Page) < Set BE settings for both Page and Simple Page here
- Main Page A (Page)
-- Desktop Page A (Page)
-- Mobile Page A (Simple Page)
- Main Page B (Page)
-- Desktop Page B (Page)
-- Mobile Page B (Simple Page)

 

Synchronising content between desktop and mobile pages

If you need to keep the content of your desktop and mobile pages the same (albeit styled differently) you can use this method with Abstracts.