Show Advanced KnowledgeHide Advanced Knowledge

Responsive Design

1 Requirements

The idea is to deliver a basic support for mobile devices, especially smartphones, by just using CSS techniques. There are lots of articles on "responsive web design" in the internet, if you need more information on the basic concepts.
 
Currently ILIAS mobile strategy is based on a plugin that uses jQuery mobile to imitate the look and feel of a real smartphone (iPhone) Application. The outcome of the plugin is much fancier than the responsive design approach. On the other hand the responsive design approach has the following advantages:

• Low maintenance costs since it only uses some lines of CSS - no additional transformation needed
• No need to install anything, neither on client or server side
• No new navigation concepts, since the UI is very close to the browser version
• Easy CI-adoptable, only CSS needed

There is no reason not to try and implement both alternatives for now. Both give us important feedback of the possibilities of learning management systems in the mobile world.

As the responsive design makes use of current HTML/CSS technologies we are considering to Drop IE7 Support.

1.1 ILIAS 4.3 Prototype

The 4.3 beta version currently contains a few lines (< 200) of additional CSS that make the design responsive. We would like to have some early feedback on this. So please go use your smartphone browser and open http://www.ilias.de/test43. Add your name, smartphone type and feedback to the lists.

1.2 How should it look like?

We are currently using some CSS media queries that also work on a normal browser if you shrink its width under 480px. So please try this first. If your smartphone does not switch to this presentation, then our media queries are not affective for it.

1.3 Feedback: Problems

Alex Killing (LG P500 Optimus One, Android 2.2), 18 Oct 2012

• Cluttered Design/Links to small: I guess this is a general issue, but especially if you have lots of permissions some things look cluttered quickly, especially if there are a lot of tabs. And the links are just a little bit too small and have not enought space between them.
• Contrast: Contrast on my device is quite low. The light grey of the block borders is nearly invisible.
• Forms: Forms often need a little bit more horizontal space than available. The problem becomes a major one, when subforms are rendered. I guess the underlying table layout is something that will not work on smartphones.
• Data Tables: Data tables quickly need more horizontal space than available. This is a general problem. However the navigation bar and the filter section could be improved.
• Tiny MCE: In forums it falls back to a normal textarea, which is ok. In tests however TinyMCE is rendered but unusable.
• Horizontal Scrolling: E.g. needed under Settings/General Settings on the PD. There is no way to scroll horizonal on this screen (it uses a DIV with overflow:auto). This is a known issue of older Android versions.
• Left Column on Personal Desktop: The blocks of the left column on the personal desktop are currently hidden. This is a general issue of the currrent approach.
• Survey: The progress bar is displayed with an extremely large height value (larger than the screen) which breaks the layout completely.
• Tests: The navgation buttons (previous, list, postpone, next) is renderd in a way that makes the next button disappearing on the right. If the question list is presented left from the current question, the layout is more or less broken.
• Forums: Using the "edit post" form suffers from the general form issues, especially when its embedded in the thread table.

Matthias Kunkel @ iPhone4 ios5, 18 Oct 2012

• Once I open an Action menu I cannot make it disappear - no matter where I am clicking.
• Blog: due to the background image the page is still 880px wide and scrolls horizontally - but content is reduced in width properly. (AK: fixed)
• Permissions: big tables like Permissions are not responsive - and scrolling horizontally is very, very slow. No idea why.

1.4 Feedback: Things that work

Alex Killing (LG P500 Optimus One, Android 2.2), 18 Oct 2012:

• Many basic learner screens look ok. The personal desktop, object listings in categories, courses, groups (not if the page editor is used to display layout tables with lots of content)
• Glossaries, Wikis and Learning Modules (Toc2Win view, not SCORM) and Blogs look ok (again only if no layout tables are included)
• Exercises and Weblink lists look ok (Learners view).
• The presentation of threads in forums is also ok (not editing a posting). The new gallery view of media casts looks good, mp4 videos work.
• Action Menu Drop Downs: No problems here like on the iPhone. I can click anywhere outside of an overlay and it disappears like in the browser version. However their positioning and scrolling behaviour might be improved.

2 Status

• Scheduled for: Release 4.3 (as part of the CSS revision)
• Funding: Partly funded by Leifos, Qualitus, ILIAS open source
• Development: Feature is to be developed by Qualitus, Leifos

3 Additional Information

• If you want to know more about this feature, its implementation or funding, please contact: alex.killing (at) gmx.de

4 Discussion

JF 29 Oct 2012: We highly appreciate this development and schedule it as a usability fix for 4.3. We shortly discussed some open points:

• Links, menus, buttons are sometimes too small
• Additional stages for the reponsiveness (at different width values)
• Make administration menu responsive

We would like to keep the discussion open, everyone is welcome to provide any feedback.

HJ 2 Nov 2012: Why not reduce all that "clutter" when shrinking the width? See Photoshop-pic below.

Pascal, 2 Nov 2012: Yes please! "HJ 2 Nov 2012: Why not reduce all that "clutter" when shrinking the width? See Photoshop-pic below."

HJ, 5 Nov 2012: Thanks Pascal. You see that

• I removed some "clutter" (eg. description)
• I removed some horizontal lines
• The ILIAS-Icon has the same size as the ILIAS-icon in the normal view
• I removed the user-name, now there is just a "Logout"-Link
• I think a Search and a Mail-icon are necessary, but we do not need a search-field. So there is enough space for the name of the ILIAS-installation
• Personal Desktop, Repository, Shop, ... and other main-menues should be in one line as long as possible.

HL, 8.1.13. Additional details and questions:
a) if user do not want to use the responsive design, then they should have the possibility to change to the classical view.?
b) Can a sysadmin deactivate responsive design - where?
c) If you shrink the width of the browser-window, then you see some strange "special effects" (see pic. below)
d) If user has a functionality (eg. calendar) at the right side of the Personal-Desktop, and then you shrink the browser-window, then you see the calendar below the "selected items". This does not happen if the calendar is a the left side of the Personal-Desktop!?
e) Is it your aim to improve responsive design also for tools? If you use the ILIAS-Forums, eg. www.forums.ilias.de on a MobilePhone, then it would be fine if we could design the overview of all threads.

Alex, 15 Jan 2013: @Hansjörg: The classic view just did not work on small width screens, the main menu effects of your screenshot are already present in ILIAS 4.2. The calendar block effect is not a result of the reponsive design, it is a result of removing lots of layout tables. We should discuss all these things one by one.
 
Currently the responsive design cannot be deactivated. It is part of the delos.css file. If your institution does not want it, it can simply be removed/overwritten in an individual css.
 
I will put this on the JF agenda. We also should consider the remarks by Patricio in this thread: http://www.ilias.de/docu/goto_docu_frm_1877_1817.html.

5 Implementation

...