Elucidat | Academy

QA: Responsive design

So, you’ve completed your project build and had a run through on your computer and it’s looking pretty good! But before you release it for your learners don’t forget to check the responsive layouts.

A project screen shown on four different devices: desktop computer, laptop, tablet and mobile device.

Why?

It is important to ensure your projects work across multiple devices as more and more people are now using mobiles or tablets to access learning. 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, how do I check the responsive layouts?

At the top of your content window in Build and Preview mode is a ‘View mode slider’:

The Elucidat view mode slider

You can use the slider to move between different different screen sizes, or click on the device icon on the left to select from a dropdown list of common devices. This video gives you a quick demonstration of how easy it is to adapt your layouts for mobiles and tablets.

 

PLAN AHEAD

Considering the responsive design at the beginning of your project can really save time further down the line. Ask yourself the following questions:

Does the project need to work across all devices and view modes, or is there a particular device you know your learners are going to be using?  

If so you can target this screen size in particular when creating and testing your layouts. The drop down device list next to the view mode slider will come in handy for this!

The Elucidat view mode drop down device list

 

Are the interactions you have chosen going to work across all screen sizes?

Detailed images and complex interactions can look great and work really well on larger devices with a lot of screen space, but on mobile devices details can be lost and interactions can become difficult to use because of the limited space available. Thinking about the amount of onscreen content and complexity of interactions at an early stage in the project can be useful for avoiding issues further down the line.

Want to use a drag and drop page type? That’s ok! But try keeping answer options and drop areas to a minimum so it isn’t going to cause headaches for mobile users.

An example drag and drop screen shown on both a tablet and mobile device

  

RECOMMENDED WORKFLOW

Now you know how to check and edit the different view modes in a page and what to consider, how do you manage the QA process across your project as a whole?

We recommend working through the module on a page-by-page basis and checking there are no display issues across the four key view modes:

  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

The Elucidat view mode slider at it's narrowest setting

These four modes are shown as segments in the slider. Remember, you can save a separate version of the page within each view mode.

Be sure to select all areas of a screen when testing your course in different view modes. Text and images within tabs, or modal windows, are easy to overlook at a first glance!

 

TIPS & TRICKS

  • The different image modes really come in handy at different screen sizes. An image set to original mode in desktop view, might become cropped when you move down to mobile view:

An example of the same image set to 'original' mode on a desktop and mobile view.

But setting the image mode to contain in the smaller view modes will ensure no part of the image is cropped:

An image on a mobile view set to 'contain' mode

  • Working at the smallest size in each view mode is a good way to make sure all your content fits ok, so make sure your slider is towards the left of each segment before your start editing.
  • Have a complex graphic or chart that you can’t do without? That’s ok, but think about alternative options for people who might be viewing from a mobile device. Perhaps you could also add the graphics as a PDF resource to your project for mobile users to download and view outside of the project itself?

An example of a complex image on a mobile device

  • Remember, you can always remove images entirely from smaller screen sizes if you really want to save space. Don’t delete the entire image box, as that will remove it from the page as a whole, but instead select ‘Remove image’ within the image editing controls in your desired view mode.

The remove image button in the Elucidat image editing tools.

 

Manual Reference pages & Helpful videos

comments powered by Disqus