Posted by You operate in a multi-screen world. You may read a webpage on your laptop, and find the meaning of an unknown word on the dictionary app installed on your smartphone. We shift between devices all the time, depending upon our ease, mood/state of mind or availability of devices. Not only this, we even view content in different orientations on these devices- portrait or landscape.
If you, as an organization already are, or wish to adopt elearning for delivering training and learning material to your employees, responsive design is something you need to worry about, if you truly want your learners to stay engaged.
Table of Contents
What is Responsive Design?
The Multi-Screen World Report by Google says that 90% of our media interactions are screen based, taking the form of television, laptops/PCs, smartphones, tablets, etc. This demands that content should appear optimally- that is, suited to the screen size and orientation of the device in use. This is what responsive design does. It uses CSS3 media queries to write once-and-for-all coding for websites that intuitively adjusts to the screen it is being viewed on.
Types of Multi-Screen Usage
Multi screen usage may be simultaneous or sequential. The example of reading and looking up a word which we gave above was a case of simultaneous usage, wherein a person uses two or more devices simultaneously to perform tasks which may be related or unrelated. Another example could be, chatting with a friend via WhatsApp on your tablet and booking an airline ticket on your laptop. An innovative way to use multiple screens simultaneously is in gaming: consider a game of scrabble where the board appears on a tablet kept in the middle and each of the two players has his own alphabet racks appearing on his smartphone. All three devices are synchronised.
On the other hand, multi-screen usage becomes sequential when a task started on one type of screen is continued on another, mostly because of convenience. For example, you start watching a movie on your laptop and continue it on your mobile phone when you are travelling.
Why is responsive design important for elearning?
Simple. Because learners too are accessing different devices at different times in different orientations. If the content does not appear optimally on each of these devices, it will discourage them to move around devices. If you have ever tried to view a desktop site on your mobile phone browser, you might get our point. The text appears either too small that you are left zooming in and scrolling in all four directions, or too large that you can simply not make out what is what. Even the text that appears in tabular columns is badly distorted sometimes. Try viewing the facebook.com website on your smartphone browser and see what the user experience is while trying to like and comment on pictures and updating your own stuff. Alternatively, access it through the Facebook app installed on your phone, and see the contrast. While your task gets done in both the cases, you will notice how using the app makes the experience worthwhile, smooth and pleasurable. Responsive design makes sure that learners get access to content in a similar fashion. The alignment and size of text, images, media and user buttons automatically adjust to the size and layout of the screen. As obvious as it is, this makes sure that users do not feel lost or disconnected with their usual means of learning as they move between devices.
By designing content that is device-responsive, precious time is saved of both- your organization as well as your learners.