How to: |
A responsive portal allows you to create layouts that resize dynamically to any width based on screen size, device, and orientation, thus eliminating the need to design for a specific device preference. This approach takes your content beyond the desktop and delivers a quality experience to users, on any display. The Portal Designer offers you a series of versatile presets, that make the task of creating a responsive portal a quick and straightforward process.
A user must have the privileges of a developer or administrator to be able to build a responsive portal.
The New Portal dialog box opens, as shown in the following image.
See Launching the Portal Designer for more information on creating a new portal.
The Portal Designer opens.
Keep the default values for the Alignment and Page Height Mode options.
The banner width changes in live preview to match the closest preset width.
The Properties panel changes to the Page properties.
Note: Keep the Lock Page check box selected to prevent end users from interfering with the responsive behavior.
The Choose a Layout menu opens.
The responsive container is inserted, taking up the full width of the page.
The responsive container now fills the entire canvas area.
The Responsive Panel Properties dialog box opens, as shown in the following image.
Note: The sample content files include sample charts, reports, and development widgets, which you can use to familiarize yourself with the responsive design principles. You can also use the development widgets to create a visual template of your portal, and then populate this template with your existing content.
Follow the instructions provided with the sample content to import the files and developement widgets to the Resource tree of your portal.
The Resource tree opens on the right side of the Portal Designer.
Each widget displays its own dimensions, such as width and height in relation to the browser size. It also shows the width and height range for a device and portal page at run time.
The Responsive Item Properties dialog box opens, as shown in the following image.
Note: In a responsive portal, setting fixed dimensions for items is not recommended, because the viewport width and height continually change from device to device. Responsive layouts need to adapt to this change, whereas fixed dimensions create too many constraints. For this reason, you must only set a range between minimum and maximum width and height, defining the amplitude with which the item can vary in size.
Keep the default values for all other properties, and click OK.
The two large widgets change size simultaneously. The layout now features two even lines of widgets, as shown in the following image.
Your template is now ready to be populated by content.
The widgets refresh displaying the selected content, as shown in the following image.
Note: You can drag several items onto a singular widget, or add items to the existing content while holding the Ctrl key, to create tabs.
Note: Clear the Minimize, Maximize, Move, Resize, Hide, Delete, and Responsive Properties check boxes in the Properties panel, to prevent end users from interfering with the responsive behavior.
Your new responsive portal now appears below the Portals node in the Resource tree.
WebFOCUS |