— RJ Jacquez (@rjacquez) February 25, 2015
When comparing the two big players in the rapid eLearning market, Articulate, and Adobe, they approach mobile learning design very differently.
Articulate, for example, has gone the native app route for deploying learning projects to tablets and HTML5 for smartphones like the iPhone and the Moto X. They have a good app called Articulate Mobile Player, which initially was only available for the iPad and now is also available for Android Tablets. The challenge with this native app approach is building and maintaining native apps for a myriad of mobile operating systems, screen sizes, and resolutions, which is a tough task and this strategy may not scale moving forward in my opinion. For the learner is yet another app to download to their smartphone and then there’s the issue of installing apps inside certain IT corporations.
Also while the experience of consuming an e-learning course on Articulate’s Mobile Player on Tablets is great (better on iPad vs. Android), this same course on a smartphone via their HTML5 output is practically unusable and leaves a lot to be desired.
I actually think that Adobe, by embracing Responsive Design principles in Captivate 8, is going in a better mobile learning direction, because it helps users design flexible and fluid m-Learning, that can be consumed on desktops, tablets and smartphones, without the need for installing an extra app.
The Future of the Web is Responsive Design!
If you are new to Responsive Design, it isn’t necessarily a single technology that you can point to, but rather a set of principles aided by a number of HTML5 technologies such as CSS media queries, fluid grids and flexible images and videos.
In the early days of mobile, many companies tried to cater to their mobile users by creating two versions of their website, one for desktop users and a lighter, less powerful mobile version for users coming to their site using a mobile device. This approach quickly became a nightmare because of the need to maintain two sets of code, and the inability to predict where people would be coming from, and as a result often times desktop users would arrive on the mobile version and mobile users would land on the desktop version of the site, creating a complete mess.
Luckily more and more companies are now re-building their websites using a Mobile-first mentality and a Responsive Design approach.
With Responsive Design, the idea is to maintain and point people to a single URL, using a single set of content on the back end, while using the same code, and with the help of CSS Media Queries, deliver great experiences across multiple devices, including desktop and laptops, tablets and smartphones and in the near future, wearables like the iWatch and Google Glass.
This is how we should view the future of learning design and consumption, we should focus on designing learning that is flexible and fluid across multiple screens; intelligent learning, that always points learners to a single URL, and avoid at all cause the need for installing different native apps for different mobile operating systems, in order for learners to access the learning.
Just as the web community has embraced the ‘One Web‘ philosophy, we too should embrace a ‘One Learning‘ design paradigm.
And this is why in my humble opinion, the future of mobile learning design looks brighter for Adobe, and I see Captivate 8 as a great first step toward this vision. With Captivate 8, Adobe commoditizes the creation of best-in-class mobile learning, without having to know much about the technology behind the scenes, and to me this is a game-changer in the transition from e-Learning to m-Learning!
Having said that, here are 10 things Adobe gets right about Mobile Learning with Captivate 8:
1. Responsive Projects
When I worked at Adobe, one thing I always heard from newcomers to Captivate was that it was difficult to get started, because of the lack of templates. This is why I really like the new splash screen you get when you launch Captivate 8. You now have options for starting a blank project, a project based on your own project template or from a PowerPoint file, from a software simulation, a video demo and of course now for designing a Responsive project.
I feel so strongly about Responsive Design being the future of learning design, that I would recommend you to start with a Responsive Project even if initially you may not be thinking about mobile learning.
When you select to start with a Responsive Project, you automatically get three layouts, namely one for the desktop (1024px), a second one for the tablet (768px) and a one for the smartphone (360px). All three of these options can be adjusted in case you want to target your learning to a different screen resolution.
I think this is a good start, but I’d like to see more flexibility in terms of adding more breakpoints, as well as options for when learners rotate their screen. One thing that is obvious to me, by the way, these resolutions are organized from left to right is that Adobe is thinking desktop-first, tablet-second and mobile-last. I’m a mobile-first advocate so I would have put Mobile first, Tablet second and Desktop last. But again, this is a terrific way to get learning professionals thinking about m-Learning, so kudos to Adobe!
2. Relative positioning vs. Absolute
When I teach my m-Learning workshop, I have a slide with big letters that reads
“If your design calls for absolute dimensions, you have already failed!“
Smart multi-device design needs to be fluid in the way water is, whatever container you put water into, water becomes that container. This is why I’m excited about being able to select a percentage value when defining the size and placement of objects in the properties tab in Adobe Captivate 8. As I wrote above about the three main components of responsive design, flexible images is important and by sizing and positioning images using percentage values, you are able to include images that will work everywhere by adjusting their size and position according to whatever devices is used by learner.
3. Mobile Gestures
For too long now we have been designing learning for the precision of the connected mouse and keyboard, however, touch computing turns this paradigm on its head, and we now must design for the not-so precise finger or more accurately, for the ergonomics of the thumbs. Luckily Captivate 8 makes it a breeze to make sure learners can navigate the learning using touch gestures like taps and swipes. Enabling this feature will ensure that learners will not only be able to use the mouse on the desktop but just as easy, use the fingers on mobile devices, which is exactly how it should be.
4. Responsive Project Preview
As you work with Responsive Projects, you will want to preview them in your default browser and here’s something you will really enjoy in Captivate 8, there’s a slider you can drag left and right to get a preview of how the various break points will work across multiple devices with different physical sizes and resolutions.
Here’s a quick animation showing how this works, notice how objects flow across the width of the screen depending on the resolution, especially as I move the slider towards the right. Also notice how the yellow navigation buttons move from the right side of the screen, over to the bottom as we get closer to a mobile resolution. I really like how the Captivate team implemented this functionality!
5. Instantly Preview m-Learning projects on multiple devices with Adobe Edge Inspect
There’s one thing to Preview a project in your desktop browser and use the slider to get a sense for how it will look across multiple screens, and then there’s the ability to actually preview your learning on the device itself. There’s something pretty special when you starting thinking about mobile and you can actually touch your work on a smartphone or tablet, and this is where Adobe Edge Inspect comes in.
The tight integration the Captivate team has built with Edge inspect is simply amazing. Once you have installed Edge Inspect on your devices, you can preview a project in Captivate 8 and the browser itself will send the preview over to each of your devices, so long as they are on the same wifi network and voila you are now testing your work directly on your mobile device. You can even initiate a screen capture session from your desktop browser and it will take screen shots from all your devices, this is great for sharing with your team throughout development. I will record a how-to video later and post here on my blog.
Geolocation is a nice feature in Captivate 8 that uses the location-based feature on mobile devices to pinpoint exactly where a learner might be in the world. This could be used to provide personalized learning based on where learners are located at the time he or she takes the learning. I believe this is a good start toward taking advantage of all the sensor superpowers inherent in mobile devices, for learning. I expect geolocation to be the beginning of Adobe adding other similar features like the microphone and camera to augment the learning experience.
7. Responsive Interactions
I’m also really impressed with all the new learning interactions in Captivate 8, which in my testing, most of them are responsive and work on mobile just fine. I’m especially impressed by the one called ‘Catch AlphaNums,’ which is a game-based interaction that takes full advantage of the mobile device’s accelerometer in order to tilt the device for playing the game. The best way to understand this is to watch the video below, where Adobe’s Dr. Pooja goes over the implementation of this interaction and later uses an iPad to demonstrate the accelerometer in action. This is an excellent use of another sensor superpower inherent in mobile devices.
8. Responsive Screen Capture
This is an impressive update to the screen capturing engine in Adobe Captivate that was much needed, in order to provide an optimal experience for mobile users watching a screen cast. Adobe Captivate will basically detect screen activity in the recording window and automatically pans around those areas in order to create screen capture that is optimized for the tablet and smartphone.
9. Importing HTML5 content
I’m glad to see the Captivate team embracing HTML5 as the future of the web. This is why I’m impressed with the ability to import HTML5 objects directly into Captivate 8. Adobe has a product called Edge Animate that allows you to create animation in native HTML5 format, which you can then import into your mobile learning projects in Captivate 8, via the Media drop-down menu, as illustrated below.
10. Monthly Subscription
I realize this is not a mobile learning feature per se, neither is this knew in version 8, but I do like the idea of renting Captivate 8 for ongoing mobile learning projects and by now it should also be clear that cloud-based subscription are the future of software. Adobe has been quite successful doing this since launching Adobe Creative Cloud. Other companies like Microsoft do the same thing with Office and I would suspect soon others will follow suit.
There’s no such thing as a perfect software and I’m sure there are flaws in Captivate 8, too. However I believe one should choose software based on the vision behind the company driving the product, and while I wasn’t impressed with versions 6 and 7, I do believe Captivate 8 is precisely the version I have been waiting for a long time for designing m-Learning that can work across multiple desktop computers, tablets and smartphones.
Since leaving Adobe, I have been of the biggest critics of Adobe Captivate, namely because I wanted the team to address important industry web trends, such as mobile learning and responsive web design.
Today I’m happy to say that my faith in the Adobe Captivate team has been restored, and I’m looking forward to working with the team and with Captivate users, in an effort to help move this product forward, especially as more instructional designers and managers continue to look for ways to mobilize their learning.
In closing I’d like to congratulate my old team for a job well done, and encourage everyone interested in designing mobile learning to download the trial and take it for a responsive spin.
UPDATE. Here’s the Slideshare version of this post: