8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 1/11

HTML 5  A QUICK GUIDE TO PLANNING FOR A

MULTI-DEVICE WORLD

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 2/11

HTML 5

Table of contents

01 / A quick guide to planning for a multi-device world

03 / Start an internal dialogue

03 / Take an inventory of your current content

and systems

05 / Draft a communication plan

08 / Animation on desktop... ...becomes text on phone

08 / Benefits of going RED

 Your next steps...

NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 3/11

HTML 5

 A QUICK GUIDE

TO PLANNING FOR A MULTI-DEVICE

WORLD

E-learning professionals are quickly recognizing that

the time is now to move towards delivering learning to

mobile devices. Most are wondering where to start if

they haven’t started already. The groundwork laid out

in this guide gives organizations from the old world theknowledge and know-how to step into the new world

of eLearning development and to transfer learning to

mobile devices using multiple browsers. We cover how

to properly begin an internal dialog, offer up-to-date

knowledge on taking inventory on your content and

systems, formulate questions to ask when referring to

your current LMS’ mobile compatibilities, recommend

seven tips on how to draft and communicate a plan

across your organization, and lastly suggest why your

organization should consider a responsive eLearning

framework that will allow you to create one working

version of a course across all devices.

We’ve all accepted that today’s a mobile, multi-device

world. The iPad is the best-selling personal computer

in history. Tablets and smartphones are work devices.

 Thus, for the eLearning professional, if you’ve not

changed your strategy to deliver learning to multiple

devices, the time to act is now.

 According to eLearning Guild, 70.2% of employees use

personal mobile devices for work. So it’s natural that they

would expect access to their learning on these devices.

What is your organization doing?

Here’s our short guide to developing a multi-device

eLearning plan for your business.

01NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 4/11

HTML 5

Not multi-device ready yet? You’re not alone.

In a recent Kineo survey of US clients, we found that 40.3% of organizations characterized their mobile learningstrategy as, “We’ve not started yet,” while 33.3% characterized their mobile learning strategy as, “In the early

formulation stage.”  View the breakdown in our graph provided below.

 

 You might find that reassuring – most people are still figuring this out. But that’s not particularly reassuring to learners

who expect access to learning on their devices. The technology has sufficiently matured to solve the multi-device

challenge. Here’s what you need to do to get moving.

02NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 5/11

HTML 5

 START AN INTERNAL DIALOGUEDeveloping strategies in a vacuum is a sure path to failure. Your IT department is a good place to start – they’ll be an

important ally no matter what direction you head - but don’t forget Marketing, HR, Compliance, Sales, and all the other

organizations that train, communicate, or equip significant groups of employees. Ask them what devices they are

using, what browsers they are supporting, and what changes they’ve seen in their audience and customer’s devices. It

is possible that your IT department has already arrived at a conclusion about what devices they will or will not support.

Communicate with them and understand what their opinions are about providing mobile devices to employees.

Find out their stance on supporting an

employee’s own device.

In a recent Kineo survey of US clients, we learned that 50%

of organizations are willing to support an employee’s personal

device to access eLearning. We expect that number will go upas demand from employees increases. Forbes recently reported

that 89% of corporate networks have mobile devices such as

smartphones or tablets connecting to their networks. It’s in your

best interest to find out what devices employees use and adapt

your training accordingly.

Chances are some of your IT colleagues will be ahead of you on

this journey. What’s most important is to join the conversation and

make sure the learning you create is aligned with the organization’s

needs and priorities.

TAKE INVENTORY OF YOUR CURRENTCONTENT AND SYSTEMS

 Assuming you plan to deliver training to tablets or smartphones,

you’ll need to understand how your current eLearning and LMS

will fit into this new world.

 

Content considerations to consider:

• Technology: Chances are a good percentage of your existing content is in Flash –

most of the popular tools including Articulate, Captivate and Rapid Intake output to

Flash. Flash content will not play on most tablets and smartphones.

• Screen Resolution: In the PC-only world, most of our eLearning is specified to

1024 x 768 or 800 x 600. This may be OK for most tablets, but it’s not going to

work on smartphones. It is important to note that most eLearning courses are

almost always in landscape, when the mobile web/apps are all predicated on

vertical consumption. Changing your perspective can open up new opportunities

in screen design, as you’ll see below.

03

Browsers: Every Android

tablet manufacturer comes

pre-loaded with a non-standard

browser.

 You can, however, downloadother popular browsers such

as Mozilla Firefox, Chrome,

Dolphin HD and others.

The Bad: Not every browser

supports Flash. This means

functions that work on your

desktop may not actually work

on other mobile devices.

The Good: The development of

HTML5 will allow a single

eLearning module to work on

all devices.

NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 6/11

HTML 5

 This course was developed in Lectora. The first round was for the desktop

and the second round was for the smartphone. Two rounds of development

were required for each resolution.

• Browser compatibility: If you plan to move to an

HTML5 world, you will need to upgrade browsers across

the organization. Google Chrome is your best bet and

avoid Internet Explorer, but to learn more about the top

top browsers, click here. 

 You can generally still use HTML5 and provide ‘fallbacks’ (AKA ‘shims’ or

‘polyfills’) for any browser that doesn’t support the particular HTML 5 feature

you want to use (see something like Modernizr for more info), but this is

always extra work and therefore not cost-effective.

When taking existing content and rendering it in another browser with which

it hasn’t been used before, you run the risk of something breaking. Therefore,

when considering a browser upgrade, you’ll want to test all of your existing

content before going ahead. For instance, content that has been entirely built

by Flash is not likely to have any issues, but content that is mainly or entirely

HTML will likely run into some problems. Whether they are “showstopper”

issues or not depends on how well the content was constructed.

Interestingly, Internet Explorer can render content as if it were runningin an earlier version of the browser. See documentation for the “ X-UA-

Compatible’ Meta tag” on MSDN for more info. Be aware that sometimes

this can work against you. We recently built a project that stopped

working when run from the client’s LMS on the client’s desktops. It turned out

that the copy of IE on their corporate desktops was set to run all content on

their LMS in “IE7 mode.”

•  Apps:  A number of authoring tools are making apps available to play content on

tablets and phones. As we’ve written about elsewhere, moving to Apps that are

device specific has some drawbacks. Apps have their place but they may not be

04

Click here to find out how

well your browser supports

the upcoming HTML5

standards and related

specification.

Stay Tuned: We will have

more on Authoring Tools in

our next article. In the

meantime, this link should

point you in the right

direction.

 Authoring Tools

NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 7/11

HTML 5

possible to launch from your LMS and may not be traceable. Can you live with this?

• Source Files: If part of your plan is to update or convert legacy content, you’ll need

source files. Do you have graphic files, audio files, and scripts from your existing

courses? If you don’t, and you’re not using a tool or framework, converting to HTMLusing a responsive eLearning framework like Adapt will be the most cost-effective

option. Authoring tools can help to reduce the pain if they output a version that will

work for your specific environment.

It’s not just content…

For most organizations, the LMS is the access point for eLearning. So your approach to multi-device access has to

include a hard look at your LMS’ mobile capabilities. A few questions to start asking include:

• Does your LMS require plug-ins that may not be available in mobile

browsers? (e.g. Flash, Java, etc.)

• Does your LMS offer mobile style sheets for optimal use on a mobile device?

• Does your LMS offer an app for viewing and tracking content on a mobile

device?

Chances are you won’t like all of the answers. Are the answers going to drive you to think differently about how you

provide mobile access to learning? Perhaps ultimately lead you towards a switch in LMS?

Draft and Communicate a PlanIf you don’t communicate a strategy for delivering training on tablets and smartphones, either someone else will or your

internal customers will start making their own policies. Are you ready for that? Don’t worry. Your initial plan doesn’t

have to answer every question. What’s most important is to let the organization know that you are preparing a plan.

What should you include in a plan? Here are few ideas:

Policy Statement on Mobile Devices:  Provide a narrative on what devices you will support, the

timeline for supporting them, and highlight key changes that will accompany the support. It needs to be more refined

than Bring Your Own Device. At Kineo, we work with clients to set sensible tech specs for supported mobile devices.

Communication is a key part of the project’s success.

Process Changes:  If you are developing eLearning in-house using authoring tools, your support of mobile

devices will likely have an impact on most of your core processes and metrics including:

• Development Time: If you are developing for multiple browsers and screen

resolutions, you will need more time. For example, if you are not a programmer,

creation from scratch can be slow and painful until you (or your team) can master

those skills. You also must consider distinguishing what content you make visible

on desktop vs. tablet vs. smartphone.

05NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 8/11

HTML 5

• Testing Procedures: If you are supporting multiple devices and browsers, you

will need to test on all of them. Be prepared for longer testing and debuggingperiods. We suggest allowing a full day to do your browser testing. While you can

run your code through a validator and check your modules with online emulators,

nothing really beats just having installs of all the major browsers handy on multiple

devices and actually working through the course’s functionality on all of them.

Legacy Content Strategy: Let your customers know what support you will be providing to update legacy

content – are you going to gradually migrate everything or focus on key compliance areas first? It’s sensible to think of

the must-have aspects of what you offer and ensure there are mobile versions available for key content. You may also

need to communicate a retirement policy for older content that will no longer be supported.

Changes to Your LMS: Providing access to the LMS via multiple devices is likely to involve some changeand investment. Talk to your current LMS provider and understand their stance on supporting multiple devices. Are

they there already, and if not, is it on their development roadmap – and how will they go about doing so?

Tools & Technologies:  Are you changing

authoring tools or, at a minimum, setting a standard

for the capabilities of authoring tools you will support?

 Authoring tools are changing rapidly and venders are

working hard to advance their tools. Currently, Lectora

and Articulate Storyline are HTML ready and Captivate

is pushing their HTML5 output.

Technical Specification: If working with

internal suppliers, make sure to update your technical

specification to include browsers, operating systems,

and screen resolutions.

Educate: Let your colleagues know what will

need to change to deliver eLearning for tablets and

smartphones: How we design, deliver, and update content needs to be revisited to make it truly

multi-device.

06NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 9/11

HTML 5

 A better way to do Multi-device: Responsive ELearning Design

with Adapt You might think you need multiple versions of your eLearning for each device. You could stick with Flash for desktop,

develop apps for iPhone, different versions for Android and Blackberry, and different versions for tablets and mobiles.

But once you get to translation and maintenance, that’s messy and expensive. Some of the first movers in mobile

learning did exactly this – they developed multiple versions with the best of intentions, but it’s become too complicated

for them.

One version to rule all devices: Responsive E-learning Design

We can learn from how the web has evolved. The web has changed with Responsive Web design (RWD), the idea that a

website should resize and respond to the user’s device. In essence, RWD means a website designed to work on multiple

devices through fluid proportion based grids. This means according to Wikipedia that “users across a broad range of

devices and browsers will have access to a single source of content.”

Historically, many companies developed desktop and mobile versions of their website. Increasingly, companies develop

a single version, based on RWD, that responds to the device you are on. For an example, see www.shell.com: if you

drag your window smaller on a desktop to a phone size, you will see how it responds.

We’ve extended those principles into Responsive E-learning Design (RED). Our Adapt framework makes developing

responsive e-learning cost-effective.

 A responsive eLearning framework like Adapt will enable you to create one version of a course that works across all

devices.

Kineo’s new Adapt Framework does exactly this. It’s designed to display different content elements on desktop,

smartphone and tablet. The image below shows how the same piece of eLearning can adapt and display differentlyon 3 devices:

 

With this approach, we can show different elements of content depending on the type of device and the screen size. On

a desktop, you might show a full screen animation. But on a mobile device, you might decide to simply show an image

as an alternative and have a scrolling page with text explanation. With an adaptive framework, you can provide those

alternatives within the single design:

 A new grammar for design:

With this approach, we can show different elements of content depending on the type of device and the screen size. On

a desktop, you might show a full screen animation. But on a mobile device, you might decide to simply show an image

as an alternative and have a scrolling page with text explanation. With an adaptive framework, you can provide those

alternatives within the single design:

07NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 10/11

HTML 5

 Animation on desktop...

..becomes text on phone

 A new grammar for design:

 This approach means we can think differently about e-learning design. Scrolling and non linear, non screen-based designs

open up potential – not least to banish the next and back button.

Designs can include nonlinear exploration and vertical scrolling to explore a concept and tell a story. And with the huge

improvement that HTML5 brings, the loss of Flash isn’t such an issue any more. You can rethink to shorter, deeper

 journeys of learning. This particularly suits more resource driven, curated information design – which is the direction in which

many content needs are moving anyway.

Benefits of going RED

Organizations including Barclays and Vodafone are already adopting this approach in some areas. Some strong benefits for

a RED approach are:

• One version works on multiple devices

• There’s only one version to track

• You can distribute from a single LMS – there’s no need for an app store or separate

mobile delivery channel (as long as you can access the LMS from multi-devices, of

course)

•  Accessible content – HTML is far more accessible than Flash

• Searchable content – text in Flash can’t be searched, HTML can

• It’s more cost effective because there’s only one version to maintain

• It allows sequential screening – it moves from phone to tablet to desktop, so learners

08NEXT BACK MENU

8/10/2019 HTML5 Planning for Multi-Device

http://slidepdf.com/reader/full/html5-planning-for-multi-device 11/11

HTML 5

 Your next steps

Want to take mobile learning forward in your organization? Here are some steps you can take:

• Join the eLearning Professionals Group on LinkedIn to keep in

contact with colleagues.

• Download the Kineo Top Tips app to stay updated on mobile learning design

(and lots more), available on iTunes.

• Get in contact with us; we’d love to help you make multi-device learning

happen for your organization , as we’ve done for some of the world’s leadingorganizations:

• Contact Kineo US: info@kineo.com –Tel: +1 888 414 5888

or

• Contact Kineo UK (Head Office):

enquiries@kineo.com – Tel: +44 (0)1273 76 4070

•

In addition to looking after the main @kineo twitter account, our Brighton teamalso looks after the @kineolearning, @kineodevelopers and @kineotechnical 

accounts.

NEXT BACK MENU