Feature Focus: Responsive Design Features

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.

 

FF_Responsive_Design_Features_1.png

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:

 

FF_Responsive_Design_Features_2.gif

Variations

A handy Variation for responsive content is the Columns Stacking option:

FF_Responsive_Design_Features_3.png

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:

FF_Responsive_Design_Features_4.png

But if set to Stack in mobile it will display like this:

FF_Responsive_Design_Features_5.png

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:

FF_Responsive_Design_Features_6.png

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.

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:

FF_Responsive_Design_Features_7.png

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 our Masterclass tutorial: Controlling mobile layouts easily.

Was this article helpful?
0 out of 0 found this helpful

Articles in this section

Request support
Access support that’s tailored to you by getting in touch with our Support Team.
Send us feedback
Do you have a new feature request, or want to tell us about something that works well (or not so well) for you? Get in touch!