Responsive development with Lectora 16

Lectora 16 is the latest version of Trivantis’ rapid authoring tool.

They’ve jumped straight from 12 to 16, using the current year (possibly to avoid unlucky 13). The selling point of the new version is responsive design – being able to create content that can be deployed to different sized platforms from desktop down to phones.

Before Lectora 16 if I needed to create content for different sized platform I had to create different Lectora files

Previously with Lectora I either created multiple versions of the same module, maybe with the theme templates to quickly repurpose the content; or I put some code that detected the platform and resized accordingly. This didn’t allow you to layout the content differently for the different sized platform – which is where Lectora 16 comes in. It allows you to visualise how it will look on different platforms so that you resize and reposition objects accordingly.

So how does it work in practice?

I thought I would find out so I rebuilt an existing piece of content in Lectora 16. You can view the results here.

If you have had any experience with Lectora 11 or 12 the overall appearance doesn’t look too different. There are two main differences, however.

screenshot of New Responsive Title in Lectora 16 The first is on the splash screen which now includes the option to create a new responsive title; there is still the option to create standard e-learning content. If you change your mind and decide that you need to create a responsive module after all you can’t switch; you’ll have to start from a new title. Of course, you can always import the frames from the old module into the new one.


The second is the new toolbar with a series of different devices from a desktop in the middle to tablets and phones (landscape and portrait). The two things to recognise at this stage are (a) the arrows extending out from the desktop – the layout of the other devices depend upon this one; and (b) the colours of the different devices – which we will return to shortly.

When developing responsive content start from the middle – the desktop version. Layout the objects on the screen; the text boxes, images, etc, and add all the interactivity as required. Once you have that sorted move out to the next stage; the tablet. Begin with the landscape version as they may not be too many changes to make here; check the content, and re-position and resize accordingly.

As you do so, take a look at the sizing handles and note how they change colour to match the colour of the device at the top of the screen. This lets you know that it will be different to the desktop version. Changes made here will cascade down to the phone level. You can of course make changes specific to that level as well.

screenshot of the reset button in Lectora 16
If you want to put things back the same as the desktop level click the reset button.
screenshot of the text scaling tool in Lectora 16
There is also an option to change the text size in the text boxes as a percentage of the original size.

 

 

 

 

 

 

At the lower stages you can substitute different sized imagery. This is particularly useful when switching between portrait and landscape views. Also you could use it display different information; have an exercise in landscape and get the learner to turn their device to see more information once they have completed the exercise.

I found it great way to develop content for multiple platforms.

It’s cleverly laid out so the developer can quickly see what they’re doing for each size of content. The colour coding works well in this regard. It doesn’t need any coding knowledge, just some patience switching back and forth to get everything laid out just so. But it is less work than having to build multiple versions of the same file. Publishing is no different except that the published folder contains three new subfolders for each device. File size does not look overly massive.

I did experience one or two issues. The first one was that text in the text boxes did not always appear as I expected. Sometimes it would be cut off by the edge of the box. The best practice appears to be to over-size the text boxes to allow the text room to grow. This fits in well with the best practice of not overloading content on smaller devices.

The second issue was more to do with the appropriateness of re-purposing the same content for different sizes, especially a mobile phone. Whilst you can deliver complex exercises on a desktop or tablet, a mobile phone may be more suitable to smaller bite sized activities. So you may need to consider whether the content you are creating is suitable for delivery on every platform. However you can have unique content for each device – simply drag it off the page when it’s not needed. And I have not tested this yet but I imagine there are ways that you can create specific pages that are only accessible in certain formats. I would be interested to know if anyone has had a go of this yet?

You can view my effort here. Note this module was created in a trial version of Lectora 16 so you will see a small window display to start with.

If you use rapid authoring tools and need to create simple content for multiple platforms, Lectora 16 could be for you.

One Reply to “Responsive development with Lectora 16”

Comments are closed.