Setting up Pages for Mobiles and Tablets


Elucidat features incredibly powerful Responsive & Adaptive design features.

What does Responsive Design mean?

Responsive design allows you to design your course differently for Mobiles, Tablets and Desktop computers.

This presentation explains some of the ideas nicely.

In essence you adapt the design of your course to the device it is viewed on. Like this:

Why bother?

It is important - 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.

This trend is called BYOD or Bring Your Own Device. People expect to be able to take training wherever they are, with whatever device they happen to have in their hand. Elucidat enables you to facilitate that.

Ok - what should I be doing then?

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.

Right - sounds great - how?

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

If you are a developer, or interested, Elucidat is built upon Twitter’s open source Bootstrap Framework - and information on the responsive modes can be found here.