Responsive design and smart eLearning authoring

“We are a nation of multi-screeners.” – ‘The New Multi-Screen World Study’, 2012

 What Google learned about American consumers in 2012 is true for most of the connected world today.1 Computer, smartphone, tablet, or TV – we’re spending a lot of time in front of one or more screens and we regularly switch devices. What this means is that the learner who starts a course on a desktop, may well leave midway, resume on a tablet, and finish on a smartphone….or the other way around. This leaves eLearning authors and developers with an unenviable task – that of creating content that runs perfectly and looks optimal on every single device out there.

Enter Responsive eLearning Design.

Responsive design is an approach whereby content responds to the size and orientation of the screen on which it is being viewed. Manually, it is nearly impossible to anticipate and design for every possible screen size. The only feasible approach is to use a smart authoring tool that automatically aligns the content to any digital screen, so that the content displays optimally by intelligently adjusting for the white space. Different authoring platforms provide this responsiveness with varying degrees of finesse and design control.

The 2017 release of Adobe Captivate is a smart eLearning authoring platform that helps you create fully responsive content without programming – so that you can deliver great learning experiences consistently to learners, across devices and browsers. The combination of sophisticated authoring capabilities with an easy-to-use interface makes it a joy to design responsive content.

Experience #smarteLearning.


¹ The New Multi-screen World: Understanding Cross-platform Consumer Behavior

The post Responsive design and smart eLearning authoring appeared first on eLearning.

#eLearning #LiveStream – A Year of Fluid Boxes -Tuesday Mar 20th 16:00 EDT | 20:00 UTC

Join me for this Adobe Captivate eLearning Livestream, where I will be reviewing what I’ve learned after a year of using fluid boxes. Join this live session and have your responsive design fluid box questions ready for the live chat. I will be answering your questions.

Follow the link below at any time to set up a reminder to be notified when this event becomes live on March 20th at 4 PM Eastern Time.

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events.

P.S. Don’t forget to also register for a free one hour webinar on Mastering Custom Quizzes with Adobe Captivate 2017 scheduled for Wednesday, Mar 28, 2018, at 9 AM Pacific / 12 PM Eastern.

The post #eLearning #LiveStream – A Year of Fluid Boxes -Tuesday Mar 20th 16:00 EDT | 20:00 UTC appeared first on eLearning.

Register for Webinar – Mastering Custom Quizzes with Adobe Captivate 2017

Training Magazine Network

Hey Gang, There will be no live stream the week of 26th. Instead, I will be guest presenting over at Training Magazine. The topic will be Mastering Custom Quizzes with Adobe Captivate 2017.

In this session, you will learn how to…

  • create a responsive design interface for your question slides in Adobe Captivate 2017 using fluid boxes
  • setup variables to keep track of the selections made by the users of your eLearning course
  • write advanced actions that will form the basis of the interaction for your users
  • write conditional actions that will validate if your user has submitted the correct answers to your questions
  • convert your questions to become scored final quiz questions

Special Bonus: Participants in the LIVE webinar will receive a coupon for FREE ACCESS to the full Udemy version of this course, including PROJECT FILES so make sure you register and get a seat. Use the following link to register right now.

Mastering Custom Quizzes with Adobe Captivate 2017

The post Register for Webinar – Mastering Custom Quizzes with Adobe Captivate 2017 appeared first on eLearning.

Fonts and Adobe Captivate

There have been some questions in the comments of my videos that suggest that some people may not understand Typekit fonts in Adobe Captivate. This article will try to explain it.

There are three different types of fonts on a Windows or Mac computer running Adobe Captivate 2017. These are system fonts, web-safe fonts, and potentially Typekit fonts. The importance of font selection only really applies to responsive designed elearning projects, since non-responsive projects convert your text into pictures, and whichever font you choose will render correctly on any device.

System fonts are the fonts that are installed on your computer. It’s important to know that when you use a unique and exciting font found on your computer, that what you see isn’t what someone else would. For example, if I created a Microsoft Word document that used the BlackHawk font and I sent that Word document to someone who doesn’t have that font installed, they will see an entirely different set of characters than what I intended (it will probably display as Times New Roman).

Web-safe fonts are a subset of system fonts that have such a high percentage of use that they can be considered universal. It’s smart to use web-safe fonts when you design for the web since you don’t know what devices will be used to view your content, and usually an excellent choice for when you develop responsive design eLearning. An example would be the Trebuchet font. Because there are only a handful of web-based fonts, using them may your eLearning seem ordinary.

But what do you do if you want to design a responsive project using something other than the half dozen web-safe fonts available? That’s where web-based fonts like Typekit come into play.

Typekit works like this. If you have an Adobe ID, you will have access to a small selection of these web-based fonts. Once you find a font on that you would like to use in your Captivate project, you would sync that font to your account. Behind the scenes, a system version of that font is downloaded and installed on your computer so when you return to your Captivate project you can select and use that font. Later when you publish that project, you would supply Captivate with the root domain of where your project will reside. For example, if you were an employee at Adobe and were going to make your eLearning project available on Adobe’s website, you would include * as a domain when you publish. When users would run this course, the published project would check and make sure this was authorised to use the font and display the correct font in the eLearning project even if the user doesn’t have that font installed. Here is an overview on how Typekit works in Captivate 2017 Release.

Typekit is only one example of web-based fonts. I’ve also used fonts that can be found on Google fonts. The advantage of Google fonts is that there are no fees or limitations required to use them. Here is a video that explains how you can use Google fonts in your Captivate eLearning project.

The post Fonts and Adobe Captivate appeared first on eLearning.

How To Use Responsive eLearning Design For Better Learner Engagement

mLearning provides multi-device support and is undergoing a shift from a fixed layout to a dynamic or responsive eLearning design. In this article, I answer 5 questions on how you can use responsive eLearning design to create better learner engagement.

Ways Responsive eLearning Design Can Create Better Learner Engagement

What is responsive eLearning design? 

Responsive eLearning design draws its inspiration from responsive web design concept that allows the website to be viewed on devices.

Responsive eLearning design is an eLearning format that responds to the screen size of the device on which it is being viewed.

Here’s an example of how responsive eLearning design will look on multiple devices:

Responsive eLearning Design

1. What Are The Important Characteristics Of Responsive eLearning Design?

  • The most significant characteristic of responsive eLearning design is that it enables the content to respond to your device’s viewable area. It offers the best possible layout on your device (smartphone or tablet) that helps you get the right User Experience and the expected learning experience.
  • To ensure that the content is presented in the most user-friendly manner on all target devices, the content needs to be restructured and laid out differently on the screen. Given the fact that responsive eLearning designs are multi-device (they run seamlessly on desktops, laptops, tablets, and smartphones), they must be optimized keeping note of the availability of real estate on each device. For example,
    • The content in a smartphone may focus on significant aspects first and the related information may be layered (to be revealed on further exploration).
    • Similarly, the interactions must be adapted suitably. Hence, interactions that require manual dexterity just wouldn’t work effectively on smartphones and must be remapped to suit smartphone based interaction to provide the right User Experience.

2. Why Does Responsive Design Matter In eLearning?

Look at the all-pervasive usage of mobile devices in our daily life and it only stands to reason that they should be used for providing access to learning. We have seen the push for eLearning come from learners and the organizations have responded by integrating the Bring Your Own Device (BYOD) policy to provide flexibility to users to learn on the device of their choice.

Today, most of the corporate training needs can be offered on mobile devices with the flexibility to learners to take up part of training on desktops/laptops and balance on the go (on tablets/smartphones).

Supporting this is the transformation in authoring tools where earlier adaptive tools are now giving way to fully responsive tools that create significantly better User Experience leading to higher learner engagement.

3. What Tools Can You Use To Design Responsive eLearning Courses?

As I have mentioned, there has been a steady evolution of the authoring tools and currently, there are 3 tracks:

Responsive Design Tools

These offer layouts that are optimized across devices.

  • Tools that offer rapid development to design.
    Adapt Learning, Articulate Rise, CrossKnowledge Mohive, dominKnow Flow, Elucidat, and Gomo are the leading options in this category.
  • Tools that use multi-device layouts based approach to design.
    Adobe Captivate and Trivantis Lectora.

Adaptive design tools.

These too offer multi-device support but the content will shrink to fit smartphones. The popular options here are dominKnow Claro, iSpring, and Articulate Storyline.

4. What Are Some Tips You Can Use To Create Effective Responsive eLearning Design?

Here is a list of tips that you can use to create effective responsive eLearning design:

  1. Responsive eLearning design must factor for feasibility for the smallest real estate (smartphones-including how it would work in the portrait mode) first, and then move up to tablets, desktops/laptops. This is crucial in ensuring that required User Experience can be provided on each device.
  2. In spite of pre-planning and following the right approach, it is very difficult to predict if the User Experience across all devices will meet the required mandate. The litmus test is validation with users, and this must be factored in the development cycle.
  3. As highlighted earlier, you need to factor for eLearning content customization to do justice to different real estates and the way information appears across different devices.
    • For smartphones, focus on absolute essentials in the first pass and provide related information in a layered manner (available for exploration).
    • It goes without saying that the User Experience on mobile devices is hampered if the content takes an inordinate time to load. Optimize the file sizes, even look at alternate imagery that is light and smartphone friendly.
  4. Navigation should be simple to factor for the smaller real estate for the smartphones. You can opt for different formats across devices so that they offer the best User Experience in each device.
  5. Interactions need special attention. You need to stay away from interactions that need manual dexterity and may come in the way of big thumbs.
  6. Across the designs, ensure that the buttons and any other clickable asset is large enough. Otherwise, the required impact will not be created.

5. How Can You Use Responsive eLearning Design For Maximum Impact?

So far, we have noted how you can use responsive eLearning design to create an optimal User Experience on each device. Another interesting and highly significant aspect is to use the device (given its main characteristics) to be used for a specific type of learning. For instance,

  • It is unlikely that you will take a 60-min course on a smartphone but you will certainly take the course of similar length if it were offered as shorter microlearning nuggets of 3-7 each.
  • Similarly, once you provide the option to users to learn across devices, they may choose the formal training on desktops/laptops but would prefer informal learning on a smartphone/tablet. You can achieve this by offering a combination of formal training with Performance Support Tools (PSTs) or learning aids that are designed to help learners apply their knowledge on the job.
  • Additionally, you can use the mobile devices to push sessions for practice, reinforcement, and remediation.
  • You can also push challenges (assessments) that keep the learners on their toes and encourage them to review the formal training assets till they gain the required level of mastery.

I hope this article showcases possibilities that responsive eLearning design offers and how you can use it for high impact training and better learner engagement. You can go beyond its capability to lay down the eLearning content to the device’s size and dimensions. Instead, you can use each device to play a significant part in the learning journey. Do contact me at, if you have any queries.



#eLearning #LIVESTREAM Custom Captivate Themes 2017-11-13 16:00 EST/21:00 UTC

In this Adobe Captivate eLearning live stream, I will share with you how I create a custom theme for Adobe Captivate 2017

Follow the link below at any time to set up a reminder to be notified when this event becomes live on November 6th at 4 PM Eastern Time.

#eLearning #LIVESTREAM Custom Captivate Themes 2017-11-13 16:00 EST/21:00 UTC

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).

Multi-Device Elearning: Responsive eLearning Design or Adaptive – What’s the Best Choice?


With the rise of mobile devices and varied screen sizes, Responsive eLearning has become quite essential to create multi-device eLearning or mobile learning. It enables learners to access the eLearning courses from their preferred devices. As eLearning designers, we need to develop eLearning content such that it works swiftly and smoothly on every device. Before you could design mobile learning effectively, it is essential to understand the responsive as well as adaptive design principles. In our previous blog, we have discussed, “Why Responsive eLearning Design is a Must-Have for Online Training Content?” In this blog, we will discuss responsive eLearning design while comparing it with the Adaptive eLearning Design.

Responsive eLearning Design Vs Adaptive eLearning Design

Both responsive and adaptive eLearning designs are based on the web design principles. These are the two must-know facts to get started with mobile learning.

Responsive design is a web design approach in which the content responds to the particular screen size providing an optimized learning experience – No matter what the device is. Simply put, Responsive eLearning Design is the eLearning that adapts and responds to all devices.

Responsive eLearning content is fluid and flexible in nature. The content (layout and structure) restructures itself to fit the screen size depending on the learner’s device. This means you can author once and publish the eLearning content to various devices with different screen sizes.


  • Less development time and cost-effective
  • Scope for customization – content can be easily updated
  • Onscreen elements are resized as per the screen
  • Better look and feel
  • Eliminates the need to “Click Next”


  • Increased loading time (for mobile devices with inconsistent data connectivity)
  • Requires more careful designing efforts

Adaptive learning design, on the other hand, is less fluid in nature and uses different layouts for different screen sizes at specific breakpoints. These layouts are predetermined and designed such that the eLearning content fits to different screen sizes. This means you have to design specific layouts for specific screen sizes.

For example, if the elearning content is to be delivered on 5 different screen sizes, then you need to create 5 different content layouts to fit those screens.

Adaptive design makes a complete sense when you are targeting eLearning delivery via particular devices.


  • Provides control over design
  • Less loading time – Only mobile-friendly assets are downloaded


  • Expensive and time-consuming
  • Limited to specific devices

To conclude, creating responsive mobile learning courses is not just shrinking the content to fit various screen sizes, but following eLearning design principles such as maintaining user readability across all devices for better learning outcomes. Choosing the right authoring tool that provides responsive and adaptive design capabilities will be the most vital factor while designing responsive mobile learning.

At Swift, we blend the best of both worlds – Responsive as well as Adaptive for a better learner experience. Though these two terms are different, the end goal is same i.e., creating effective eLearning for a memorable learning experience. However, we believe that the learning context and the target learners should drive the device and design choice.

So what is your favourite approach in eLearning development – Responsive or Adaptive?

If you are looking for interactive eLearning course with mobile first approach, contact us for a free consultancy.

Source link:

Webinar: Advanced Tips and Tricks to create Responsive Projects in Adobe Captivate (2017 Release)

Advanced Fluid Boxes in Adobe Captivate 2017Join me to learn about the tips and tricks for using Fluid Boxes in Captivate and make the most of them. She will also cover the best practices for creating responsive simulations, click-based interactions, drag-and-drop interactions, quizzes, etc. Along the way, learn about some tips and tricks for using Fluid Boxes with Master Slides, Multi-state Objects, and more. Don’t miss it!

Webinar title: Advanced Tips and Tricks to create Responsive Projects in Adobe Captivate (2017 Release)

Date and time: 7th November 2017 | 8:00 AM PT

Registration link

#eLearning #LIVESTREAM Converting to Responsive Projects 2017-11-6 16:00 EDT

Captivate 2017

In this Adobe Captivate eLearning live stream, I will share with you the methods for converting non-responsive Adobe Captivate projects into responsive design projects. I will cover converting to fluid box design as well as breakpoint design and one other method that you might find interesting.

Follow the link below at any time to set up a reminder to be notified when this event becomes live on November 6th at 4 PM Eastern Time.

#eLearning #LIVESTREAM Converting to Responsive Projects 2017-11-6 16:00 EDT

If you enjoy my LIVE STREAMS, please share them with your colleagues and don’t forget to subscribe to my YouTube channel to make sure you’re notified of all my upcoming events. If you subscribe to my YouTube channel you will receive my Adobe Captivate 2017 – Responsive Custom Quiz Questions online course from Udemy for only $10 (a $50 value).