ebook tips design testing delivering multidevice
DESCRIPTION
eBook Tips Design Testing Delivering MultideviceTRANSCRIPT
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