Summertime in Europe means an escape to a quiet corner of France for this author and time to research and reflect on key trends in the learning technologies' market. One particular trend, which has got us all excited in the last six months, has been responsive web design (RWD). If you haven’t heard about this yet, don’t worry you will, as it is potentially the future if you are delivering content to multiple devices.
Responsive design delivers a single version, which will not only reformat for different devices, but even display different content according to the device it is being viewed on. Elearning and mobile learning development may be about to be changed significantly with responsive elearning design (RED).
The term responsive web design (RWD) was first used by Ethan Marcotte in his article in A List Apart in 2011. In essence RWD means a website designed to work on multiple devices by using fluid proportion based grids. This means according to Wikipedia that “users across a broad range of devices and browsers will have access to a single source of content, laid out so as to be easy to read and navigate.”
There has been an explosion of interest in RWD, since it means that rather than have multiple versions or websites and apps, you can have a single version that works equally well across multiple devices. The chart below shows how the volume of Google searches for responsive web design have outstripped searches for mobile web design in the last few years.
.net magazine highlighted RWD as the second most important internet trend in 2012 and predicted a flood of RWD sites being developed. As interest has grown so has a community of developers who have created a catalogue of multi-device layout best practice patterns.
So what’s the big deal?
With RWD you can design a framework that will reformat, resize and display different content depending upon the screen size the user has. Thus you don’t need to sniff out whether someone is on a mobile device and direct them to a different version since the page will automatically resize.
You can see this for yourself by viewing the example below and simply dragging your browser window smaller to say an iPhone size.
Clean Air Challenge
In the example above, as the screen gets smaller it not only repositions content but displays a different menu style for mobile size devices. Thus the top menu items become buttons. You can see this for yourself at http://clearairchallenge.com/
In this example as you resize the screen from a desktop to an iPad to a phone, the style changes and the menu repositions from the left to the top.
You can see for yourself how the menu adjusts and moves from the left to the top and finally to the centre by visiting the Food Sense website.
In this example, not only does content reformat, but content displayed on a desktop version is removed from the smaller screen size version. Thus you can see that on the desktop two images are shown whereas only one is shown on the phone version.
There are also other content changes, which you can see at the Gravitate Design website.
RWD is seen by many as the future of the web, and that whatever device you are on content should just play and work. The future is no longer what it was; just go to sites such as the Boston Globe to see RWD in action.
RED: the future of elearning and mobile learning?
At the moment there is a lot of discussion about the right way to approach mobile learning such as producing dual versions, producing separate apps, etc. This creates all sorts of issues for those of us involved in elearning. It can mean having separate versions to maintain, separate SCORM objects, separate tracking etc. We think if you need to deliver to multiple devices then a single version, which just resizes appropriately for the device, is the most elegant and most cost-effective solution.
There are issues to overcome including ensuring you create appropriate design approaches for the different screen types and no shortage of cross compatibility testing. Responsive design is challenging to implement properly and it is easier for most websites as they only have two or three 'templates' such as homepage, section page and a few content page layouts. Typically, these are less interactive than screens within elearning courses, where we might have more templates and more interactivity. However, once you have invested in your RWD framework you no longer need to talk about different versions or approaches for different devices.
At Kineo we have developed a RED framework and delivered our first projects to clients. We are very excited about the future. To coin a phrase: the future’s bright, the future’s RED.
Read more on our responsive elearning services.
Contact us if you want to see our RED modules in action.
By Steve Rayson
Finally, Flash is not dead...
Whilst RWD using HTML is a great option for delivering to multiple devices, if you are only delivering to desktops and laptops then Flash remains a good choice. Whilst there have been significant improvements in HTML5, Flash enables you to create the most engaging user experiences to maximise cognitive engagement and learning. As always it is about the right choices for your circumstances.