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.
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’:
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.
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!
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.
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:
- 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
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:
But setting the image mode to contain in the smaller view modes will ensure no part of the image is cropped:
- 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?
- 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.
Manual Reference pages & Helpful videos