The Great eLearning Design Mashup - Scrolling In eLearning

The Great eLearning Design Mashup - Scrolling In eLearning
Summary: As eLearning designers, we should be looking to web design trends to borrow, to begin an eLearning design mashup. This month we’ll be looking into some of the trendiest and best design practices from the web which are or could be helping us create better, richer eLearning, starting today with scrolling.

Scrolling In eLearning

Some time ago I was lured to this fabulous site after seeing Life of Pi in the cinema (I particularly love the “Meet Richard Parker” bit!). It got me thinking about web design trends we could be incorporating into eLearning design, a sort of eLearning design mashup.

The Life of Pi website uses a design technique called parallax scrolling. It has been a hot topic in graphic design for a while; with the rise of HTML5 and CSS3, we’ve discovered new and exciting ways to interact with web browsers. Parallax scrolling is a technique originally used in 2D video games to create a 3D look and feel, where background images move at a slower rate to the foreground images, creating an illusion of depth while scrolling down the page. Parallax scrolling can be vertical or horizontal. The trend is moving toward more horizontal effects, although vertical scrolling is most common.

So, how can parallax scrolling, or any scrolling for that matter, help us to design better eLearning?

Let’s recap on how traditional eLearning courses usually work: the learner interacts with a screen of content and then clicks ‘Next’. But this is not necessarily the best navigation design for web-based eLearning. It’s reminiscent of when Powerpoint was the prevalent training tool. But for learners who are used to webpages, scrolling is both intuitive and user friendly. It’s also the de facto user experience on tablet and mobile devices. So, scrolling in eLearning also helps eLearning designers to future proof their training. Integrating vertical navigation lets eLearning designers organize content semantically rather than according to a fixed height of a template; content can be arranged on a single page that’s as short or as long as needed. Not only does this reduce any unnecessary navigation, it also helps the learner make sense of the structure and the relationship between content. Navigation becomes meaningful, rather than a by-product of the template size.

It might be a small market but it could help us design academic subjects such as history or science, which become more alive with parallax or similar scrolling effects. Check out this parallax example (in Dutch) which chronicles the ship Titanic and uses some familiar eLearning interactions such as the photostory/carousel to present still imagery and video content.

Now, add in music and voice over and you have an experiential, rich and memorable learning experience, something like NASA’s intuitive website.

eLearning tools

You can achieve similar results using presentation design applications such as Keynote and Powerpoint which have tools that let you create motion paths and layer effects to help lift a flat 2D screen into a richer effect. This is nicely illustrated by eLearning guru Dave Anderson in this demonstration and tutorial.

Elearning tools such as Elucidat let you build elegant scrolling and fully responsive eLearning in HTML5.


We’ve looked at the power of storytelling in eLearning in a previous post. There are some wonderful examples of design and execution in storytelling using scrolling. The Dangers Of Fracking is a website that works like an infographic, with the long page encouraging scrolling to provide a narrative. Connected Home is another good example of one page scrolling using an infographic style approach. Here are another couple of examples of infographic style scrolling design:

The experience of presenting content through scrolling is different to video because users can follow the action at their own pace, moving both forward and back. And multimedia does not have to be flashy. As the Ken Burns Effect demonstrates, a slow pan or zoom over a photograph, with a little appropriate music or audio effects, can be very powerful in telling a story and making learning memorable. The Hegarty on Advertising website tells a compelling story about overcoming a censorship problem with the famous Nick Kamen Levis advert (showing my age there). Point is, this effect is used to tell a story and show how a problem is overcome. Imagine how powerful this design could be in eLearning courses, and imagine if we added in video and activities along the way.

eLearning company Upside celebrated its 9th Birthday with a scrolling webpage, telling the story of the company’s history.

Product training

Parallax scrolling offers exciting solutions for product training both for internal staff and customers, based on the concept of brochure style websites or ‘products that tell a story’. Check out car manufacture Volkswagen’s non-animated animation.

Smart USA, like the VW Beetle website, invites you to scroll down the content on one page. When doing so, it appears as if the page is animated, when in fact it consists of lots of stills.

Other notable examples:

  • The One Design Company webpage uses left and right scrolling to access various clusters of content. The whole site is a single page canvas, which can be explored horizontally and vertically.
  • Carnation Group's website provides an interesting web experience which combines scrolling with drag and drop image functionality.
  • ComOn Group (in Portuguese) website is designed to present simple case studies and key quotes with impactful messages.
  • Finally, The Art of Flight site provides the user with a downwards, upwards, and sideways experience, utilizing pop-up videos and clickable graphics to allow the user to explore the topic areas in more detail.


In this post, I’ve tried to curate some good examples of how web design trends can be borrowed to kick-start our Great eLearning Design Mashup. For some time the mantra for eLearning design was 'no scrolling'; we were told to avoid the scroll bar at all costs. But things have changed. The scroll bar is back and proving to be an effective means of accessing and exploring the rich world of the web and tools such as Elucidat are encouraging us to boldly experiment with eLearning design mashups, whilst helping us adhere to design principles such as good UX design and simplicity. And before we get too carried away with everything mashable, it’s worth recalling UX guru Jacob Nielsen’s cautionary words of wisdom: "A snappy user experience beats a glamorous one".