DESIGNING

TESTING &

DELIVERING

eLEARNING IN

A MULTI-DEVICE WORLD

TIPSFOR

TABLE OF CONTENTS

THE MULTI-DEVICE WORLD

RESPONSIBLY RESPONSIVE

TIPS FOR DESIGNING MULTI-DEVICE eLEARNING

TIPS FOR TESTING MULTI-DEVICE eLEARNING

TIPS FOR DELIVERING MULTI-DEVICE eLEARNING

1

2

3

4

5

3

4

5

15

21

2

THE MULTI-DEVICE WORLD

The way we learn today has been revolutionised by the advancements in technology and the devices we use. eLearning, which was instituted on

desktops, has now gradually shifted its base to tablets, phablets and smartphones evolving into mLearning and multi-device learning. Today we have

an average of 2.9 devices per person and, research predicts, by 2017 this will go up to 5.2! The device most carried is the

.

These days people are just as likely to reach for their smart phone or tablet when using a web-based system as they are to use their desktop or

notebook, . The research also found that, rather than sticking with the one device, people tend to move between

devices during different phases of their interaction with the web based systems. Another says that, "as multiple devices become an

integral part of our lives, switching between them is becoming standard practice. In both UK and the US, more than 60% of online adults use at least

two devices every day, while a quarter (25%) of online Americans and a fifth (20%) of online Britons use three devices. In both countries, more than

40% sometimes start an activity on one device only to finish it on another".

smartphone at 85%, with

laptops and tablets at 65% and 48%

according to Google Insights research

study by GfK

3

RESPONSIBLY RESPONSIVE

In learning context, the learning content needs to be 'designed' and 'tested' in a way

that it works well across different devices, operating systems, browsers, screen sizes

and resolutions, and delivered to the learners via a responsive Learning Management

Platform or else you risk alienating a large number of your learners.

Below are the key factors driving the need for multi-device/responsive eLearning

design, testing and delivery:

Ÿ Increasingly mobile workforce requires and demands flexibility and convenience

Ÿ Content must be available at the point-of-need or time-of-interest

Ÿ Change in computing trends from PCs to mobile devices like laptops, tablets,

phablets, and smartphones

Ÿ Myriad of operating systems and manufacturers in a wide range of sizes – one size

no longer fits all

Ÿ Adoption of BYOD, which has increased variety of mobile devices that eLearning

must support

Day by day, the number of devices,

platforms, and browsers that need to work

with your site grows. Responsive web

design represents a fundamental shift in

how we'll build websites for the decade to

come.

“”Jeffrey Veen

CEO & Cofounder of Typekit and author of The Art

and Science of Web Design

4

A few years back, designers had a fixed size canvas, no matter what the

medium – whether for print or digital media. The multi-device revolution

has changed it all! There is no longer a 'fixed size'. There are PCs and

Macs, laptops, tablets, hybrids, phablets, and mobile phones out there, all

with different dimensions and resolutions.

As eLearning designers, we need to ensure that we create visuals that

communicate effectively on all display sizes and deliver user-friendly

learning experiences on multiple devices. This can be achieved by

following the below mentioned tips for designing responsive eLearning.

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

5

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

When designing for responsive eLearning, the most important thing to keep in mind is flexibility, so that content can be restructured and readjusted to fit

different screen sizes and resolutions.

To achieve this, we suggest that you think of the design based on the breakpoints you've decided. We found that designing for two breakpoints worked

well. This gave us 3 standard layouts: a desktop, a portrait iPad tablet, and a portrait smartphone, allowing us to cover the largest, medium, and smallest

screen sizes.

The breakpoints are the size at which the rules change, and the elements in the standard

layouts are dynamically resized and readjusted to fit screen sizes that fall between

breakpoints.

During the development process, we found it useful to create doodles for different

layouts/sizes, and discuss them with other team members to ensure that the meaning of the

information is retained and functionality is viable. This resulted in a more iterative approach,

with greater cross-domain interdependence. As we gained experience, the interdependence

tended to reduce, except when it came to a new template or a variation on an existing

template.

Design Layouts Based on Breakpoints1

Breakpoint Breakpoint

Desktop

iPad

Phone

6

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

So once page design templates are ready, we need to pick the right

font to ensure good readability for the entire range of target devices.

There are several considerations here.

Select the Right Font (Size, Type)2

Size

The same size font can look smaller or larger on different devices,

depending on the device dimensions and resolution. For example, the

same font size looks smaller on a high-density device like an iPhone 5

than on a comparatively lower-density device like a desktop PC.

A solution here can be to use a relative sizing unit like "em" to

dynamically set font size and line spacing for optimal readability

across devices.

The "em" takes its size relative to its parent unit. So assuming the

browser to be the overall parent, we can set 1 em to be equal to the

browser's default font size – which in most cases is 16 px. From there

on, depending on how you structure your page, you can set relative

font sizes in "ems" for texts in different containers.

If you want know more about the "em" unit, read Ethan Marcotte's

article on , where he explains the logic behind this unit.Fluid Grids

7

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

So once page design templates are ready, we need to pick the right

font to ensure good readability for the entire range of target devices.

There are several considerations here.

Select the Right Font (Size, Type)2

Type

Another point to consider is font type. Serif fonts are more difficult to

read on digital devices, so it is to select a sans serif

font. Jessica Hische recommends the to check readability of

sans serif fonts: see how well an uppercase "I", a lowercase "l", and a

"1" are differentiable.

recommended

Il1 test

When using sans serif fonts, we also avoiding italicised

text, as it can be more difficult to read as it tends to get pixelated. This

can be especially difficult for dyslexic users.

Also, unless you're planning to embed the font, it may be better to

select a font.

Here are some ; we recently tried one of

them, and found that the text was easily readable on all the target

devices. [Notice they're all Web safe and sans serif fonts!]

recommend

Web-safe

Google Font Combinations

8

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

These are two critical areas that eLearning designers work with. Most of our courses include either raster (bitmap) images or vector graphics, and

animations of varying complexities.

Here are some recommendations for handling these different visual elements in responsive eLearning projects:

Handle Images/Graphics and Animations for Optimal User Experience3

Resizing JPGs and PNGs

These are raster (bitmap) image formats. They could be either photos or vector graphics

exported as JPGs or PNGs. There are a couple of options to resize JPGs and PNGs to fit

different display sizes.

This means resizing based on screen size. Given that we're talking

about raster images, scaling smaller images up may lead to quality

loss. It is therefore recommended to use bigger images, and

dynamically scale them down based on device size.

At times, when images are scaled to a very small size, you can no

longer see the details, and their meaning gets lost. An effective

alternative in such cases is to crop the image around a focus area that

holds the meaning. This means using a larger image, and then

reducing its size by cutting non-essential areas.

A third option is to combine both the above approaches to dynamically

crop and then scale images depending on device size.

Scaling1

Cropping2

Combination3

9

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

Handle Images/Graphics and Animations for Optimal User Experience3SVGs and SVG Animations

Converting vectors to images can cause quality loss when you scale them up. A better solution is to convert vectors to Scalable Vector Graphics (SVG)

format. The SVG format offers the following benefits:

It bypasses the problem of screen resolution.

It is built with XML, and therefore gives a relatively lightweight file.

It can be manipulated and styled just like any other element on a Web page.

SVGs can be static, animated (for short, simple animations), or interactive. You can even create small animations in Flash and convert them into SVGs

with the help of

A caveat here – some older browsers, such as Internet Explorer 8 and earlier, do not support the SVG format. So make sure to check browser support in

targeted browsers before using this. You can look up details of SVG and browser support on

If you happen to be targeting desktops/laptops with IE8/IE7/IE6, then another option for short, looped animations could be non-transparent GIFs

(photos) or animated GIFs (vector animations saved as GIFs). These don't do very well with scaling though, so we recommend creating the same

animations as SVGs as well, for alternative use on supported browsers.

Swiffy.

caniuse.com.

10

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

Handle Images/Graphics and Animations for Optimal User Experience3Icon Fonts

Another option to explore for static vector graphics is icon fonts. These are font families that contain a set of predesigned icons. Icon fonts behave

just like any other font – you can change their colour and size, give them a hover effect, give them varying levels of transparency or a shadow

effect, and make them interactive.

In comparison to SVGs, icon fonts have a much smaller file size and are supported on lower versions of browsers (e.g. IE 8). However, icon fonts

can only have single colour – they cannot be given gradients; and if not Web-safe, they need to be embedded into the eLearning package.

You can read more about icon fonts here.

11

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

Handle Images/Graphics and Animations for Optimal User Experience3Sprite Sheets

If your responsive eLearning contains a lot of small, short, looped, reused animations, you could

consider using CSS sprite sheets.

A sprite sheet is a single PNG image that contains a sequential array of smaller, distinct images or

graphics that make up an animation. These smaller images/graphics (frames) get displayed in quick

succession, so it seems like an animation.

Sprite sheets offer several benefits:

They tend to have a smaller file size (as opposed to if each image were saved as a separate file).

They consume less memory and resources as compared to video animations.

They load quickly as only one file needs to be picked up.

The viewport can be easily adjusted to view one or more frames at a time.

Keep in mind, however, that sprite sheets can have certain

depending on the resolution and the RAM size of the device on which they are displayed. You can

read more about sprite sheets .

Here is an example of a sprite sheet for Angry Birds animations:

dimension and file size limitations

here

(Reference: )http://chrome.angrybirds.com/

12

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

Handle Images/Graphics and Animations for Optimal User Experience3Flash Animations Published as Videos

Creating long, complex animations with closely

synched audio can be challenging and time

consuming in HTML. For such cases, we

recommend creating and synching the animations

in Flash, and then publishing them in the required

formats (MP4 and OGV) for integration within an

HTML framework.

13

TIPS FOR

DESIGNING MULTI-DEVICE eLEARNING

We interact with different devices in different ways. With desktops and laptops, there is an abstract layer of mouse and keypad, whereas with touch-

based mobile devices, we can use our fingers in different ways to achieve different results.

Here are a few things to keep in mind to ensure a good experience on a variety of devices:

Handle Interactive and Navigation Elements from a Touch based perspective4

Ÿ Ensure the interactive areas (buttons, hotspots, links, etc) are large and spaced out enough to be comfortably "touched". As per , a larger,

closer target is quicker and easier to select. However, if you do use smaller interactive elements, you could either increase their hit area beyond their

visible borders – which will involve keeping distance between them, or match the hit area to the visible borders, with sufficient distance between the

elements.

Ÿ recommends that touch targets should be at least 44 x 44 px; both and recommend a touch target size of 9 mm (around

34-36 px).

Ÿ You can show more global navigation controls upfront on bigger devices; but for smaller devices, it may be a better idea to group and layer them

based on frequency of use.

Ÿ Last but not the least, any interactive element should look clickable or touchable. This is all the more important on touch-based devices – since

these do not support hover effects, you need to design in such a way that users can easily recognise where interactivities are available.

Fitt's Law

Apple Android Microsoft

Our Framework for Responsive eLearning Development (FRED) is the answer to your

responsive eLearning courseware needs for multi-device learning with speed and ease. Request a Demo

Need help with designing and developing Responsive eLearning?

14

TIPS FOR

TESTING MULTI-DEVICE eLEARNING

Once your multi-device eLearning is designed, ensuring that it runs

consistently and smoothly across the identified range of devices, screen sizes,

browsers, and platforms is crucial to deliver an engaging and consistent

learning experience for your users.

But the sheer number of device-OS-browser combinations and the set of test

parameters which need to be checked for EACH combination make the testing

process complex, to say the least.

Below mentioned are five key tips that can help you in testing your

multi-device/responsive projects.

15

For a precise, limited specification, i.e. a very specific and narrow target range, defining a testing environment would be relatively easy. It might look as

simple as this –

However, for a wider target range, an

optimisation approach would be helpful. This

involves analysing popularity, usage, and sales

statistics for devices, browsers, and OSs to

narrow down to a comprehensive,

representative set.

Define the Testing Target Environment and Approach1

TIPS FOR

TESTING MULTI-DEVICE eLEARNING

16

Once an optimal set of devices, OSs, and browsers are identified, manually work out all the permutations and combinations to create a testing matrix.

The lowest specifications will form the parameters for minimum edge testing.

Create a Testing Matrix2

TIPS FOR

TESTING MULTI-DEVICE eLEARNING

Device PlatformBrowser 1,

v.XBrowser 2,

v.XBrowser N,

v.X

Browsers

DeviceType 1

OS 1, v.X

OS 2, v.X

OS 3, v.X

DeviceType 2

OS 1, v.X

OS 2, v.X

OS 3, v.X

DeviceType 3

OS 1, v.X

OS 2, v.X

OS 3, v.X17

Your test cases will need to be refined and extended to make sure that different devices are covered. For example, for the scenario page shown below,

the test case for desktops would define clicking the next/back arrow buttons as well as the numbered buttons for moving from one to scene to the other.

For the same scenario page on a tablet, the test case may additionally define horizontal swiping to move between scenes. Finally, for smartphones, the

scenario presentation has changed to a non-interactive, more-text-based view that is better suited to smaller displays. The test case therefore needs to

define only vertical swiping to scroll through the scenes.

Create a Testing Matrix2

TIPS FOR

TESTING MULTI-DEVICE eLEARNING

18

Check if all the devices listed in the testing matrix are 'physically' available, and if required, evaluate if you can use tools/simulators to cover the missing

ones.

Use actual devices and setups for testing, as far as possible, for more accurate results, rather than relying on tools and simulators.

Check the Availability of Physical Devices3

TIPS FOR

TESTING MULTI-DEVICE eLEARNING

19

Log the issues in an efficient manner, so as to make grouping easier and reduce duplication.

Make smart use of keywords while logging issues (e.g.device/brand/OS/version/browser), either as a separate field or within the issue description.

Issue Logging5

TIPS FOR

TESTING MULTI-DEVICE eLEARNING

Request a Demo

Our Multi-device Testing Lab assures reliable eLearning testing across different browsers,

manufacturers, models and sizes, operating systems, connectivity modes & platforms.

Need help with testing your Multi-device/ Responsive eLearning?

As far as the testing process goes, it may be more efficient to first test on one desktop, one tablet in portrait view, and the smallest smartphone in

portrait view. This will allow you to validate content for all breakpoints as a first major stage of testing. It is advisable to perform this testing 100%

manually on the initial three representative devices, one device at a time.

Wait till the initial issues are fixed and re-verified before expanding to test on other combinations. Further, when testing the other combinations, it can be

more effective to go device-type-wise – for example, first test on all tablets, covering all applicable browsers and OSs in succession on each tablet; then

move on to smartphones.

Test, Test, and Re-Test4

20

TIPS FOR

DELIVERING MULTI-DEVICE eLEARNING

Not just from a technical perspective but also from a long-term maintenance

and support perspective, it is imperative that the Learning Management

Systems (LMSs) are responsive-designed. On one hand it makes it work on

multiple devices, on the other hand, development and maintenance is easier

than developing and maintaining separate versions for each device or device

sets.

Below mentioned are some tips for choosing a responsive LMS.

21

To offer a level of future-proofing, which helps improve your 'Return on Investment', look for a responsive LMS that can adapt on the fly for (almost) all of

today's gadgets as well as tomorrow's. Ensure that the LMS offers a consistent user experience and information architecture across all these devices,

making it easier for users to pick up where they left off when switching between devices. This is important for situations where your learners might start

an eLearning course on their smartphones, but come back to their desktops or notebooks to finish it later.

Select an LMS that provides a Seamless and Uniform User experience across all devices1

TIPS FOR

DELIVERING MULTI-DEVICE eLEARNING

22

Compliance training today has become a significant portion of training

that is delivered via eLearning and technology enabled learning tools.

Larger the size of the organisation, with a portion of it being mobile/out

of office, larger are the challenges faced in managing compliance

training.

A responsive LMS enables every employee to access the required

training on any device, irrespective of the time and place, thereby

increasing the training access and its completion.

Select an LMS that makes Compliance Training Programs more convenient to complete3

TIPS FOR

DELIVERING MULTI-DEVICE eLEARNING

An LMS can be true tool for performance support if it provides access information/people which/who can help 'at the moment of need'. The limiting

factor here is the connectivity on the devices. While all the information/help someone needs might be available on a central internet server, if the mobile

device cannot connect to the internet itself, then it is worthless. Responsive design not only allows LMS providers to deliver quality content to their

learners across devices, but the offline browsing capabilities of HTML5 mean that the learning resources can be easily accessed 'on the go'.

With videos and content contained in hybrid HTML5, LMSs will increasingly be used on the move and in the absence of an Internet connection.

Select an LMS that provides Performance Support2

23

TIPS FOR

DELIVERING MULTI-DEVICE eLEARNING

There is a trend to have an app for everything these days and it's quite tempting to follow the pack. But heading down that path might still not help you

achieve your goals. With Apple's iOS platform jostling with Google's Android platform for market space, it is no longer an option to solely focus on either

of these platforms if you want to reach to as many potential users as possible. Throw Windows phone and BlackBerry into the mix and you've now got

four separate mobile apps to build and maintain, even if they all serve basically the same purpose.

Select an LMS that is easy to maintain and roll out4

A responsive, web-based LMS can provide the following benefits:

Single code base

Responsive Design eliminates the need to maintain separate desktop and mobile versions of your LMS, as your single system can adapt on the fly

for any screen size. This way you can focus all your efforts on a single code base, knowing you're offering the best user experience for every user

and every device.

No need of specialised training

It is also less challenging and time consuming to roll out the LMS to your users as there is no need to have different training for different devices.

Imagine if you had to train your people on different systems? Having a single responsive system helps you to significantly cut down on your user

training efforts.

Cost-effective as compared to native apps

A responsive system is agnostic to its operating systems and devices. As a result, content publishers and LMS owners are not required to build

versions of their system for every popular device platform that they are expecting their audience are using.

Single code base is less costly to maintain as any new features or enhancements for your LMS or CMS need to be done only on one source code

as compared to doing it for every native app that you might have.

A

B

C

24

TIPS FOR

DELIVERING MULTI-DEVICE eLEARNING

A single responsive LMS means that you no longer have to track user journeys, conversion

paths, funnels and redirections between different applications. The LMS acts as a 'single

repository', tracking and reporting all activities done across devices. These analytics are then

condensed into a single report, allowing for easier monitoring and analysis.

Select an LMS that helps you consolidate your Analytics And Reporting5

Request a Demo

Our best value, responsive LMS, UpsideLMS, enables your learners

to access learning/ training material from a broad range of devices.

Looking for a Responsive LMS?

25

REFERENCES

http://www.upsidelearning.com/blog/index.php/2014/04/15/design-challenges-and-considerations-for-responsive-elearning/

http://www.upsidelearning.com/blog/index.php/2014/12/17/multi-device-elearning-testing-with-tools-and-simulators/

http://www.upsidelearning.com/blog/index.php/2014/10/28/5-key-considerations-for-multi-device-testing/

http://www.upsidelearning.com/blog/index.php/2014/12/22/top-4-ways-a-responsive-lms-improves-learning-experience/

http://www.upsidelearning.com/blog/index.php/2014/03/11/elearning-in-a-multi-device-world/

26

AUTHOR

Amit is a mobile learning aficionado. An avid learner of mobile and technology himself,

he helps organisations understand and implement mLearning. He also helps them in

taking wiser decisions in eLearning by leveraging his 13+ years experience in the

learning solutions domain.

Amit has played a key role in bringing an innovative approach to the traditional

Learning Management System (LMS) and has been instrumental in putting

UpsideLMS on the global map. Acting as a consultant for his clients, he leverages

his 12+ years of experience in the eLearning domain and helps them in

implementing LMS successfully.

Founder & Director – Technology Solutions

AMIT GARGFounder & Director – Custom Learning Solutions

AMIT GAUTAM

27

We are one of the world's leading workplace learning technology solutions companies. With a collective experience of 600+ person-years, we have

successfully completed more than 1000 corporate and academic projects. For over 10 years, our award winning solutions and services have been

helping 200+ clients from a diverse set of industries and countries manage their learning easily and effectively.

We offer –

• UpsideLMS - A best value, responsive Learning Management System

• Custom eLearning - Tailor-made solutions for desktops and laptops

• Custom mLearning - Tailor-made solutions for smartphones and tablets

• FRED - Framework for Responsive eLearning Development

• Multi-device testing lab – Testing services for responsive courseware

We have been consistently picking up awards and other recognition every year and today, boast of 30+ such awards and recognitions received

from renowned bodies in eLearning and technology. These include Brandon Hall Research, Training Industry, Chief Learning Officer (CLO),

Deloitte, Red Herring, APEX to name a few.

Learn More: www.upsidelearning.com

ABOUT UPSIDE LEARNING

28