I am having trouble with my course buttons in HTML5 buttons. A sample of the course is posted here:
Notice when you go through the course, the buttons don’t work real well unless you click on the bottom half of the button. This is also true of the drag and drop objects found later in the course.
It’s weird because when I preview in HTML I get the issue, but when I preview with another method the buttons are fine.
Let me know if anyone knows anything about it
We’ve all experienced responsive web design, usually in the form of web pages that make use of flexible layouts, images and cascading style sheets (CSS) that detect your mobile phone’s screen size and orientation and change the layout accordingly.
As more organisations embrace learning across multiple devices (desktops, laptops, tablets and phones) we now need to develop content that is responsively designed to work across these environments.
Where do you start? What are the best practices? Where’s my hoverboard?!
In our June webinar, our in-house design genius and Adobe Captivate Expert, John Stericker, teaches you all about it. Flummoxed by Adobe Captivate fluid boxes, scalable HTML or creating multiple designs for multiple devices? We’ve got you covered!
Adobe Captivate 2017 includes the option to publish a project as scalable HTML5 and at times, this can be a more appropriate approach over creating a responsive design using breakpoints or fluid boxes. We’ll show you how to create multi-device eLearning without the need to build multiple designs, by using this scalable HTML5 publishing feature.
And as far as multi-device eLearning goes, here is an example we prepared earlier!
The post Webinar Recording – How to create multi-device eLearning using Adobe Captivate appeared first on eLearning.
I have a couple of questions about these formats.
- If I publish so that both of these buttons are gray, will my module work in an LMS when Flash is no longer supported?
- Which if your current features (e.g., drag and drop) rely on swf?? What’s the easiest way to determine if a Captivate 9 course contains things that require Flash?
- We used to import all videos for our modules in the .flv format. Will .flv files work in HTML5 courses?
Organizations have tremendous investment in Flash-based legacy courses. With the phasing out of Flash, the legacy Flash courses need to be converted to HTML5 so that they can support multi-device delivery (that is, the same course can run across devices from desktops/laptops to tablets/smartphones).
In this blog, I outline how you can use this opportunity of Flash to HTML5 conversion to adopt new and trending learning strategies that will help you improve the ROI on your training spend.
I founded EI Design in 2002, and for nearly a decade, Flash was the leading (and often the only) authoring tool. Globally, organizations have a major investment in Flash-based courses that is now causing the following significant problems:
- Most present-day browsers do not support Flash.
- Most organizations offer mobile learning, and Flash is not supported on the majority of mobile devices.
As a result, the organizations need to allocate significant budgets on Flash to HTML5 conversion so that they can run across devices—notably mobile devices.
How Can You Use the Exercise of Flash Courses to HTML5 Conversion to Improve the ROI on Your Training Spend?
As you embark on this Flash to HTML5 conversion journey, don’t just opt for a technology update (new courses look the same although they are HTML5 compliant) but use this opportunity by relooking at the learning strategies that can help you maximize the impact of the new courses you develop.
To improve the ROI, you need a series of measures to be in place including:
- Improving the learner’s interest and reaction.
- Adopting sticky learning strategies.
- Providing measures to push the application of the acquired knowledge.
As you embark on the exercise of Flash to HTML5 conversion, opt for the following measures. These will improve all of the above-said three aspects and create a positive impact on the ROI of your training spend.
1. Improving the learner’s interest and reaction.
You can add teaser videos to inform learners on how the new and enhanced approach will help them learn better and perform better. Highlight the flexibility of “learning on the go” and on the device of their choice. If you need to add the policy of Bring Your Own Device (BYOD), highlight this aspect too.
2. Adopting sticky learning strategies.
During the Flash to HTML5 conversion, opt for redesigning some of the courses and adopt the current and trending learning strategies that can offer a more sticky learning experience. You have a range of options to pick from, notably:
- Scenario Based Learning
- Story Based Learning
Use the Flash to HTML5 conversion opportunity to adopt techniques that resonate with modern learners and create a higher impact like:
- Interactive videos
- Interactive Infographics
You can also look at different formats including:
- Mobile Apps for learning
- Mobile first designs (Fully responsive designs that are optimized for smartphones)
3. Providing measures to push the application of the acquired knowledge.
To push the acquired knowledge to application, opt for:
Performance Support Tools (PSTs or learning aids)
- Content curation
- Social learning
With all these measures in place, you will see an improvement on various levels including:
- Learner motivation
- Learner engagement
- Better knowledge retention (sticky learning experiences)
- Better application of the acquired learning on the job
- Higher completion rates
All of these will lead to an improvement of the ROI.
I hope this blog provides the required insights on how you can maximize the impact of the Flash to HTML5 conversion exercise and create a better ROI on your training spend. As I have highlighted, this exercise should not be just limited to technology uplift. Instead, you should use this opportunity to leverage on many measures outlined here and see an improved ROI.
If you have any queries or need any specific support, do contact me.
Want more insights on how you can use the Flash to HTML5 conversion to improve your ROI?
Schedule a call with our Solutions Architecting Team.
The post How to Use the Flash Courses to HTML5 Conversion Opportunity to Improve Your ROI appeared first on eLearning.
Over the years, eLearning developers have used Flash in developing the courses. The coding process had been complicated until HTML5 made its way onto the scene. Previously, the developers used tools like XML, Java, and Flash to code the courses. However, HTML5 has now become popular and it is being extensively used to develop the eLearning courses. You can now convert flash courses to html5, where the readers find it more comfortable to read the course materials.
The numbers of mobile devices through which the learners are accessing the course materials are increasing at a rapid pace than ever before. As a result, it is becoming more difficult and impractical to develop different versions of eLearning courses for particular devices. This is why the HTML5 based authoring tools are being used to develop these courses. Using HTML5 in developing these eLearning courses comes with several advantages. These can design templates, responsive course outputs, multimedia elements that are easily accessible, screen recording features and other elements using HTML5. These features are important for developing interactive eLearning courses. It is necessary for eLearning platforms to convert their Flash-based courses to HTML5.
You should know the vast range of features that HTML5 presents you with. Engaging your learners is important, while you disseminate the knowledge to them. This fulfills the deficit created due to the absence of an instructor in a really effective manner. Therefore, you need to integrate the courses with the relevant interactive features. With the html5 interactions integrated in the course materials, the learners can have a good experience while going through the course. You need to get your Flash-based course converted to HTML5. Here, you will come across the most popular features of HTML5.
The eLearning developers can create highly interactive courses based on trigger. Here, the objects in the course perform the actions, based on the learner’s inputs. It has got trigger-based interactions, which occur when two objects separate, intersect or become visible. The rapid authoring tools based on HTML5 enable the developers to trigger actions based on logic. They can come up with binary fields, through which they can capture and track the responses of the learners. Various actions can be triggered on the basis of these responses.
When you are using HTML5, the data needs to be represented in plain static format. The developers can add various interactive elements like buttons, sliders, dials, light boxes, markers, and data entry fields when they are using an authenticating tool. This allows the learners to explore the relationship between cause and effect, manipulate the data, control objects and so on. Besides, you can make the courses exciting in other new ways. The learners can also receive information in the form of eBooks, where you can add page turning effects. You can also use timeline interaction, that will enable them to chronologically visualize the historical events. Integrating HTML5 in eLearning enhances the overall learning experience.
Interactions based on mobile interface
One of the best benefits of using HTML5 in developing eLearning courses is the mobile-interface based interactions. The converted courses are compatible with mobile devices, and support gestures on the touchscreen, like dragging, swiping, double tap and so on. The learners get a better learning experience, with these features on your eLearning courses. The Learning Management System also interacts with learners, sending them notifications, requesting them to complete the courses that are pending and keeps them updated regarding the availability of new learning materials. You can seek flash to html5 conversion services from an established company to integrate these features on your platform.
Scalable vector graphics
The scalable vector graphics (SGV) files, unlike GIF, JPEG or PNG files, are scalable and does not suffer a loss in quality. Besides, these files are of small size. These vector images cannot be used to create high-quality projects. Most of the time, the quality undergoes a loss and the resolution gets distorted. Using HTML5 based authoring tools, you can define various complex shapes, such as SVG graphics, which can be used as feedback captions or buttons. This can help the developers in creating interactive infographics, making the static images attractive. Today, most of the business firms dealing with eLearning are getting their course materials converted to HTML5. Competition in the industry is rising, and every company wants to bring their learners a seamless experience.
Evidently, HTML5 comes with a number of useful features, which enable the learners to enjoy a better eLearning experience. Besides, it takes little effort in creating the courses. This is one of the most important advantages of using HTML5 in eLearning courses. As compared to Flash, the effort required to develop these courses is only a fraction.
You can reach out to a reputed and established flash to html5 conversion company and seek their services in developing the course materials. This will refine the learning experience, besides minimizing your efforts. Hiring a professional service provider is never going to be a futile investment as the impact created by interactivity through HTML5 is really high.
The post HTML5 Interactions: Why business platforms are converting Flash courses appeared first on eLearning.
I am on a team with several Captivate 2017 users. We want to combine the slides from several Captivate files into one. We only output at HTML5 due to Flash being restricted on our LAN (and other reasons).
We found that when copy/pasting slides from one file into another, the audio gets modified. Some segments (not restricted to a single slide, often spanning more than one) get cut out and are replaced by the audio from a previous, unrelated project.
What can cause this? How do we avoid it?
Organizations worldwide are looking at migrating their legacy Flash course to HTML5 to support mobile learning. In this article, I outline what are your options and how you can maximize the impact of your migration budget.
Till a few years ago, Flash was pretty much the default authoring tool to offer online courses. As a result, organizations across the world have a significant investment in legacy courses based on Flash.
- Most browsers do not support Flash.
- Also, modern learners prefer the delivery of online training to support their mobile devices.
Since Flash does not support mobile devices, there is a need for you to plan the migration of your select legacy courses to HTML5.
Why An Investment On Migration Of Legacy Courses To HTML5 Is An Absolute Necessity?
This investment on migration of legacy courses to HTML5 is necessary to unlock your existing investment. Further gains associated with this exercise are:
- Online courses designed in HTML5 provide a multi–device experience wherein the learners can take the same course on the device of their choice ranging from smartphones to tablets as well as laptops or desktops.
- These online courses can be taken on the go, at the pace the learners wish to consume.
- The studies clearly show adoption of mobile learning or mLearning will be the new standard in online training.
- Furthermore, the learners are leaning away from adaptive design to fully–responsive design (that fits dynamically to a viewable area).
How Can You Optimally Design For Mobile Devices?
As you plan for the migration of legacy courses to mobile learning or you embark on creation of Responsive or Mobile-friendly eLearning, you can choose from two approaches:
Approach 1: Mobile–friendly designs
These reflect the more commonly available design approach (Adaptive learning) adopted to design mLearning courses. The designs feature multi–device support. However, they still map to the way learners use the laptops/desktops. This approach does extend seamlessly to tablets. However, in smartphones, this approach works only in the landscape mode. When viewed in the portrait mode, you will see a blank space as the design shrinks to a viewable area.
Although, the online courses work across all devices, it is important to note that the learner interactions in this approach are not necessarily aligned to the way we use our mobile devices.
Tip: One of the most popular authoring tool Articulate Storyline 3/360 creates an output in this category. Other two popular authoring tools are dominKnow Claro and iSpring.
Approach 2: Responsive or Mobile–first designs
In contrast, the Responsive or Mobile–first designs are optimized to run on the smartphones. This is then extended to tablets and laptops or desktops.
This approach not only features a completely responsive design approach (wherein the content adapts dynamically to a viewable area); its significant difference lies in the interactions that mimic the way we use our mobile devices.
Tip: There are two streams of authoring tools that you can use to create a Responsive or Mobile-friendly eLearning output in this category.
- Tier 1 (They use multi–device layout–based approach to design): Adobe Captivate 2017, Trivantis Lectora Inspire 17
- Tier 2 (They use rapid development approach based on the usage of their standard templates):Adapt Learning, Articulate Rise, CrossKnowledge Mohive, dominKnow Flow, Elucidat and Gomo and so on.
NOTE: You can also opt for Custom HTML5 frameworks that too offer true Responsive or Mobile-friendly eLearning designs.
Let me share a couple of examples to highlight the differences between the two approaches.
Example 1: Features a mobile-friendly design that would runseamlessly across smartphones, tablets, laptops and desktops.
However, as you will notice, the design shrinks in the portait mode of the smartphone.
Furthermore, the learning interactions are not necessarily optimized for mobile devices. Instead, they are designed to provide a multi-device support.
Example 2: In contrast, this example showcases optimization for the smartphones while retaining the support for other devices (including tablets, laptops and desktops).
Additionally, the interactions map closely to the way we use smartphones.
How Can You Leverage On The Migration Opportunity To Create Better And Higher Impact Learning Experiences?
The exercise of migration from Flash to HTML5 must not be about technology uplift alone (that is, converting Flash courses to merely open as HTML5 courses).
Instead, you can use this opportunity to redesign your courses that leverage the ways learners use their mobile devices. This approach will create a more engaging learning experience and create the desired impact (sticky learning) that you seek.
What Are The Techniques That You Can Use To Multiply The Impact?
You can use this opportunity in the following three ways:
Approach 1: Use techniques that engage and motivate learners better
- Microlearning: For both formal and informal learning
Approach 2: Use formats that are different from the more traditional ones
- Interactive videos (instead of videos)
- Animated videos (instead of long reams of text)
- Interactive infographics (instead of text or predictable interactions)
Approach 3: Go beyond formal training and engage the learner in a learning journey
- Learning Paths (featuring Personalization)
- Performance Support Tools
- Learning Portals that feature Social Learning and Participative learning (Curation)
The need to migrate your legacy Flash courses to HTML5 provides a great opportunity window to create Responsive or Mobile-friendly eLearning designs that will resonate better with your learners.
I hope this article provides the required cues on the techniques you can use during migration to HTML5 to create higher engagement, better completion rates and a more sticky learning experience. If you need any specific support or have any queries, do contact me at email@example.com.
Want more insights on how you can use to enhance the impact of your mobile learning for your corporate training?
Schedule a call with our Solutions Architecting Team.
The post Migrate To HTML5 – Responsive Or Mobile-Friendly eLearning To Create High Impact Learning Experiences appeared first on eLearning.