Responsive layout

What is a responsive layout?

A responsive page enables you to present content so that the presentation adjusts to the size of the browser window. Using Intrexx, your portal and all the application pages contained in it, can be designed for three display sizes:

SMALL (i.e. smartphones)
MEDIUM (i.e. tablets)
LARGE (i.e. desktop PCs)

According to the "mobile first" principle, a responsive page should be designed for the smallest display device first. The layout rules defined for the smallest display size are automatically applied to the larger display sizes. The rules are therefore inherited from small to large, provided these have not been overwritten deliberately in the page design for a MEDIUM or LARGE display.

Grids

The grid element or the grid principle is found in three locations:

in the "Applications" module
in the "Design" module
in the Grid settings for portlets on the portal pages

It is the basic element of a responsive page.

In the figure above, you can see the preview of a grid in the lower area of the properties dialog.

A grid basically consists of 12 family units which rest side-by-side.

You can arrange as many containers as you like in the grid. In turn, a container can have as many unit families as the 1-12 units contained in a grid. Finally, the desired layout or application elements are applied.

Here in the image, the containers are configured so that the first and the second containers each take up six grid unit families. They are displayed next to each other. The third container takes up 12 unit families. It takes up the complete grid row.

Any containers you define are placed in order in the grid. Once the twelfth unit has been exceeded, the container concerned is moved to a new row starting at grid unit 1.

Containers are always implemented as a div element.

With a div element, multiple elements, such as text, graphics or tables, can be boxed together in one area. The div element invariably begins in a new row of the running text. In this way, areas can be created that can be formatted with CSS.

The grid element can be interleaved as often as needed and thus provides a variety of design options. Grids and containers can also be used on a page together with non-responsive elements. There is no upper limit to how many containers can be stored in a grid. Each grid must always carry at least one container.

Application page with a grid

Design your application pages in the "Applications" module.

To design a responsive application page, position the grid, from the Elements area onto the workspace via drag & drop. When the element is inserted, there are already two containers (Container 1 and Container 2) in the grid. With a double-click on one of the containers, the Zoom area is opened.

This is an individual workspace for each container where you can insert the elements that you would like to see in the currently selected container. Lastly, click the "Workspace" tab again below the zoom area to see the grid in full on the workspace featuring all the containers.

A preview of the containers and their elements is then shown on the workspace. The elements properties dialog can be opened from here too by double clicking on the element. New elements can be created directly in the workspace, there is no urgent need to switch to the Zoom area.

In the toolbar, you will find the buttons "S", "M" and "L". These allow you to switch between the various display sizes. The grid element on the workspace is then displayed with the corresponding preview.

Grid properties for the application elements

The properties dialog of the grid can be opened by double-clicking on the border area.

"Summary" tab

Title

Provide the grid element with a title here. Click here for more information about this topic.

Same container height

If this setting is active, all columns will be displayed with the same height. This feature is an important design element, especially when using background colors or images. The height is determined by the highest column in the grid.

The following settings are ignored if the setting "Same container height" is enabled on the "Container" tab:

Centered
Always position the last container at the right-hand edge of the grid

"Display size" column

It shows you the three sizes: SMALL, MEDIUM and LARGE.

"Visible" column

With this setting, the entire grid can, if required, be hidden for each of the display sizes. Deactivate the corresponding checkboxes to do this. Please note that hidden grids are still loaded on each device. This means that the volume of data is not reduced.

Conditional display

Activates the conditional display of the grid.

Edit condition

This button opens the script editor where the condition can be defined.

"Container" tab

The following settings are ignored if the setting "Same container height" is activated on the "General" tab:

Centered
Always position the last container at the right-hand edge of the grid

The preview at the bottom of the dialog will depict the result of both settings anyway, even though they do not have any effect in this case.

Display size

You can choose from a small (S), medium (M), or large (L) display size here to edit the grid properly.

We recommend that you start with the layout for the SMALL display setting. Naturally, displays on smaller devices such as smartphones will present the greatest challenge to the depiction of content. Once all the columns have been setup up for the smallest display size, the display on larger devices can be developed very quickly and simply.

"Container" column

By double-clicking on the name of a container, a dialog will open that allows you to modify the container name.

Container properties

Title

Determine the title of the container. Click here for information on multilingual titles.

Click "OK" to save the changes and close the dialog again.

"Width" column

Click in this column to select from a list the number of unit families in the grid which should be occupied with the container. If no width is specified, this means that the container automatically takes up all 12 units in the grid.

If the content of the container has a specific width that is wider than the container itself, this content will exceed the container's border. This overflowing content will be overlapped by the subsequent container. The responsive behavior of the container will not be affected. If you forgo using elements, exceeding the container borders can be avoided. An individual style can be assigned to the affected responsive container or a grouping within a responsive container in order to control the overflow behavior. The overflowing area can be hidden using the CSS property "overflow-x: hidden" or horizontal scroll bars can be shown using the CSS property "overflow-x:scroll".

"Visible" column

With this setting, the corresponding column is visible in the grid. Less important content can be hidden on smaller devices. The subsequent containers close ranks so that there are not any gaps. Please note that hidden containers are still present on the device. This means that the volume of data is not reduced.

"Centered" column

With this setting, all containers, which are positioned in front of the centered container in the grid, maintain their position. The remaining space in the row is reserved for the centered container. The centered container is not positioned in the middle of the reserved space but rather in the horizontal middle of the entire grid. If the previous containers already take up half (or more) of the space, the centered container is overlapped.

If other containers follow the centered container, these will be moved to the next row and placed at grid position 1. The same rule applies here; the last container in a row is positioned at the right-hand edge. This can be pulled across to the other containers by deactivating the "Always position last container at the right-hand edge" option.

It is generally recommended to select the "Centered" option for a container only if it is by itself in the grid but does not take up the entire 12 grid units.

"Offset" column

These settings make it possible to move a container to the right or left, respectively, by a certain number of grid units. The containers that follow afterwards will also be shifted.

"Left padding, Right padding” column

If this option is not selected, the container will be displayed without left or right padding, respectively

"Push / Pull" column

These settings make it possible to move a container to the right or left, respectively, by a certain number of grid units. As opposed to the "Offset" setting, the containers that follow will not be shifted. The "Push" and "Pull" settings are usually only used for swapping containers of the same size. To do this, one container is given the "Push" property (shift to the right) and the second container is given the "Pull" property (shift to the left). Please note that in the case of unfavorable values for "Push" and/or "Pull", containers can overlap, which usually leads to undesirable results.

Always position the last container at the right-hand edge of the grid

If this setting is not activated, the last container will be positioned directly next to the container before.

Preview

On the right-hand side of the dialog, you can see a schematic preview of the current column configuration.

Add column

A new container is created.

Delete column

Removes the selected container from the list

Edit column

Opens a dialog that allows you to edit the column's title.

Change order

Shifts the selected container up or down, respectively.

If a container is deleted, the elements in it will also be deleted. A corresponding notification will also be shown before deletion.

Page wizard for application pages

Responsive pages can be created manually or automatically even more easily using the Page wizard. The information provided below covers everything about building responsive pages manually. You can find information about the Page wizard here.

Portal pages with a grid

Design your portal layout in the "Design" module. To design a responsive portal page, the grid can be positioned from the Elements area onto the Layout structure via drag & drop.

Grid properties for the layout elements

If there are layout elements, a grid’s properties dialog can be opened by double clicking on the element in the layout structure. It is opened automatically when a new element is created.

"Summary" tab

Click here for a description of the settings ID, title, header level, heading and roles.

Same container height

The following settings are ignored if the setting "Same container height" is enabled on the "Container" tab:

Centered
Always position the last container at the right-hand edge of the grid

"Display size" column

It shows you the three sizes: SMALL, MEDIUM and LARGE.

"Visible" column

As always, you can access there properties in the properties dialog in the "Design" module and also in the Element settings.

"Container" tab

The settings here are identical to the settings for the "Grid" application element. Click here for the relevant description.

Layout properties - defining display sizes

In the "Design" module, the minimum display width for the sizes MEDIUM and LARGE can be specified in the layout properties, which can be opened via the main menu "Layout / Layout settings".

FAQ

Why does a grid have 12 units?

Twelve units are widely used in the area of web design and provide the greatest flexibility for designing pages.

What is the difference between mobile a responsive pages?

Responsive pages are not a replacement for mobile pages. Which structure is best depends on the current scenario of application. Here are the advantages and disadvantages of mobile and responsive pages:

Mobile page		Responsive page
+	Reduced data volume because fewer CSS and JavaScript files are transferred	-	Hidden containers are also transferred
-	Separate pages must be created for desktop PCs and mobile devices	+	View and edit pages only need to be created once
		+	Automatically adapts to the display size
+	Well suited for poor mobile data connections, e.g. without WLAN	+	Well suited when all clients have good mobile data connections, e.g. WLAN
-	Modifications must be carried out on multiple pages	+	Reduced maintenance requirement
		-	Increased complexity in the conception as the page needs to be designed for three display sizes
+	Design and content can be adjusted optimally to display size
+	Parallel to an existing desktop version is feasible at any time

Why is the last container in the grid always positioned to the far right and how can I change that?

This behavior is due to its adaption to various browsers. If the last container in the grid should be positioned directly after its predecessor, you can deactivate the "Always position last container at the right-hand edge" on the Container configuration tab. If paddings are not removed or the same column height is not created, then the last container will be positioned directly after its predecessor.

In the preview at the bottom of the dialog you can see three containers, each one is two grid units and uniformly arranged in the grid when the "Always position last container at the right-hand edge" setting is activated.

Here is the arrangement when the "Always position last container at the right-hand edge" setting is deactivated.

How can I center a container on a page and what effects does that have?

Click here for more information about this topic.

How are distances between containers defined and what effect does the "Offset" setting have?

Using the "Offset" setting, a container and all of successive containers can be moved to the right by a defined number of grid units.

Here you can see five containers, each one is two grid units wide.

Here is the same container arrangement, each one is two grid units wide. An offset of three grid units has been specified for Container 3.

The same container arrangement, each one is two grid units wide. An offset of three grid units has been specified for Container 3. The "Always position last container at the right-hand edge" setting has been deactivated.

Why can’t I see any containers which I have hidden for the display size "SMALL" on my desktop PC?

Settings, such as visibility, which have been defined for the display size "SMALL" also apply to the display sizes "MEDIUM" and "LARGE", provided that individual settings for these display sizes have not been carried out.

Why does a tooltip need a fixed width if it is opened from within a container?

If a tooltip is opened from within a container, then its crucial that this has a fixed width because the tooltip would otherwise be as wide as the container from which the tooltip was loaded. If, for example, a container stretches across one grid unit, then the tooltip is only as big as the calculated percentage width of the grid unit. A tooltip's width can be fixed by opening the properties dialog of the button that loads the tooltip. On the Actions tab you will find the Destination options. Click on Configure tooltip positioning.

How can individual containers be rearranged for various display sizes?

The properties "Push" or "Pull" can be assigned to the containers. These settings make it possible to move a container to the right or left, respectively, by a certain number of grid units. As opposed to the "Offset" option, the successive containers will not be moved. The "Push" and "Pull" properties are usually used to swap containers of the same size. To do this, one container is given the "Push" property - move to the right - and the second container is given the "Pull" property - move to the left.

If unsuitable values are entered for "Push" and/or "Pull", then the containers will overlap, this typically leads to undesirable results.

You can see four containers, each one is three grid units wide, in the display size "MEDIUM". Container 1 and 4 should swap their positions for the display size "LARGE".

To do that, Container 1 is given the "Push" property with a value of 9. Container 4 is given the "Pull" property with a value of 9.