With more and more mobile users,
organizations are now opening up to the option of delivering content on the
mobile platform as well. The concept of mobile learning or m-learning is not new
but with a variety of different devices including the BlackBerry, iPhone, the
iPad, Kindle and so on, it is difficult to design different versions as per screen
resolutions and other device functionalities. Developments in the field of Web
design and development, are now geared up to keep up with the varying
resolutions and devices. With a Responsive Web design the
design of web-based content responds appropriately to the user’s environment
based on screen size, platform and orientation. The practice consists of a mix
of flexible grids and layouts, images and an intelligent use of CSS media
queries. The user is free to switch from one device to another but the content
automatically switches to accommodate for resolution, image size and so on. Thus
the content can be utilized for responsive learning as it automatically responds to the user’s preferences and viewing
devices. This eliminates the need for a different design and development for
different devices, cutting costs as well as development time.
To create
e-learning content with responsive learning design, there are three main
technical features to be considered:
·
Media queries and media query listeners:
Media queries allow
the web page to use different CSS style rules based on characteristics of the
device the site is being displayed on, most commonly the width of the browser.
·
A flexible grid-based layout:
The fluid grid concept calls for page element sizing
to be in relative units like percentages or ems,
rather than absolute units like pixels or points.
·
Flexible images and media: Through
dynamic resizing or CSS, flexible images are sized in relative units – up to
100% – to prevent them from displaying outside their containing element.
A full image is downloaded on a user’s device
and then resized to fit the screen.
Responsive web
design can be developed with HTML5. Thus mobile content can be created and
displayed across all devices – PCs, tablets and mobile phones – and is
compatible with different OSs as well. HTML supports responsive design features
to create e-content that can be accessed across multiple devices, with equal
ease and equally effective visual impact.
The benefits of
RWD in e-Learning are many:
·
There is no longer the need to
maintain multiple versions of content. One version caters to all devices,
browsers, resolutions and layouts, including PCs, Macintosh computers, tablets,
e-book readers, and mobile devices.
- Any program or
application update can be done simply by changing the base code, and it
will be automatically updated for all devices. Not only does this save
precious time and moneys but it also gives room to update the program or
application as per the changing needs of the client.
- RWD shuffles
content, application layout, images, and font size to adjust according to
the screen size of the users’ device. The user can navigate conveniently,
without the need to scroll or pan-in or pan-out unnecessarily. User
experience is thus smooth and easy – across all viewing devices.
- With RWD, it is possible to include a lot of multimedia content into learning. Audio-visuals as well as graphical content is rendered as per the functionalities of the user device and this provides the learner with heightened visual experience – irrespective of device capabilities.
Responsive learning is now paving the way for learning to be not only accessible on
multi-devices but making sure that it provides a heightened sensory impact as
well. With the use of more multimedia
content, developers are now able to create content that the modern learner
wants. With further advances, RWD will continue to bring impactful learning to
users – anytime and anywhere.