Adjusting an Older Lectora Project for Responsive Course Design


As the amount of tablet and smartphone users continues to rise, it’s clear that preparing responsive courses will help you get your content into more hands. Need an easy way to create responsive courses? The recently released Lectora® 16 with new Responsive Course Design™ (RCD) helps you seamlessly take your eLearning to multiple devices. With 5 different device orientations to design for, you're ready to take a step into the modern mobile learning trend.But what if you have course content from before Lectora 16? How do you migrate your desktop-based eLearning into a new responsive design? I've thought about this and come up with a few considerations to be aware of as you make that move into RCD.Don't Copy and PasteLectora has made it very easy to make your old courses responsive. Instead of copying and pasting all of your content over to a new responsive title, which can break some functionality, just go to the “Design” ribbon, select “Title Options” from the “Title Setup” box on the left, and check “Enable Responsive Title.” Lectora will then add a responsive bar to the top of your work area with 5 different device views, and will even scale your existing objects to fit logically in each view!Desktop FirstThinking first and foremost about your desktop version every time you make a change is the easiest way to build or adjust your content. Seems odd, considering that we're trying to make something responsive, right? Well, there's a good (and helpful!) reason for it. Anything you edit in the desktop views will be inherited by the tablet and phone views. Anything you edit in the tablet views also will be inherited by the phone views. The more work you do in the desktop view, the less you have to worry about in the other views. It's also interesting to note that you shouldn't have to worry about changing anything in the portrait tablet view because it is exactly the same size as the desktop view. (Well, you might want to change any rollover actions to be mobile friendly “tap/select.”)Utilize ScrollingLectora will automatically resize everything in your course to fit the preset device sizes, but this can make some things, especially text, very small and hard to read. Luckily, the majority of people expect to be scrolling when viewing something on their tablet or phone, so you can increase the page height and Lectora will allow that view to be scrolled. This allows you to fit everything you need into your course without sacrificing any content.Auto-playing AudioIf you have audio in your course, keep in mind that it will not auto-play when viewed on mobile, as mobile browsers don’t really support this feature. You will need to add a button that triggers the audio if you are building a responsive project.Design From the Title Level DownwardPut as much as you can on the title level and take the time to make sure all of the objects look and function as they should in each of the views. These objects will be inherited by each of your pages, so you won’t have to worry about changing them multiple times.RIP FlashFlash will not work on mobile devices, so you will need to remove any Flash interactions you have or convert them to HTML5. There are a few free programs around the internet that will do this if you need some help.Speaking of help, here at the eLearning Brothers HQ we’ve got loads of templates available to help you get started on a fresh responsive course. The best part is that they're already included with Lectora 16! For that reason alone, it makes sense to start exploring what RCD can do for you.What kinds of things do you think about as you migrate your older eLearning content into something newer? Share with us and let us know!Don’t forget to take a look at what else is new in Lectora 16.Editor’s Note:Brother Andrew from the eLearning Brothers kindly stopped by to share his eLearning knowledge with our readers. Interested in using the eLearning Brothers templates in Lectora? Download a free 30-day trial of Lectora Inspire.