authors are pushed towards a noncommercial and
practical solution that is to manually tag the web page
and the style file or to use an HTML-compatible
editor that better respects the break-points defined by
CSS.
In this paper, we discuss and compare some
solutions. The paper is organized as follows: first in
section 2 we present the state of the art for a
responsive e-Learning and related work. In section 3
we present a use case scenario for responsive e-
Learning design and a services-based approach.
Finally, in section 4 we conclude with some
comments about future developments related to this
work.
2 BACKGROUND AND
MOTIVATION
An obstacle to open and ubiquitous learning is that
mobile devices may have several different hardware
and software features. The usability and the user
experience may be reduced when interacting with
learning platforms that are not optimized for such
features. This heterogeneity of resources and devices
makes the design of e-Learning content a relevant
issue. So, approaches to design websites and
applications that are responsive and adaptive to
different kinds of devices in different contexts
becomes an important task.
Solutions based on applications for mobile
devices (native applications) exploit to the full the
device's features, but they are platform specific and
must be developed, updated and managed separately.
Web-based solutions, on the contrary, follow the
principles of open Web and run in standards-
compatible web browser. As a consequence, being
not developed for a specific device, web-based
solutions are typically less powerful and with a poorer
look and feel when accessed through a mobile device.
An answer to this problem has been the use of
techniques borrowed from adaptive hypermedia
systems. Device feature include browser version and
platform, availability of plug-ins, band-width, display
size, input size. Adaptive techniques are an effective
solution but their design and implementation is costly
and time consuming.
An alternative solution is RWD. This paradigm
exploits new specifications for web technologies in
particular HTML5 and CSS3 to deploy websites that
respond to the user's media environment. RWD
enables web applications to have a better look and
feel and enables user interfaces to dynamically suite
the user device without the implementation of
specialized adaptive modules.
2.1 Related Work
In the field of adaptive web design we can enumerate
three categories of approaches (Koehl, 2012):
Platform-specific mobile design includes
mobile mark-up languages (XHTML Mobile
Profile; WML) and various graphical authoring
tools to facilitate the creation of a mobile
website. The platform-specific mobile design
needs mobile designers to invest a significant
amount of manual efforts on implementing a
mobile website, which is especially optimized
to fit the distinct features of mobile devices.
Web page restructuring supports browsing a
desktop webpage on a mobile device by
adapting the original layout. It first segments a
desktop webpage into semantically related
information blocks (i.e., page segmentation)
and then provides a semantics-directed
adaptation (Madjarov, 2012).
Zooming based interaction avoids adaptation,
and provides an alternative solution to support
browsing desktop webpages on mobile devices.
It displays a desktop webpage within a mobile
screen as an overview, and provides a mobile-
friendly navigation facility to efficiently zoom
in on any portion for a detailed reading.
In (Koehl, 2012) a complex work is presented. A
site administrator visually selects objects within a
web page, and assigns one or more attributes to page
objects from a rich collection of predefined page
modifications. The proposed system then generates
code for a multi-session, php-based proxy server to
provide dynamic mobile content adaptations based on
the selected attributes. The proposed adaptation
approach cannot be computed on demand or in an
independent manner.
2.2 Responsive m-Learning
For an adaptive m-Learning it is important to have
visuals that communicate effectively on all display
sizes and so to deliver user-friendly learning content
on multiple devices. To achieve this goal, as
mentioned above, we can proceed either by
developing a different version for every target device
and browser or by the implementation of the RWD
technique for our courses. To apply this technique to
responsive e-Learning (m-Learning) we can define
three key technical features (Baturay, 2013):