Mobile

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

Features

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?

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!
Now transform your lesson using the following XSLT template file: core/presentation/mobile/elml.xsl
Open the file myproject/mylesson/mylanguage/index.html in a smartphone and you are redirected to the mobile version. Try it out here: http://www.elml.org/website/en/.

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...

back
next