Chapter 23. Mobile and Responsive Portal Site
A portal site optimized specifically for mobile and touch based devices is available. This site is designed with responsive principals to give the best user experience on desktops, tablets, and mobile phones.
This new site is accessed through http://localhost:8080/portal/mobile.
Feature Overview
- Responsive Design
- The site adapts to the width of the browser, and reported screen resolution of the device accessing the site. Unlike the classic portal site, the responsive site does not use fixed-width portlets.
- Shared Layout (User Bar)
- The Shared Layout bar (displayed at the top of the page for authenticated users) is now hidden to all users except Administrators.The user bar can be configured to displayed for all users through the use of a portal property.All User Bar functionality has been moved to a new responsive header portlet, except for page edit functionality and site navigation links.
- Automatic Redirection
- The redirection service has been configured by default to redirect mobile devices to the mobile site. If a user tries to access the site from a desktop, they should not be redirected and sent to the classic site.Automatic Redirection is checked the first time the user accesses the site. The portal redirection service remembers which site the user was last using as their preferred site.For more information about the redirect service and how to configure it, see Site Redirection in the Development guide.
23.1. Issues and Limitations
The following sections detail the known issues and limitations of the Mobile and Responsive Portal.
The Mobile and Responsive Portal is classed as a Technology Preview in Red Hat JBoss Portal 6.1, therefore there may be some features that require improvement. If you find an issue with the new Mobile and Responsive Portal, open a case through the Customer Portal by visiting https://access.redhat.com. Your feedback on how to improve the mobile experience is very welcome, and greatly appreciated.
23.1.1. Administration Functionality on Mobile Devices
The responsive site is designed to be presented to the portal user, as opposed to the portal administrator. Administration functions may be limited on touch and small-screen devices such as a smart phones.
- GTNPORTAL-3060: Support Node Management on Mobile Devices Node Management on iOS based devices will currently not work due to Safari for Mobile not supporting custom context menus. Some Android browsers support context menus by utilizing a long click. Node management on these browsers functions correctly.
23.1.2. Container Layouts and Page Configurations
The WebUI containers and layouts are designed for desktop browsers and large-screen page layouts only. As such they cannot be used to create responsive sites, except for the 'Row Page Layouts' and the 'Row Layout Containers'.
Only use the row layouts for responsive portlets and do not specify the width or height of the containers or portlets. The row layouts will give portlets the full width of the page and allow the portlet to handle how it should be rendered based on the browser's width.
If more complex layouts are required (such as column or mixed layouts) these will have to be done within the constraints of a single portlet and not through multiple portlets.
23.1.3. Group and User Sites
Group and user sites are shared between portal sites. There is currently no mechanism to customize or configure these sites to perform in one manner for the mobile site and another manner for the classic site.
Because the skin for these sites is set to the skin of the portal site that accesses it, these sites cannot be properly configured to work with the mobile site without affecting how the classic site interacts with it. While on the group and user sites, the shared layout/user bar portlets will be displayed to allow the user to navigate from one area to another.
Shared layout portlets may be enhanced in a future release so that they can be reused for both the responsive site and the classic site.
Note
The shared layout/user bar portlets are not optimal for mobile or touch based devices, but do work in a limited way. When navigating a menu, tapping once on a menu element will open the sub-menu for the element and tapping again will follow the link for the menu. While not ideal, this navigation style should allow shared layout user bar portlets to function on mobile.
23.1.4. Interchanging Mobile and Responsive Site Skins
The responsive skin has been designed for the responsive/mobile site and the classic skin has been designed for the mobile site. It is recommended to use the skin on the site it was designed for, using the skin on another site may result in some minor graphical issues or inconsistencies. It may be recommended to remove the ability for users to specify their skin preferences.
23.2. Configuring the Mobile Site
There are a few options for configuring the mobile site.
There are a few options available under site properties which are especially important for the mobile site.
Site Properties
- Viewport Context
- The viewport specifies things like the width, height and zoom level a browser should use when loading a mobile site. The value specified in this property will be directly added to the viewport meta tag for the portal. The default value used in the mobile site is "initial-scale-1.0" which will set the initial width to that of the browser and still allow the user to zoom into the page.
- Shared Layout
- This can be set to 'Admin Only' or 'All Users'. Since the default shared layout portlets are not necessarily optimized for mobile devices, we have by default disabled the shared layout portlets for all users except administrators.
Responsive Header Portlet Preferences
- enable.dashboard.link: this value specifies if the dashboard link should be displayed in the header portlet or not. By default the mobile site is configured to display the dashboard, but if required it can be hidden by setting this preference to 'false'.
- enable.grouppages.link: this value specifies if the group pages and menu should be displayed in the header portlet or not. By default the mobile site is configured to display the group pages, but if required it can be hidden by setting this preference to 'false'.
- level: this, like the navigation portlet, specifies how many levels of nodes should be fetched at a time when updating the menu via a ajax request. Accepts any integer value greater than 1.
For more information about the redirect service and how to configure it, see Site Redirection in the Development guide.