Elucidat features incredibly powerful Responsive & Adaptive design features.

What does Responsive Design mean?

Responsive design allows your your course to display differently according to what device your user is using whether it is a Mobile, Tablet or Desktop computers.

Why bother?

More and more people are using mobiles or tablets to access websites. Perhaps you have sales people out on the road? Rather than having them come into the office for training, they can do the course at home, or in their car.

How can I make mobile content with Elucidat?

The majority of Parts and Page Types in Elucidat are responsive without users needing to alter anything.

For example if I add a 'Text and image' page it will responsively scale to different device sizes automatically:

Variations

It is also possible to finesse your pages further using Variations whilst you are in 'Layout Designer'. 

For example you can set an 'Image box' to be hidden at mobile or tablet size with this Variation:

...this can be achieved with many other Parts, for example the course menu:

...another handy Variation for responsive content is the 'Columns Stacking' option:

...this allows you to control how a part looks at Mobile and Tablet view, for example if set to none the content will display like this:

...if set to stack in mobile it will display like this:

One more useful Variation is the 'Items per row' option which will allow to choose how many items you have per row in interactions such as the 'Hotspot image grid':

 

View mode slider

As an overall recommendation, we advise that you use 'Variations' in the majority of cases as this method is faster, but the 'View mode slider' is one other option for finessing your content.

This video gives you a quick demonstration of how easy it is to adapt your layouts for mobiles and tablets:

Simply make your layout in the large screen size, press ‘Save’, and then use the ‘View mode slider’ to move to the next ‘View mode’.

Then you make any changes you need, press ‘Save’, and then move to the next ‘View mode’.

Your current View Mode is displayed to the right of the slider:

View Modes are:

  1. Desktop (Default): Screens wider than 980 pixels
  2. Portrait Tablet to Landscape Tablet and Small Desktop: Screens 768 - 980 pixels wide
  3. Landscape Phone to Portrait Tablet: Screens 480 - 768 pixels wide
  4. Landscape and Portrait Phones: Screens smaller than 480 pixels

Responsive considerations

Mobile phones have smaller screens. They are also likely to be on slower internet connections.

  • You should use smaller, less intricate images in your courses (see our best-practice guide for notes on optimisation)
  • Perhaps you should even use less text? Perhaps summarise text with bullet points? Perhaps there are simpler ways to get your message across? The image above shows a great example of this.

Generally speaking, your layouts should be simpler, with fewer colours, and will use a larger font size so that the learner can read your text easily.

Responsive Masterclass

For more tips, tricks and interactive examples, we recommend taking a look at this tutorial:

Did this answer your question?