Skip to main content


Jan 2014

5 tips for adopting a responsive elearning design approach

Blog posts



Shaping the future of learning

When you're faced with delivery to multiple devices, such as desktop, tablet, and smartphone, you have a choice. You can create multiple native apps, one for each specific device you wish to target, but that's expensive, time consuming and difficult to maintain.The alternative is to adopt a Responsive Elearning Design approach.

What is responsive elearning?

Responsive elearning design is built upon the principles of responsive web design; an approach where a single website is constructed in such a way as to provide an optimised viewing and navigation experience across a wide range of different devices (encompassing the desktop, tablet and smartphone).

This tailored viewing experience is achieved by:

  • Providing dynamic layouts which allow for the resizing of onscreen elements to make the most of the space available (fluid grid concept)
  • Automatically detecting the characteristics of the device being used and applying an appropriate style to all onscreen elements (media queries and CSS)
  • Ensuring all images can be scaled to complement the device being used at the time

We've taken these principles and built on them to create framework that enables a single version of your elearning to respond intelligently to the device it's viewed on. We call it Adapt and what's more, we've made it open source. 

What are the benefits of a single Adapt version of your elearning?

  • Multi-device delivery - The Adapt Framework uses JavaScript, CSS3 and HTML5 which offers the cross browser and platform capability you'd expect. A single version of a course will work across all supported devices and browsers , so there's no need to create a desktop version and then create multiple versions of a native app to accommodate different mobile operating systems.

  • Small budget? No worries - The Adapt Framework is open source, with a burgeoning community of devout Adapt developers who live and breathe making the framework better for our clients and end users. City & Guilds Kineo developed the initial code base and released it open source in mid-2013 to support the larger community at hand. Say aurevoir to expensive licenses and bonjour to savings!

  • Ease of maintenance - When there's only one version of an elearning course, it's not a problem to keep your content current and maintained. In addition, due to the ubiquity of the technology used to create Adapt Learning courses, the wider developer community will be able to work with the output.

tA venn diagram of three circles (responsive HTML5, your content, Kineo know how) with  ADAPT in the middle.

  • The future doesn't scare us - The framework is designed from the ground up to run as well on a mobile device as it does on a desktop. But we fully anticipate new tech trends will shake things up in the foreseeable future. The kicker? Access to an ever growing open source community of developers who'll be providing both ongoing support and a constant stream of free enhancements. What's more, this team of experts will be working hard to ensure the code is always one step ahead of the curve, meaning you'll be ready when the next big thing happens.

  • Accessible - It's far easier to ensure that courses created in HTML are fully accessible 'out of the box' with no need for a separate version to comply with DDA guidelines.

Tip 1: Just because you can, doesn't mean you should

Building a singe course, accessible across multiple devices is undoubtedly advantageous, from both cost and effort perspectives, but how does it make sense for users? We'd probably all agree that presenting an hour long course onWorking at Heighon a 350 pixel-wide smartphone screen, is not the best way to deliver that training. It's crying out for the space and readability offered by a desktop environment (where incidentally the displays are getting larger and offer more screen 'real estate' than ever before). However, a truly responsive design is about more than just changing the layouts being used to present the content. It's also about how you alter the user interface to take into account the device being used and equally about what content you decide to show.

So how do we make that hour longWorking at Height course a worthwhile learning experience on a smartphone? What about if this time, we decided just to serve up 5 minutes of the original course, perhaps the summary pages which captured the key safety messages and a short video showing best practice being applied? And how about if we presented it all via a simple user interface that has nice big buttons that are fully optimised for touchscreens? In this example, we're not talking about replacing the desktop/tablet experience, but rather enhancing it. Now, by serving up a fraction of the content you have both a 'just in time' piece of training for those out in the field and a refresher course for someone who's already completed the full course on their desktop. By accepting the limitation and opportunities presented by different devices, you can maximise your return on investment by ensuring the right slice of content is show in the right context on the right device

Tip 2: Place scrolling at the heart of your design

For years, web design and the learning design world chanted this mantra: "no scrolling, no scrolling". We were told to avoid the scroll bar at all costs. But things have changed. The scroll bar is back with a vengeance, and proving to be an effective means of accessing and exploring the rich world of the web. Yet learning designers have continued to resist. We're ready to change all that.

Here are some reasons why we think scrolling is perfectly fine - and even desirable in responsive elearning design:

  • Your learners already do it 
    Visit a website today and vertical scrolling will most likely factor into the overall design of the site. Users understand what's expected of them and are scrolling down the page to read content. Feedback from our user trialing of scrolling page design supports the assertion that users 'get it'. Actually, they preferred this approach over more traditional template designs. surely we want to present learning that uses conventions our audience is most comfortable with?
  • Device proof your learning 
    More and more learners accessing content on a wide range of devices like tablet and smartphones and each of these devices will display pages differently. It's a no-brainer that if you're accessing content on a smartphone, vertical scrolling will be required. So what if you embraced this, and placed intuitive design and scrolling at the heart of your design?
  • Meaningful navigation 
    It's common sense to cluster any related content on a single page that's either as short or as long as it needs to be. Not only does this reduce any unnecessary navigation, it also helps the learner make sense of the structure and the relationship between content. With the new wave of scrolling, navigation becomes meaningful, rather than a bi-product of template size.
  • 'Everything above the fold' might be old hat but... 
    The standard principle remains. Due to the variety of devices used to access web content, you'll only be able to guarantee the first 400 or 500 pixels of a page will be visible, so there's no harm in putting the important stuff first to hook your learners early. In fact, we advocate this as good practice, regardless of what page layouts are being used.
  • More flexibility 
    Scrolling pages provides more flexibility in how content is arranged, allowing for different layouts, lengths and density of content. Pages can be structured so that white space is used to give copy, the room to breathe and imagery can add interest and meaning that is far harder to achieve than when its related to just being a picture in a box. The icing on the cake is that you can now also be more judicious in your use of interactions, employing them when and where they add to the learning experience rather than as a way of cramming all the related content onto a single template screen. Finally, overruns are also a thing o the past: localisation of content becomes simpler proposition as well.

Tip 3: Think about the big picture first (and then wireframe it!)

Of course, with the great power of scrolling layouts comes even greater responsibility - what to with all the free space now available to you. Before you decide to ambush the space with some beautifully crafted content, here are a few things to consider before you begin scripting:

Think about the layout and the visual treatment for the entire page 

Consider the page as a whole and think about how you can use the free space available to address the specific objective that needs to be covered. Ask yourself:

  • How long does this page need to be?
  • What story am i telling here and how can I weave in visual elements to support this?
  • What's the best way of organising my copy and any interactivity to ensure I'm offering the most meaningful learning experience?
  • How can I carry the clients brand through the entire page?
  • How can I lead the eye down the page to help the learner understand where to go and what they need to do when they get there? How can I structure content so that it flows naturally, building on broad principles before providing elaboration on points of relevance via smart use of interactivity.
  • What's the mobile strategy for the page?
    • Are you intending to cherry pick just a few key points to just provide a teaser of the desktop course?
    • Are you front loading the page with the core content so that time-poor users who skim the content on their smartphones at east get the key message?
    • Are you optimising for smartphone and then progressively enhancing the page to make use of any space that might become available should the page be viewed on a tablet or the desktop?

...and then wireframe it before you go any further 
Wireframes are a great way to quickly and clearly communicate the page layout, scope and proposed graphical treatments to both your internal team and the client, providing a holistic overview of the entire learner journey.

Your client can also engage with the initial design ideas sooner and you can receive immediate feedback on the treatment before you invest in a subsequently lengthy (read: expensive) digital build phase. If the first wireframe is accompanied with art direction that can bring the treatment to life, this can bridge the gap between a concept and what the reality might look like, even better!

Tip 4: Prototype, test and share

Cross browser comparability testing and fixing is just a reality of working with HTML when you're targeting a broad range of devices and browsers. Issues occur because the different browsers in use each have their own rendering engines. These rendering engines interpret the HTML and CSS code and present it as a webpage, however slight difference in these interpretations lead to errors on the page which the developer needs to address.

Our advice to minimise the impact of this cross browser/cross platform environment is twofold:

  1. Avoid as many issues as you can by talking to your front end developers early in the design phase to ensure that the design proposed works on the target browsers
  2. Create a prototype that contains a single example of each element of the proposed functionality (with the art direction applied) and then QA this source build across all the intended platforms as early as you can. Best to address the defects that occur now before you move into the production phase, otherwise you risk duplicating these issues over and over again in your case.

Please note, these two tips are particularly important if you're working with older browsers that don't offer a reasonable level of HTML5 or CSS3 support, for example: IE8

Finally, don't miss the opportunity to talk this prototype through with your client. It's a great way to demonstrate how work is progressing and to secure some timely feedback on the design, whether that's early identification of amends or clarification that the design meets expectations.

Tip 5: Don't throw the baby out with the bath water

None of the above means we immediately stop following instructional design best practice. We continue to put the learner at the heart of what we produce, writing well-structured learning content which follows an appropriate learning model.

It's more about acknowledging what is going on within the wider web community and creating a new design model built on the proven ideas of both the old and the new.

So now that you've seen our tips on adopting a responsive elearning design approach - want to see it action? Head over to our case studies page and see how we transformed the Ongoing Safety course, for the 120,000 volunteers at the Scouts Association to view their elearning on multiple devices with Adapt.

Get our guide to Going Mobile and creating multi-device learning content



Shaping the future of learning

Kineo helps the world’s leading businesses improve performance through learning and technology. We’re proud of our reputation for being flexible and innovative, and of our award-winning work with clients across the world.