Inevitably, the term mLearning was coined to cover this area, although many people still prefer to see it as simply a variant of eLearning, or of learning more generally. Either way, few can deny that it’s becoming more important, and that it also has a long way to go, albeit with neither the direction of travel nor the ultimate destination particularly clear.
In this post, we’ll start by looking at the critical distinction between two terms – adaptive and responsive. We’ll then go on to consider the changes needed to eLearning design, and also some of the ways in which end users are responding. Some people use the two terms interchangeably, while others debate the differences with varying degrees of rancor.
There’s probably no point in being obsessive about it, but there are some important distinctions. The terms originated in the world of web design, although they probably have more far-reaching implications for learning than they do for some other areas.
Responsive web design was first proposed by Ethan Marcotte in 2010. Essentially, its basis is fluidity – that what the viewer sees on the screen should gracefully and gradually adapt as the screen size changes. In technical terms, this is mainly done by using percentages.
If you have a page that displays two columns of text, for example, you can specify, using CSS that the first column should always take up 60% of the screen and the second column 40%. On a computer, as you resize the browser window, the text in the two columns will re-flow to fit, and consequently the columns will get shorter or longer. If you bring other elements into the equation – photographs, for example – those too can be set to resize on a percentage basis.
It gets more complicated with a grid arrangement where there are several boxes on the screen each displaying a different story – a newspaper front page, for example – so here, other considerations come into play.
You can specify breakpoints – if the screen width falls below, say, 800 pixels, then only show two boxes side by side rather than three. Some elements always need to keep together, or can’t be resized – companies tend to be very precious about their logos, for example – and these might be put into nested boxes that will always stay together, and should never shrink. There are also more technical considerations about the types of font to use, and whether to go for vector or bitmapped graphics.
All these things are swings and roundabouts – some of them are not really relevant to an eLearning designer, but nonetheless, it’s important to understand them. The nine principles of responsive web design by Sandijs Ruluks illustrates this very well with a series of animated GIFs.
The notion of adaptive web design on the other hand – the term was coined by Aaron Gustafson in 2011 – involves adjusting the appearance on the screen only at specific break points, which means that the screen snaps from one view to another. The designer might specify, for example, one layout for computer or laptop screens (over 800 pixels wide), one design for tablets (between 400 and 800 pixels) and a third design for smart phones below 400 pixels.
If you view an adaptive website on a computer, and adjust the size of your browser window the screen appearance may therefore suddenly change as the screen width gets smaller. The disadvantage of this is that it can appear a bit more clunky to the end user – the advantage is that there are only three possible design permutations to consider rather than an infinite number.
Another way of making the distinction is to say that responsive web design is device agnostic – its starting point is simply to adapt to whatever size or shape of screen it is presented with. An adaptive website on the other hand would probably use media queries in the webpage header to determine what kind of device it was being viewed on and present itself accordingly – which is why it wouldn’t necessarily change when viewed on a computer screen, even with a small browser window.
The question is really in the starting point – should a designer aim for progressive enhancement or graceful degradation? When the vast majority of websites were only ever going to be viewed on a computer screen, graceful degradation was probably acceptable, aiming simply to present the occasional mobile viewer with something that was more or less acceptable.
Nowadays however, where for some types of activity (which may include learning) mobile devices are very much in the ascendancy, it makes more sense to aim for progressive enhancement. This involves creating an acceptable experience on the smallest possible screen, and gradually increasing or improving it for larger devices.
In the next post, we’ll look in more detail at the implications of these issues for eLearning designers.
