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
A 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:
But 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.
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:
- Desktop (Default): Screens wider than 980 pixels
- Portrait Tablet to Landscape Tablet and Small Desktop: Screens 768 - 980 pixels wide
- Landscape Phone to Portrait Tablet: Screens 480 - 768 pixels wide
- 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.
