Open Source e-Learning
  • Login

Functions

Kunkel, Matthias [mkunkel] - 27. Nov 2012, 17:40

Responsive Design in 4.3

Using ILIAS on mobile devices has been a main topic in past conferences and user meetings. Users want to have access on their contents and information in ILIAS also with their smartphone or other mobile devices. The Mobile Plugin developed by studer + raimann ag and already presented on the last ILIAS conferences in Bern and Stuttgart is one way - and a very smart one. But with ILIAS 4.3 it is also possible to use ILIAS on your smartphone without having this plugin on your installation - thanks to "Responsive Design".
Left: mobile plugin – right: 4.3 with responsive design
'Responsive Design' is a concept for presenting the website's content appropriate to the size of the user's screen. If you are calling a web page from your smartphone the available width of the screen is very different from the widescreen in your office. A 'responsive designed' page will adopt the size of your smartphone and re-arrange the elements of the webpage. Instead of a three-column layout for a widescreen a responsive web page on a smartphone will present the content of the second column under the first column - and reserve therefore the entire screen width for presenting the content of the first table column.
As part of a general CSS revision of ILIAS all templates and the default style sheets of ILIAS have been modified to support the rules and principles of responsive design with version 4.3. Layout tables have been substituted by a div-based design. In-style definitions have been transformed to real style classes and definitions. And several GUI elements were modified to get a satisfying presentation on mobile devices as well as on a traditional screen.
One big advantage of the responsive design approach is that users do not need to do anything to use ILIAS both on mobile devices or on a computer or labtop. The browser itself decides which style is used to display ILIAS in the best way. You can easily check this by opening ILIAS 4.3 on your computer and reduce the size of the browser slowly. Once you reached the width of a mobile device browser another stylesheet and even other icons and menues are loaded to display the ILIAS page in an appropriate way. And if you open ILIAS on your mobile device this optimized view will be presented immediately.
This CSS revision and the introduction of responsive design was done in the last weeks and are the major reason for the current delay of the 4.3.0 stable release. Responsible for this huge development are our new CSS maintainer Jean-Luc Braun and our Head of Development Alexander Killing. While funding for Jean-Luc's engagement was given by the ILIAS open source e-learning society and doubled by Qualitus GmbH, Alex Killing made once more a honorary contribution. Thanks to all who made this important step possible!

Functions

No comment has been posted yet.