The blog post from 2015 on how to create a responsive column layout (English version posted in March 2016) is certainly one of the most often-read posts in the ILIAS blog. It serves as a guide enabling users to create multi-column layouts that work on both computers and smartphones, without the users having to have an extensive knowledge of CSS.

Since the release of ILIAS 5.3, however, the old guide is now obsolete. Using the ILIAS page editor, there is now an easy way to create multi-column and responsive layouts that look great on large screens and narrower tablets and smartphones. Read on to find out how to do this yourselves.

The new function enabling you to create multi-column layouts in the page editor is called “Insert Column Layout”. First you set how many columns the layout should have. Maximum 12 columns are possible. The reason for this lies with the grid system upon which it is based.

With this grid in mind, you also define how wide the individual columns should be. So, rather than defining width in percent or pixels, you use multiples of twelfths. Two columns of equal width would each be 6/12 wide for example. The combined widths of all columns must add up to 12/12, or in other words, 1. That may sounds complicated at first glance, but is really very simple in practice.

Whilst creating your new column layout, you can also set how many columns are to be placed next to each other when being displayed on varying screen sizes. There are four screen sizes: smartphone (small), tablet (medium), normal laptop/computer screen (large) and extra large screens (extra large).

For smartphone screens, it makes sense to display columns on top of one another and give each individual column the full available screen width i.e. 12/12. On a wide screen, on the other hand, you can easily display all columns next to each other (so a three-column layout could have each column assigned 4/12 on a large or extra large screen so as to enable all three columns to be displayed next to each other: 3 x 4/12 = 12/12).

It is also possible to give columns different widths – for example, one column could have a width of 4/12 and a second, twice as wide at 8/12. With a large enough screen, both columns can be easily displayed next to each other. For smartphone screens, however, they would still each be assigned a 12/12 width, so that each column would take up the full (and limited) smartphone screen width and consequently be displayed one on top of the other.

You can insert any content you wish into a column – for example texts, images but also sections, advanced lists, data tables or file lists. It is even possible to insert another column layout into a column.

Thanks to the new content element 'Column Layout', it is now possible for authors to create responsive page content in ILIAS. 'Advanced Tables', previously used for multi-column layouts, should no longer be used as these tables do not adjust themselves according to the screen width of the end device they are being displayed upon. Converting existing table layouts into responsive multi-column layouts is easily achieved with a little copy & paste. This is time well spent when you consider the growing importance of the mobile usage of ILIAS.