The column layout is a very popular and much used page editor element which helps to structure page content in a responsive grid that changes depending on the screen size. On a small screen (mobile view) for example, the columns are presented among each other.

The column layout is a very powerful page editor element which requires a broad understanding of its behaviour on different screen sizes.

Unfortunately, the current presentation of its setting and configuration options are far from simple. It is very difficult to get the link between the column division, their expanse based on a 12/12 grid and their display mode depending on different devices. The configuration is not self-explanatory.

Besides, users have to switch between the column layout settings and the page editing tab again and again to get an idea of the result when having changed the grid division. A lot of users are not sufficiently aware of what they are doing which leads to column layouts that do not show an ideal behaviour on different screens.

While the ILIAS 7 update introduced small changes only (transfer of „Insert Column Layout“ to slate) we suggest extensive adaptions and expansions for ILIAS 8 to make the configuration of the column layout more understandable.

However, the complex space of opportunities the column layout offers today should not be reduced.

For ILIAS 8 we suggest improvements concerning

• Insert Column Layout Process
• Column Layout Editing (Settings).

The overall aim is to visually support the configuration of column layouts in order to establish a better understanding for its responsive behaviour.

When adding a column layout to a page the slate presents a form with different layout options. Initially a Two-Column-Layout is selected.
The selected layout should be presented in the content area by a static preview icon. As an alternative to this „just-in-time-visualization“ a „Refresh“-Button could trigger the update of the preview image.

By clicking the „Save“-button the chosen column layout will be added to the page. The adding process is finished and the column layout has successfully been added to the page.

By clicking „Cancel“ users leave the insert column layout mode and come back to the page editing mode.

As soon as a column layout has been chosen and saved, the content area shows the settings of the added column layout. The previous grid configuration table will be maintained but integrated into a new interface.
 
In this interface users can still change the division of their column layout by using the well-known dropdown-selections for each column. But in contrast to the ILIAS 7.0 Implemetation ILIAS 8 will also present the column division by visualizing the grid of 12/12. By showing the share of each column on the total width the later display of column layout becomes much more clear.
 
The maximum possible width in a row will remain 12. If the width of all columns exceeds 12, the display of the column layout will wrap. Thus, user will get a more realistic impression of the later display of their column layout.
 
Desirably, auto-saving will be implemented, so that a refreshment of the interface will be triggered directly by a change of the dropdown-selection. Considering performance effects a „Save and refresh“ button within the slate could be a good alternative (to avoid too much page reloads).

Rules:

• If a column is minimized the size of the column(s) next to it remain(s) the same.
• If a column is minimized this will not produce gaps between the columns. The columns just move closer together.
• Minimum size of a column is 1/12.
• If a column is enlarged the size of the column(s) next to it remain the same.
• If the overall width of 12 is exceeded due to an enlargement of a column, columns on its right will „fall“ (completly) into the next row.
• Maximum size of a column is 12/12 (explanation will be given in the slate)

It will still be possible to make no choice for the width of a column and just to leave the box empty. The current behaviour in that case will be kept which means that a column gets the size set on the next smaller device.
If there is no selection for none of the columns each column has the width of 12/12.

Besides offering the opportunity to adapt column sizes by dropdown-selection, the ILIAS 8 implementation will allow further actions in the same interface.

For each column there will also be a Standard Dropdown which provides the well-known actions:

• Move to the left
• Move to the right
• Add column to the left
• Add column to the right
• Delete column

When adding a column its default width will be 12/12 (current behaviour will be kept).

When deleting a column that contains content (e.g. texts, blocks, images) a warning message (modal) appears. It will inform users that the deletion leads to a deletion of the content. In a best case scenario, the current content will be presented as well.

Executing an action affects all screensizes where as a change of column size only affects the screensize that is currently in progress (see also „View controls“ for further information). The slate will contain an explanation of that behaviour.

The settings tab will offer different view controls which present the appearance of the column layout on different screen sizes. From left to right:

• Small
• Medium
• Large
• Extra Large (default)
• All

When inserting a column layout to a page and having chosen a layout (e.g. two-column-layout, main and side block,...) the corresponding column sizes are initially transferred to all views.
 
Typically users want to configure the appearance of their column layout on extra large screens at first. Therefore, users will initially land on the „Extra Large“ view  (after edit the column layout). Here they can check and modify the chosen layout and/or adapt it for presentation on extra large screens.

Afterwards they can check the appearance on other screen sizes by clicking the different view control buttons and – if necessary – change the layout for these screen size as well.


A byline for each view control will explain the meaning of „Extra Large“, „Large“ etc.

Changes of column division by using the dropdown-selection will apply for the current view only whereas actions like adding, moving or deleting columns will apply for all screen sizes. 

With the exception of „All“ each view will offer the same features:

• Customize column size by dropdown-selection
• Add / Move / Delete columns by use of Standard dropdowns

If auto-saving will be implemented, a switch between the different views will not lead to a rejection of changes (see 2.1.1. above).

View control "All"

The view control „All“ will present the previously known table. Sorting and deleting of columns can be handled just like in ILIAS 7, adding a column will be possible by clicking a corresponding button.

Keeping this interface within the view control „All“ means offering a fast editing opportunity for „advanced“ users who are already familiar with the configuration of column layouts.

As mentioned above the slate will contain general explanations on the column layout configuration in a textual form:

• Maximum width of a column 12/12
• Opportunity to change width of a column via dropdown-selection
• Meaning of "no width selection"
• Opportunity to use view controls (see further information below)
• Effect of using Standard dropdowns for actions (effect on all screen sizes)

The following issues need a uniform implementation within the Page Editor Revision:

• "Save and return" vs. "Save" button within the slate to save and quit the configuration
  • Although there will be auto-save users might feel more comfortable with the wording "Save and return"
• "Back" vs. "Finish Editing"

The dropdown can be used to adjust the size of the column width. The grid of 12 visible in the background helps to establish a reference to the values available in the dropdown (e.g. 4/12).

If a larger value is selected (e.g. 6/12), the column width is adjusted directly after the selection from the dropdown and is newly placed over the 12 grid in the background.
If necessary: The column width is only adjusted after saving the page.

Each column has a dropdown with actions. These actions are applied to all device sizes (Extra Large, Large, Medium, Small).

The previously known table is displayed if you select "All" in the ViewControl. The order of columns of the table should correspond to the order of the view controls
(Extra Large as first column).

The visualisation of the layout cells in the background is a new interface concept. The included Dropdowns are already existing elements.

The main dropdowns and modals used should be accessible like the KS elements. What could be examined if the feature is done, how usable this is for screen reader access, since the whole feature is quite a visual thing.

The HTML/CSS structure of the Dropdowns floating on top of the layout/cell visualisation seems the be the main challenge.

See https://github.com/ILIAS-eLearning/ILIAS/tree/trunk/Services/COPage

This feature does not implement any additonal privacy related changes.

No security implications.

If you are interest in funding this project, please add your name and institution to this list.

• …

More Informations: Page Editor Revision - Step 2 (Crowdfunding for ILIAS 8)

{The maintainer has to give a description of the final implementation and add screenshots if possible.}

Test cases completed at {date} by {user}

• {Test case number linked to Testrail} : {test case title}

Approved at {date} by {user}.