Mobile view of your eLesson

The mobile view is a special layout optimized for smartphones and handheld devices. It is based on jQuery Mobile and works with most operating systems or devices.

Screenshot of mobile view Screenshot of mobile view


  • Layout based on jQuery Mobile 1 final
  • Supports iOS (iPhone, iPad), Android, Blackberry, Windows Phone, Kindle and many other browsers
  • Includes buttons to navigate (back/next), go to home page or to switch back to regular desktop view
  • Glossary terms displayed as popups

How to create a mobile version?

  1. Make sure that you first create a normal HTML-version (either plain layout or using your own template). This will be the desktop-version that a mobile user can always switch back to. Make sure you are using HTML5 for better compatibility!
  2. Now transform your lesson using the following XSLT template file: core/presentation/mobile/elml.xsl
  3. Open the file myproject/mylesson/mylanguage/index.html in a smartphone and you are redirected to the mobile version. Try it out here:

Important Comments and Remarks

  • Please create the desktop version first and then create the mobile version. Only then the starting page of your lesson (index.html - see above) will contain a script that redirects mobile users to the mobile version!
  • Within a learningObject all subelements clarify, look and act will be transformed as a "tabbed navigation" element. Please use the "title" attribute to give those tabs a name!
  • Glossary terms are displayed as popup windows in the mobile version. See screenshot above for an example!
  • The back-button in the top right brings the user always back to the desktop version of the current page (follow instructions above to make sure that you have a desktop version!).
  • In certain browsers the selfCheck element does not work properly. There seems to be a javascript conflict but we didnt find a solution. Please contact us if you find a bugfix or be patient until we found one :-) Sorry about that...