GreenOrbit is responsive when viewed on mobile devices such as a tablet or a phone. This means the look of the site will alter to the relevant browser window width as well as change the page layout and how applications function and display. Although your intranet will automatically respond to the browser width you may customize the site layout and pages to optimize viewing on smaller screen sizes. There are a number of settings within GreenOrbit that you will need to consider before tailoring your site for mobile view.


What is a Display Mode?

Display Modes are defined within GreenOrbit and allow users to tailor how intranet content displays on different screen sizes. As part of your installation, there will be default Display Modes which will automatically be applied when a user views the intranet on a particular device.

Layouts and pages can then be customized to suit a specific display mode, meaning you can optimize content for the device it will display on.

Click here
for information on adding and managing existing Display Modes.


Display Mode Template

Whether it is for your subsite Layout(s) or content page(s), a Template sets the overall look and feel, controlling how content is structured on your site, what components are available and how those components function and display when viewed from different devices such as a desktop, tablet or phone.

For each display mode within GreenOrbit, a template can be configured to suit your site content and display appropriately on different screen sizes.

For example, in the HR subsite you may create a template, then set up the following display modes to suit different screen sizes, as shown below:


Desktop Display Mode  Tablet Display Mode  Mobile Display Mode 
     
Typical Desktop Layout


 Tablet Display Mode presents right cell content in the left cell
 
Mobile Display mode has a collapsible left cell and other content is presented in one column



The instructions below guide you through the process of configuring templates for the different display modes:


Layout Manager

  1. Navigate to the subsite home page that you wish to create or edit a Subsite Template for
  2. If creating a new Subsite Template:
    Select the New Subsite Template option from the Edit menu within the Top Toolbar displayed at the top of the screen

    OR

    If editing an existing Subsite Template:
    Select Layout Manager from the Top Toolbar displayed at the top of the screen then select the Subsite Templates tab where you can select the respective Template

  3. Once in Edit Mode within the Subsite Template the Toolbar provides additional template options. You will also be able to see which display mode you are currently editing (i.e. "Display Mode Toggle")

CMS

  1. Navigate to the folder that you wish to create or edit an template
  2. Navigate to an existing folder or page that you wish to create or edit a template for
  3. Once in Edit Mode within the template the Toolbar located at the top will provide additional editing options. You will also be able to see which display mode you are currently editing (i.e. "Display Mode Toggle")



Creating a display mode view

The Layout Manager and CMS are used to tailor your site content for display modes; Layout Manager creates and CMS creates static content pages. Although both applications are used for different purposes, the underlying concepts and techniques for creating layouts and pages are applied to both applications, including how to configure layouts and pages for different display modes (i.e. optimizing your intranet for viewing on mobile devices).

The instructions below guide you through the process of tailoring content for the different display modes:

Layout Manager

  1. Navigate to the subsite home page that you wish to create or edit an existing layout
  2. If creating a new layout:
    Select the Layout Manager from the Top Toolbar displayed at the top of the screen, then select Layout from the Add menu

    OR

    If editing an existing layout:
    Select the Live option from the Edit menu located in the Top Toolbar displayed at the top of the screen
  3. Once in Edit Mode within the Layout the  Toolbar located at the top will provide additional editing options. You will be also be able to see which display mode you are currently editing (i.e. "Display Mode Toggle")


    CMS

  1. Navigate to the folder that you wish to create or edit an existing page.
  2. If creating a new page:
    Once at the Folder, go to the Editing Toolbar within the screen and select the CMS Page option from the Add menu

    OR

    If editing an existing page:
    Once at the Folder, select the page where you will be presented with the the Edit option from the Action Toolbar located above the folder contents.

    Once in Edit Mode within the page the Toolbar located at the top will provide additional editing options. You will be also be able to see which display mode you are currently editing (i.e. "Display Mode Toggle")

     

Customized Template required?

To create a layout or page view for a particular Display Mode, you will need to ensure that an associated template has been configured.


For example, in your HR subsite you create a 'team contacts' page and would like to have a mobile view for this page. Meaning that a template for the mobile display mode needs to be customized first.


Attempting to create a display mode view where a template has not been customized will present the following message:


 


The Display Mode Toggle 


Located to the right of the Top Toolbar is the Display Mode you're currently editing. By default, the Desktop Display Mode is selected as shown below.


 

Select from the Display Mode drop-down list (ie. the Display Mode Toggle) to switch between display modes allowing you to configure the layout or page for the selected Display Mode. For example, select the Phone Display Mode to customize the layout or page and how content will be displayed when viewed on a mobile device