How does responsive design affect the use of audio?
by Sven Laux - Monday, 23 March 2015, 4:52 PM


I know using audio on responsive design courses has been a talking point.

With the changes and layout in the structure of pages (we are no longer constrained by what's visible above the fold), and components (interactions) appearing next to each other on desktop/tablet, the points at which to trigger audio are less clear. This must have an impact on learning design, especially in places where audio narration is commonly used alongside the visible content.

I would be keen to hear from the community what your thoughts on the subject are, how you approach responsive design + audio and whether this has had much of an impact on how you design the learning?

Please comment - I'm hoping that we might also learn something that will enable us to improve Adapt.


Picture of Cammy Bean
Re: How does responsive design affect the use of audio?
by Cammy Bean - Tuesday, 24 March 2015, 2:47 PM

In the US most eLearning has been traditionally VERY audio-centric. This approach can work well in slide-based eLearning, but I don't think it's suited to the more modern web-like experiences we've been creating with Adapt. I'm working on a project now that makes extensive use of videos with animations -- so the audio is still there, but concentrated in those bits rather than narrating every screen/component. From a design perspective, it makes us more thoughtful about when it really is appropriate to use audio.  

Picture of x z
Re: How does responsive design affect the use of audio?
by x z - Wednesday, 25 March 2015, 6:35 PM

I think that providing an audio option to learners is an excellent way to personalize & accommodate learners' preferences as well as to ensure m-learning meets accessibility standards.

M-learning design that does not anticipate and meet the needs of learners with all sorts of challenges and preferences to my way of thinking only does half the job. For example, heavy reliance on visuals & images (icons, logos, etc.) to guide the learning experience is great shorthand for sighted learners, but is not nearly so helpful for people who don't see well and who could benefit from an audio caption equivalent. Also many text-to-speech readers don't read slides or jpgs. On the other hand, an adult learner who is familiar with content or doing a review may find it faster and more effective to hear (esp. if the speed can be bumped up) rather than re-read all the text content. Finally, although high level designers with access to experienced media and graphics/animations teams may have moved beyond slides & narration, many of your everyday teachers and instructors who will want to use Adapt to get their content into a responsive online format will have not. They need a tool that will enhance and complement what they already do and to help them move towards effective blended learning. Audio should be a big part of that. 

I think rather than dropping audio, it would be more helpful to make it easier to integrate it into the overall design of a course. (BTW: the same goes for text captioning of visual elements and videos.) The more options for getting learner involved with content, the better. I don't feel this flies in the face of the 'redundacy' caveat in e-learning but instead provides learners with ways to make a course fit their needs and wants. 

P.S. I did a fully online Master's degree, was a high school & adult ed. teacher for 35 years, have developed and moderated e-professional development mini-MOOCs for other educators, and am now struggling to design a collection of open source basic skill development apps. I'm eagerly awaiting the release of the Authoring Tool.

Does/will it have an html block so one can develop content using another tool (such as Hot Potatoes or GeoGebra), grab the code, and integrate it directly into an Adapt Learning framework? 

Picture of Liz Smith
Re: How does responsive design affect the use of audio?
by Liz Smith - Thursday, 9 April 2015, 10:43 AM

I agree with your point Sue, that audio should be integrated in the overall design of the course. The consideration needs to be 'what purpose is it serving for the particular audience the learning is aimed at?'. There are lots of different requirements that audio can meet, e.g. for learners who don't have English as a first language, for those with low literacy levels, for those with accessibility requirements such as blind users, or simply because some learners have an audio learning style and prefer to access content that way. I think all these different cases show that our approach to audio needs to be flexible so that it can be adjusted to suit the audience group in question.

In my mind the two key points with audio are consistency and choice. In terms of the UI and navigation aspects, audio should be used in a consistent manner throughout a course, represented by the same icons, used in the same manner and accessed in the same way. This means that the learner becomes familiar with how it is used and not frustrated or confused by not knowing how to access it. In terms of choice, I think there should always be an alternative to audio, whether this is a simple transcript or a separate more graphical option. This choice can be applied in Adapt courses through the button usage, so learners are aware of all audio elements but it is up to them whether to listen or not and doesn't affect their learning experience if they choose not to. This means it is a conscious decision to play audio, rather than something which just starts automatically whether it is wanted or not!

Picture of x z
Re: How does responsive design affect the use of audio?
by x z - Thursday, 9 April 2015, 1:55 PM

And I agree with your points re: consistency & choice, Liz. Students in online environments where text and audio (or text and  video) are both available are empowered to use either or both in unique ways to meet specific learning purposes and improve their own user experiences. Instructors & designers can't possibly anticipate all uses and can learn a lot about learning in e- and n-environments by making the resources available and then standing aside and watching the different usage patterns that emerge. I read a paper about this a while back but am having trouble finding it.

Picture of Thomas Berger
Re: How does responsive design affect the use of audio?
by Thomas Berger - Wednesday, 15 April 2015, 10:55 AM

Hi all,

I am new to Adapt so I am experimenting with the Framework to gain more experience and learn new things.

HTML 5 offers a great variety of Media Types (Audio, Videos, Animations, SVGs …) that can be added natively to a web content. Depending on the use cases using and combining these Elements will drastically increase the experience for the learners. However, using all of them at once will probably be too much for the users.

I developed a component that plays a list of Audio-Files and displays a text label for each Audio-Track. Since Adapt does recognise when a component is in the Viewport, I wanted to use this feature to play the Audio automatically.

Here is the Demo and below is what I have learned about playing Audios / Videos automatically:

  • Add a delay:
    I think starting to play the content immediately when the component is in the viewport is a bad pattern. Imagine the user wants to scroll through the whole course and every audio component screams at her.
  • Show feedback to the user:
    Combine the delay with a visual representation of the current state. So that the user has time to understand what is going on.
  • Give the user the ability to control the behaviour of the Component:
    The user should always have full control over the content. So make sure that she can stop the autoplay mode and play the audio at any time.
  • Make sure that only one Audio/Media Component is playing at a time:
    This is extremely crucial for long scrolling pages that can include multiple instances of Audio- and Video-Components. Imagine the user scrolls through the entire page at once and every component starts to play! So make sure that your components tell each other if they are playing and when they are done or paused.

To sum up:

I think that playing Audios automatically can increase the experience and convenience for your learners. Think about the right triggers and make sure to test.


Please share your thoughts with me. Any feedback is highly welcome!




Disclaimer: the component is still a draft, so it might be buggy

Paul Welch
Re: How does responsive design affect the use of audio?
by Paul Welch - Friday, 19 June 2015, 4:45 PM

Hi Thomas,

Apologies, I’ve been meaning to respond to your post for a while.

I really like what you’ve done with your audio component and its smart the way your controlling the playing of media by the scroll position and adding the delay and so on - addresses that nightmare of dual files playing etc. I’ve flagged this to my colleague in the US, Cammy Bean. Cammy and her colleagues use a lot of audio and would, I’m sure, would be interested in this component (as I’m sure many of us are). You mention the component is a draft, do you have plans to refine/document? I know your busy working on the new theme at present, but after this perhaps?

A while back you and I also discussed an improvement to the hot graphic component. The change would allow you to trigger display text via an area, rather than the by pins. I’ve personally been wanting this for a while and there has been a few times recently where it would have been a superior solution to the pins – e.g. I needed display info about both the peak and trough off a sine wave (using hot spot pins) but also a zone between points A and point B on the signal (the hot area).

Maybe we can put this hot graphic change, and perhaps the audio component, as items on the roadmap for development, post the delivery of V2.0 of the framework. On that note, I’ll be talking to the core team members/project collaborators about a proposed update to the framework roadmap given all the recent activity and once we have an initial list loosely agreed I’ll post on the community site so we can all discuss and prioritise.


Picture of Cammy Bean
Re: How does responsive design affect the use of audio?
by Cammy Bean - Monday, 22 June 2015, 3:03 PM

Ooh, Thomas. This is exciting stuff. I'm glad to see audio moving forward in Adapt, and I like the way you're thinking about this. I don't want us to just recreate a slide based, audio narrated world of eLearning that bores people to tears so eager to see people putting some thought into how this can work in a reasonable and user friendly way.

Picture of Thomas Berger
Re: How does responsive design affect the use of audio?
by Thomas Berger - Tuesday, 23 June 2015, 12:43 PM

Hi Paul and Cammy,

Thanks for the Feedback!

I definitely look forward to refine the component, make it compatible with the Version 2.0 and make it available to the community. I am pretty sure that we can make improvements to the Design, E.g. should we show the text or is the Audio enough. Would be great to get some Input on that from the community!

Totally agree with you about the Hotgraphic component. Would be nice to have the option to use Areas instead of or along with pins. Let me know if I can help with the development on that.

Best regards


Picture of Chuck Lorenz
Re: How does responsive design affect the use of audio?
by Chuck Lorenz - Tuesday, 23 June 2015, 1:36 PM

Hi Thomas,

My two cents/pence/groschens: 

What I've appreciated about the core components is the way most text is optional. If the text in your component can be likewise, I think it provides significant flexibility of use.



Picture of Dan Gray
Re: How does responsive design affect the use of audio?
by Dan Gray - Friday, 28 August 2015, 3:33 PM

Hi Thomas

Did you get any further with the audio plugin? We are starting to develop an audio extension. It would be good to share some ideas.


Picture of Thomas Berger
Re: How does responsive design affect the use of audio?
by Thomas Berger - Monday, 31 August 2015, 7:53 AM

Hi Dan,


Unfortunately not. Sounds great! I am definitively interested in sharing ideas and working together on the component.


When will you start on the plugin?


Best Regards


Aniket Dharia
Re: How does responsive design affect the use of audio?
by Aniket Dharia - Monday, 22 June 2015, 6:05 AM

Hi Sven - 

Exult has been providing components to their clients with audio. We are also modifying the core components to meet the audio requirements for most of our clients who need audio in their courses. Some of these modified components are on GitHub. We will add more as we develop.

The audio playing is managed with the "inView", where if the component comes inView we autoplay the audio and if it goes out of view or scrolled out, the audio is stopped. On devices we have a audio button which is used to play the audio.

Apart from modifying the core components we also are using the iFrame for loading custom animations created in Adobe Edge which have audio in them. The edge animations work on desktop and ipads (tablets) & on phones we change the animations to narrative component making it easier for the learner to navigate with minimal content on screen.

Hope this would help.