Smartphone elearning – the importance of responsive design
13th November 2014
I think it’s fair to say that we have now officially moved away from the perception that it is only an option to make your elearning content available on the smartphone – it’s not, it’s imperative. Over the last five years, mobile internet traffic has experienced a somewhat steady growth, but, this has seen a sharp increase of more than 50% over the last 12 months. Indeed, as of the end of last year, mobile and tablet internet traffic made up 20% of all internet traffic.
The mobile revolution is here to stay. We know that as a simple fact, and, as a result, your elearning platforms need to be embracing the revolution, and that means that your content needs to be optimized for whatever device – be it smartphone, tablet, laptop or desktop – from which your users choose to access it.
When we talk about optimization for the mobile screen, we do indeed mean just that – it’s not good enough that your content is simply available to access on mobile, it has to be specially built for it. User experience (UX) is of utmost importance when it comes to engaging your learners, retaining their interest and ultimately ensuring that they get the most out of the content that you have to offer, let alone trying to ensure that they actually complete the course.
When Marshalls were asked to develop a course for Glasgow City College for their students, it had to be smartphone compatible, as you would expect e-learning for young people needs to be. But we now also find that we have to make our compliance e-learning responsive for board members as well, as many do not carry a laptop, but still need to do their anti-money laundering, usually on a handheld device.
Indeed, it is imperative that every aspect of every course on every level be compatible for the mobile screen, for, indeed, every conceivable user. That means that it’s not just the learners themselves who you should expect to need access, but L&D professionals, board members and even courseware developers. Access to the back-end of the courseware needs to be reachable from mobile devices, should any difficulties arise and the need to implement immediate changes occur.
If your content is really built for a desktop, then, although users will still be able to access it via their mobile browsers, the chances are that it won’t be very responsive, and you will find that you are losing participants every step of the way. Indeed, responsive design is of extreme importance when it comes to engaging elearners across mobile devices, and so for the rest of this post we’ll be taking a look at some of the methods through which this is most effectively created, and why each is important for the user.
Design and navigation
Inevitably, the mobile version of your website will be a stripped down version of the real thing – but this isn’t necessarily a bad thing. Indeed, being a bit more minimalist in your design can actually allow greater focus on the most important and relevant elements of your courseware, rather than having too many superfluous bells and whistles that in reality don’t add very much at all to the learning experience.
A mobile website should of course provide the exact same information as its desktop counterpart, and is entirely possible when it comes to optimizing your content for it – the focus is just slightly different. The small touch screen needs to be easily navigable and intuitive. The stripped back content will of course mean that the site loads faster, and indeed is enough reason in itself to enforce the strip back in the first place – users expect fast loading times, and if they don’t get them then they will become frustrated and look elsewhere for their elearning needs.
Implementing responsive design (RWD)
Your options for creating the same level of learning experience across the differing capabilities of all the devices that you expect your content to be accessed from come down to essentially two things – ‘responsive design’ and its variation ‘adaptive web design’.
Responsive design is basically when a website rescales itself so that it fits the smaller screen when opened on a mobile browser. Depending on your website’s design in the first place, this may well do just nicely. However, if your site requires a lot of interaction, then it may not in itself translate very well onto the mobile. So, the key to getting this right is to design your desktop website with the smartphone screen in mind in the first place. Run tests on mobile as you build it, ensuring that each page is working well on both size screens.
Think about reducing the amount of written content – and indeed this is something that you should really be trying to keep to a minimum anyway on your elearning course. Learners these days like to see multimedia being utilised – videos, images, games, simulations, for instance – rather than reams and reams of text, which can of course be a bit dry and mundane. And this is even more true now that we are embracing the mobile revolution. Text can appear very small on the mobile screen, and can be a strain to read, so keep it to a minimum and allow the other media to do the hard work instead.
Adaptive Web Design (AWD)
A variation of responsive design is adaptive web design. Although you will still need to build your main site with the mobile in mind, when implementing an adaptive web design tool onto your elearning site, not only does the software adjust the scaling of the information to fit the small screen, it also adapts its layout so as to optimize the content for the mobile platform. Sometimes adaptive web design is referred to as ‘modern responsive web design’, and, for your perusal, Splashology have a list of 70 examples.
The key difference really between RWD and AWD is that the latter is ‘server side’ and the former ‘client side’, being rendered in the browser. Both, however, are there to allow websites to be used and viewed on mobile devices, so when it comes to designing your elearning platform and you are thinking about its optimisation for the mobile screen, then you must take into consideration which method will work best for your particular site. For further discussion on these methods, take a look at the TechRepublic blog.
It all comes down to UX
At the end of the day, your goal is to create the perfect elearning platform that can be used to equal effect across all devices that your users are likely to access it from, so it will be important to get to grips with RWD and AWD. It’s no longer possible to think in terms of learners all sat behind desks or laptops – we’re past that stage in technological history now, and so your courseware designs must always be conceived with smartphone and tablet users in mind, and that means clean, clear and functional interfaces, minimalist design, multimedia and intuitive navigation.