eLearningJoe’s Lectora 16 Responsive Course Design Tips

Joe Ganci, eLearningJoe, LLC

www.elearningjoe.com

joe@elearningjoe.com

703-927-9437

Sign up for my free newsletter, published whenever I’m able, and chock full of tips and tricks for Lectora and other tools!

www.tinyurl.com/elearningjoe

ContentsImportant Lessons I’ve Learned about Responsive Design

An Example of Standard Versus Responsive

Giving Learners the Ability to Swipe Right and Left on Mobile Devices

Treating Images in Responsive Design Projects

Full-Screen Image Method 1:

Full-Screen Image Method 2:

Using Text:

Building a Responsive Project Step by Step

Setting up a Background Image and Navigation

Creating the Title Page

Creating a Drag-and-Drop Exercise

Important Lessons I’ve Learned about Responsive DesignSimply put, too many are assuming that they need to create a responsive project when working on a new project. They may have heard that while nobody is using their devices now, in a year or so they will be and will likely want to access your lesson on mobile then.

1. It’s rare for any eLearning project to be used for years to come. It will probably need to be updated before. It will probably take longer than expected to decide to let learners use their mobile devices (that has been my experience). Most of my clients are still not considering responsive. Your experience may differ.

2. Creating a responsive project will always take longer than one that is not, even if you follow all the best practices illustrated in this document and elsewhere. It doesn’t have to be a lot more, but it will be more. If you don’t need to allow devices to access your learning now, you may want to reconsider. The more you do it, the less extra time you’ll need to create a responsive project.

3. If there is a chance that you will want to allow devices to access your learning later, but not for a while, understand that you can make any Lectora file into a new responsive project, then adjust the objects on the stage as necessary in each view. It’s not ideal, but it works. The amount of work you’ll need to do is likely more in this case.

To do this, simply:a. Open your Lectora file.b. Chose the Design tab.c. Choose Title Optionsd. Click the Enable Responsive Title option.

4. HTML5 does not necessarily mean responsive, though responsive always means HTML5. What I mean by that is that when you create a standard (non-responsive) Lectora file, if you design it correctly (avoiding Flash elements, for instance), and publish it, it will play on mobile devices as well. This is much simpler to create than a multi-view responsive project, but you’ll want to be careful to keep mobile in mind when you do this. For instance, make sure buttons and other interactive elements are large enough to touch with a finger.

You may end up with a frame size that is too big for a mobile device, requiring learners to have to scroll, but you’ll at least have a file that runs, albeit not ideally.

5. You can resize each view to whatever width and height you wish. Know what devices you need to support and give learners the maximum height and width that are safe to use without going too big and forcing them to scroll or going too small and robbing yourself of stage real estate you can use. For each view in Lectora, under the Design Tab, choose the Page Size option, then set the pixel width and height.

This is best done before you start inserting content into your file! If you do it after, Lectora will do its best to resize each element relative to the new page size, but you’ll find that you’ll need to do quite a bit of editing nonetheless.

6. In most browsers on Android and iOS devices, videos will not automatically play. The learner has to touch the video to make it work. Firefox, however, on both Android and iOS will play videos automatically.

7. Many more excellent tips on responsive course design are found here: http://community.trivantis.com/knowledge-base/best-practices-responsive-course-design/

An Example of Standard Versus ResponsiveI’ve prepared a short example of both a standard approach and a responsive approach using the same content. Both will run on mobile devices. As indicated above, however, you’ll find that the responsive project will look and run better on your mobile devices, both in portrait and in landscape modes.

To see the standard approach: www.elearningjoe.com/tools/lectora/standard

To see the responsive approach: www.elearningjoe.com/tools/lectora/responsive

Note that when viewing the responsive approach on your desktop, try grabbing the right or left edge of your browser window and making the browser more narrow. You’ll see the contents of the lesson automatically adjust through different views, just as you’ll see on commercial sites such as trivantis.com, microsoft.com or apple.com. You’ll have no such luck with the standard approach.

However, when you use a mobile device, there is no mouse! You may use a stylus, perhaps, but more often than not, you use your finger, in which case the word click seems odd. It would be more appropriate to use touch in this case.

To make it so the learners see the correct word, click or touch, when they’re viewing your lesson on desktop or mobile, you can take advantage of the reserved variable CurrentView. This is how:

1. Create a variable. I like to call this one touchOrClick. Set its initial value to click.

2. At the beginning of your project, add an OnShow action. 3. Set the action to Modify Variable, as seen below.

4. Next, set the IF conditions to the following:

5. Now, whenever you want to instruct the user to click or touch, use the following approach:

Type your name and VAR(touchOrClick) Go.

6. An example of this is contained in the example files I’ve created for you that you can download.7. Just so you know, the values of CurrentView can be any of the five following:

DesktopTabletLandscapeTabletPortraitPhoneLandscapePhonePortrait

Giving Learners the Ability to Swipe Right and Left on Mobile DevicesI am not a big fan of linear lessons, the kind where learners click Next, Next, Next because most learners just don’t learn much that way. Involve the learner on each page. Have the learner do something to engage him or her.

Nonetheless, there are times when you may be creating an informational lesson without much interactivity that may involve a lot of branching depending on learner responses. In the cases of linear learning, you can opt to let the learner swipe right and left on their mobile devices. It also works on desktop and laptop touch screens and using the mouse to drag the current page left or right.

The idea of Swipe Left and Right can be a bit counterintuitive. Here’s how it works:1. When you swipe left on a mobile device, it means you want the current screen to move to the

left, making room for the one on the right to show. In other words, swiping left is the same as hitting a Next button.

2. When you swipe right on a mobile device, it means you want the current screen to move to the right, making room for the one on the left to show. In other words, swiping right is the same as

hitting a Previous button.

Create an action and note the two options under TouchScreen. Set Swipe Left to go to the next page and Swipe Right to go to the previous page.

Treating Images in Responsive Design ProjectsYou may see the following in action here: www.elearningjoe.com/tools/lectora/mobile/

No matter which method below you use, it’s a good idea to resize your images before you bring them into Lectora using an image editor, especially if the images are much larger than you need. In each case, determine the size of the image you will need and resize it before you bring it into Lectora.

If you need to use an image full page, such as a background image, then note the highest and widest you need the image to be. Note that the standard sizes for each of the five views are:

View Width Height

Desktop 1009 662

Tablet Landscape 1009 662

Phone Landscape 785 450

Tablet Portrait 785 1000

Phone Portrait 480 763

Let’s assume that you are sticking with the default page sizes above. In this case, you’d be best off making sure that any images that you would like to have fill up the page are 1009 pixels wide or 1000 pixels high. For example:

● If an image is 1920 pixels wide by 1200 pixels high, you’ll want to resize it to 1600 x 1000, which keeps the aspect ratio the same and also ensures that the tablet portrait height will be accommodated, as it is the tallest height value needed in the above table.

● If an image is 1280 pixels wide by 1882 pixels high, you’ll want to resize it to 1009 x 1484, keeping the aspect ratio consistent and ensuring that the desktop and tablet landscape mode widths are completely filled.

Of course, if you change the page resolutions of any of the five views above, which you should do so ahead of bringing in any content, follow the above rules using your own maximum width and height.

Having determined the maximum dimensions needed for the images you’re going to use, let’s look at two methods for using background or full-screen images.

Full-Screen Image Method 1: When images are supposed to be full screen (such as a background image) and can have their aspect ratio changed without looking distorted, you can set them to fill up the width and height of the page and do the same in each of the other views.

Always start in the Desktop view!

For instance, here we will bring an image of a wooden fence into the Desktop view and set the Height and Width to the full width and height of the page.

Note above that I use the ruler in Lectora to ensure the image is horizontally positioned correctly. However, in this case, it may also be a good idea to use guides so that when you put the image on the page you can make sure it’s positioned correctly.

Alternatively, you can use the Position & Size options to enter the correct numbers, which in many cases is faster than trying to eyeball it or setting up guides. Note below how I turned off the Maintain Ratio option, set the Position x and y to 0,0 and the width and height of the image to be the same as the page size.

You can do the same with each of the other views. In this case, remember, this is an image that you can resize any way you like without it looking distorted. Many images are like this, especially those that are abstract in nature.

Full-Screen Image Method 2: Most images you use, however, will likely become distorted if you change their aspect ratios. Because the different views, especially between landscape and portrait, require different aspect ratios, this can be challenging for full-screen images.

For example, look at the following image.

If you force it to a portrait mode, it will end up looking something like this, which isn’t acceptable.

In cases like this, rather than trying to resize the image, it’s best to keep the aspect ratio intact and make the image larger than the page, and then position the important part of the image in the stage area. Here guides can be helpful. On the left below, see how the Phone Portrait mode looks before I make the

change. On the right, note how I resize the image, keeping the aspect ratio the same and positioning the portion of the image I deemed important between the guides.

Here’s another example:

Phone Portrait Mode:

Using Text: When you use text on a page, it’s even more important to use the Wrap Text option in a Responsive project because this will help the text wrap correctly in each view.

For instance, in the Desktop view, the text wraps around the image like so:

In each view, if the text doesn’t look great (and it should), it’s easy to fix. Go to the Home tab, click on the text, and you’ll see the Text Scaling option. Use the slider to make sure the text looks good in the view.

Note that if you decide to make the text object taller than the stage in a view, the stage will appear to grow in height. However, when you publish the file, the height of the stage does not change. Rather, learners will need to scroll to read the text (as is true on many websites).

Building a Responsive Project Step by StepHere is a step-by-step approach to building a short lesson on the Apollo 11 space mission. You may see it in action here: www.elearningjoe.com/tools/lectora/apollo11/

Setting up a Background Image and Navigation1. Create a new Responsive Title. Entitle it Apollo 11. 2. Make sure you’re in the Desktop view.3. Insert the image galaxy.jpg at the title level. 4. In each view, ensure that the image fills the slide by making it larger than

the page and making the center of the picture fit on the page. 5. Insert Next and Back buttons at the bottom, ensuring that they look good in each view. When

inserting an item near the bottom of the page, use the Offset from Bottom option on the Position and Size ribbon. This ensures that no matter the page length, the object with always be that distance from the bottom of the page.

Creating the Title Page1. Make sure you’re in the Desktop view again.2. Insert a blank Page 1.3. On this page, insert the image Apollo 11 – Aldrin.jpg. Position it on the right side of the page.4. Check each view and position the image correctly. Note: it is easier to do so if you temporarily

hide the background image so that you can see the page dimensions.5. Place a text title on the left of the page, “Let’s Go to the Moon!”6. Again, check each view and position the text so that it looks good in that view.7. Place a button on the page with the text, “Let’s Fly!” and have it go to the next page.8. Insert audio on the page from the file Apollo11Landing.mp3. Note: if you hide its controller and

set it to Auto Start, it may not play on mobile devices. For this reason, you should place a button on the page that starts the audio playing. Call it Listen perhaps.

Creating a Drag-and-Drop Exercise1. Make sure you’re in the Desktop view again.2. Insert a blank Page 2.3. Insert a Drag-and-Drop Question.4. In this case, we will have one drop destination and we’ll load the moon.jpg image for it.5. We will have four images that can be dragged. Load the four images Aldrin.jpg, Armstrong.jpg,

Collins.jpg and Lightyear.png. 6. If you don’t wish to have item text, just delete the text fields.7. Set the Armstrong item to be the correct answer.

8. In this case, wrong answers will go back to their starting point. The correct answer will show a feedback message.

9. Once you have everything set up, you need only adjust the images in each view to ensure they look good. For example, on the left below you can see the Desktop view while on the right the Mobile Portrait view.

Questions? Write to Joe at joe@elearningjoe.com.