We’ve previously written about Adapt, Evolve, gomo, Elucidat, Captivate 9, Lectora 16, and Articulate 360 – Rise, and have also published a feature-wise comparison of all these tools.

Lumesse CourseBuilder
Lumesse CourseBuilder is an online, paid tool for building desktop-first responsive eLearning content. It offers significant control over course structure and navigation. It provides five views and allows you to design only the largest and the smallest of these, with content for in-between views being automatically adjusted. CourseBuilder also lets you create multi-SCO courses as well as multi-lingual SCOs with language selection screens.

Features:
Structure: CourseBuilder has a five-level structure: At the topmost level is the course. A course can consist of one or more modules. Each module contains folders. You can create pages either within folders or directly under the module. At the lowest level of the structure are the elements and components that you use to display interactive and non-interactive content on a page.

Folders: CourseBuilder allows you to create (nested) folders within a module to help with content organization, sequencing, and branching. Folder types include:

1. Branch Folder – You can use Branch folders to organize content into continuous paths based on branching logic, and to create adaptive content flows depending on filter criteria.
2. Page Branch Folder – You can use a Page Branch folder to create a circular sub-section of content with its own landing page. Single pages inside a sub-section will return the learner to the landing page. If you link from the landing page to a folder containing multiple pages, then the last page from that set will link back to the landing page.
3. Random Folder – You can use Random folders to create question pools and draw a certain number of questions at random from the pool.
4. Quiz Folder – You can insert one or more Quizzes anywhere within a module, so you can use the Quiz folder for both knowledge tests as well as for end-of-module assessments. You can nest Random folders within a Quiz folder if you wish to draw your quiz questions at random from one or more pools. A Quiz folder can also contain “normal” pages – for example, scenarios for questions to follow.
5. Multipart Quiz Folder – You can set up a multipart quiz where each part has different scoring criteria. You need to add one Quiz folder for each part of the multipart quiz. These Quiz folders can contain Random folders. In order to pass a multipart quiz, the learner must pass all of its sub-parts. The aggregate score will be reported to the LMS.

Flow View:

CourseBuilder’s Flow View acts as a canvas where you get a visual view of your module structure and flow. You can drag and drop folders and pages to build or change the structure and sequence. You can also enter Editor View for specific pages by simply double-clicking on the page. Once in Edit mode, you can add elements and interactive components to the page and configure them as desired. A breadcrumb menu allows you to go back up the path to the main module flow view.

View Modes: CourseBuilder provides 5 breakpoints or view modes: desktop, tablet landscape and portrait, and mobile landscape and portrait.

You can follow CourseBuilder’s recommendation and manually design only for the two extreme modes – desktop and mobile portrait. The other in-between views will be automatically adjusted. Or you can choose to manually adjust your page layouts for all five view modes.

Skinning: CourseBuilder offers a set of default skins. These can be customized based on your requirements using CourseBuilder’s built-in Skin Editor. For example, you can choose which controls to include; set their position – which can be different for each view mode; and modify colors. You can also use custom buttons in place of the default ones.

The skin height and width for each view mode can also be changed depending on your set of target devices.

Modified skins can be saved for use in different modules and courses.

Page Layouts: The Editor View for a page is a WYSIWYG view. You can add content elements onto the page and set their relative positioning. You can then use the view mode icons to see and optimize the layouts for different screen sizes. In the mobile portrait view mode specifically, you can select the auto-layout option and CourseBuilder automatically creates a one column scrollable layout. If further adjustments are required, they can be manually done.

Content Elements:

• Text, Visuals, and Animations: CourseBuilder allows you to place text, static images, shapes, Flash animations, and HTML animations onto pages.
• Video: CourseBuilder supports .mp4 video files. You can also embed YouTube and Vimeo videos directly onto a page.
• Audio: CourseBuilder allows you to upload audio files in .mp3 format. You can also upload .wav or .ogg formats and they will be automatically converted to .mp3 files.
  You can also use the CBVoice feature to generate machine audio from text and the same text can serve as a transcript. There are many male and female voice types available to choose from, as well as different accents. (Note: CBVoice is an add-on product, and you need a CBVoice license to use this feature.)
• Interactive Tasks: CourseBuilder comes with a set of pre-defined interactive tasks through which you can add different interactivity/question types like matching, fill in the blanks, sorting, multiple choice, drag and drop, etc.
  Since some of these tasks (like drag and drop) might not work seamlessly on mobiles, CourseBuilder offers an adaptive option that changes the behavior of the component to work better in mobile portrait mode.
  When interactive tasks are included in Quizzes, you can assign different points to different options, thereby setting up a graded, as opposed to a binary, system.
• Simulations: CourseBuilder SnapIt allows you to capture screens to integrate software simulations. Capturing can be done either automatically or manually. Simulations can then be created in three types of modes, namely Show Me, Guide Me, and Test Me. (CourseBuilder SnapIt can be downloaded for free directly from your Home tab in CourseBuilder.) The simulations work well on desktops, laptops, and large tablets.

Animation Effects:

CourseBuilder allows you to add predefined transition effects – such as slide, bounce, flip, etc. – to images, text, and other elements on a page. You can also control the animation speed using the duration property. You can also animate the elements themselves, including movement, scaling, rotation, etc. If you add animations inside a MovieClip, you can play those in loops.

Fonts: CourseBuilder has its own (default) fonts for each skin. You can also upload custom fonts in formats like EOT (IE and Edge), OTF, TTF, WOFF, WOFF2, and SVG (Safari). These custom fonts can be used when customizing the skin and/or for page level content.

Triggers and Actions:allows you to use trigger points and actions to build custom interactivities. Any folder/page/element can be assigned a trigger/action.

Steps:You can use Steps to build the content on a page in a particular sequence. Steps act as timelines and each Step can contain one or more content elements. If your module contains audio, you can use Steps to achieve loose audio synching.

Search:CourseBuilder includes a search feature, which lets you search based on specific keywords. All pages containing the search keywords are listed as a dropdown menu from where you can directly jump to any particular page.

Branching and Filtration: CourseBuilder allows you to create complex nested branching through the use of the folders described above and/or using “Skip” conditions. You can also filter content, for example, by giving learners a selection (e.g. role, department, skill level) at the beginning of the module. Based on their selection, only certain parts of the content would be shown. CourseBuilder also allows you to create adaptive paths through a module based on pre-assessment results.

Media Library:CourseBuilder allows you to upload, tag, and manage images and graphics (e.g. .png, .jpg, .gif, .svg), audio files, videos, and documents (e.g. .docx, .pdf, .xlsx, .pptx) in a searchable global library. This library can be accessed from all modules. Updating a resource in the library automatically updates any linked instances in all or selected modules.

Navigation:CourseBuilder allows you to set either free or restricted navigation between pages. Navigation between pages is through Forward/Back functions, while content within a page is scrollable on smaller devices.

Menu:CourseBuilder allows you to create menus with any number of levels. You can include or exclude individual pages or folders from the menu. You can also choose to exclude a folder but still include all or selected pages from inside that folder into the menu. The only exception is the Random folder – questions inside a Random folder cannot be included into the menu.

Accessibility:CourseBuilder implements accessibility conforming to the WAI-ARIA specification. It automatically sets tab indexes and supports predefined keyboard shortcuts. It allows you to add ‘alt’ texts for images and other graphical shapes, and subtitles for videos, to be read by screen readers.

Multilingual Support: CourseBuilder allows you to create content in different languages. Once you create the Master Language version, you can export it into XLIFF format, then replace the text with text in a different language. You can then re-import the XLIFF into the module, and a new language version will automatically be created. CourseBuilder also supports exporting “changes only” to XLIFF. Only new or changed text from the Master Language version will be exported, and you can translate and then re-import it into a different language version.

You can also switch languages in the Editor View and change texts in the different language versions.

CourseBuilder supports publishing multiple language versions as a single-SCO/ a multi-SCO course, where learners can select the language they want to use.

Collaboration: CourseBuilder lets you assign different roles to users at course level. This allows users to co-author courses and also facilitates review.

Once you start a “Review Session” for a course, you can send an email with a link to the course to all those assigned “Reviewer” roles for that course. Reviewers and developers can add comments synchronously in a common review table. Developers also receive real-time notification of such comments.

Standards Compliance: CourseBuilder currently creates SCORM 1.2-, SCORM 2004-, and AICC-compliant output that can be distributed through LMSs. It also provides an option to publish courses directly to PENS -compatible LMSs using a PENS  profile. This requires you to set up a PENS profile connecting CourseBuilder to the LMS.

Packaging and Publishing: CourseBuilder courses can contain one or more modules. Each module is equivalent to a SCO. If the course has only one module, CourseBuilder considers it as a single-SCO course. If the course contains multiple modules, then CourseBuilder automatically packages it as a multi-SCO course. In both cases, the published output is in the form of a Zip file.

Import/Export:Courses can be exported as Zip files and then re-imported for editing and further development. Modules can also be archived (online and/or offline). Archived versions contain all information (including QA information etc) contained in the modules at the time of archiving.

Offline Access: CourseBuilder is an online authoring tool. It currently does not come with any other ecosystem components like an LRS or an offline player. So while content can be viewed when offline, learners must be online for any data to be tracked.

For offline viewing, CourseBuilder does give you an option to create a standalone package that can be run from a web server or LAN/CD-ROM/hard drive as an .exe file. When offline, data can be tracked locally across sessions; however, it cannot be sent to the LMS.

Observations/Limitations:

• CourseBuilder is suitable for text-based courses and courses with loose synching between audio and content. Since you can include multiple audio files onto one page, each associated with different steps, it’s easier to synch audio in different languages. You just swap in the step file in the different language, thereby avoiding the need to work with cue points or events each time. If you need to create content, which is closely synched with audio, you create them as animations and import them into CourseBuilder.
• The breadcrumb feature makes it easy to know where you are in the module structure and navigate between levels.
• The inbuilt CBVoice feature can come in handy when creating quick prototypes.
• The facility to import and export courses lets you to share courses between accounts, allowing for better client-vendor communication and project management.
• Both single- and multi-SCO output can be created. Modules can be reused/ recombined into different courses – either by copying or by linking them to multiple courses.
• If you have multiple media elements in one Step or page, the video currently being played needs to be manually stopped before playing the next one, i.e. the CourseBuilder player doesn’t automatically stop the current file when the next one begins playing.
• The SnapIt tool makes it easy to record simulations in different sizes. You can include simulations in three modes on larger devices; however, these will not display well on smaller devices.
• There is no support for dynamic linking of Google fonts.
• There is no live preview. Every time you add to or change the content, you need to regenerate the course preview. This increases development time.
• CourseBuilder currently doesn’t include any default Glossary or Resources features at Skin level. Resources can be included at module level by adding a custom button to the Skin and displaying a Document List when it is clicked.
• The current version does not include any gamification features.
• The current version does not support xAPI.

Platform Support:CourseBuilder version 8.3 output works on following devices:

Desktop Platforms:

• Microsoft IE 9, 10, 11
• Microsoft Edge
• Firefox 40 (or later)
• Google Chrome 40 (or later)
• Safari 8 (or later)
• Opera 32*

Mobile Platforms:

Android 4.1 or later:

• Chrome 45 (or later)
• Firefox*
• Opera*

iOS8 or later:

• Mobile Safari
• Chrome

Win8 PRO / Windows 10 (Intel-based tablets):

• Microsoft IE10, 11
• Microsoft Edge
• Chrome
• Firefox*
• Opera*

* Not fully tested, but expected to work.

Conclusion:

CourseBuilder works well for creating both simple and complex eLearning courses. It offers a high degree of control over the module structure, including branching and displaying content based on filters.

CourseBuilder allows you to define different content and behaviors for each of its five views, which means you can better optimize experiences for different devices. The WYSIWYG Editor View helps to visualize page layouts as you work, and the ability to select views in which to preview courses is a very useful feature.

CourseBuilder allows you to put together multipart quizzes, with questions for each part drawn at random from separate question pools.

By allowing separate audio files to be associated with each step, CourseBuilder makes it easy to sync content in different language versions. It also supports exporting “changes only” to XLIFF, allowing you to easily update content in different language versions.

With CourseBuilder, you can create single- or multi-SCO courses. You can also create a multi-lingual module as a single SCO with a language selection option at the beginning.

Next, we’ll be updating our comparative summary to include CourseBuilder, so watch this space.

The post Authoring Tool/Framework Selection for Responsive eLearning Development: CourseBuilder first appeared on The Upside Learning Blog.

So, what do we mean by Responsive eLearning?

Responsive eLearning is eLearning designed and build in a way that it works well on all sorts of devices by responding to the screen size of the device on that it is being viewed. It does so through user agents and media queries. Critical to note is that the idea of responsive eLearning is to ensure that the content is presented in the most user friendly way on all target devices. To achieve that, the content needs to be restructured and laid out differently on the screen.

Here’s an example

As you can notice the layout changes completely, navigation panel is modified and placed at different location, image size, representation is different (and scaled appropriately), and text is readable on all devices.

And what is not Responsive eLearning?

Some eLearning developers are publishing Flash eLearning as videos (so that it works on iPads and mobile devices) and make it scale to device size. So, on smaller phones it does ‘work’ (technically i.e.) but can the learner really see or read anything in that video on a small device? I doubt.

Some eLearning authoring tools make the navigation responsive while the course is not. So when you view a course on a smaller device the navigation readjusts to screen size but the course simply scales down.

These are definitely not responsive eLearning and you should stay away from it. When looking for responsive eLearning, just remember scaling is not responsive.

A quick word on Videos

While I do agree videos are naturally responsive and we can use them as responsive eLearning medium. However, for that you need to shoot/create the videos appropriately keeping in mind their usability, even when it scales down on smaller devices. This video is a good example of one created to play on all devices.

The post What is Responsive eLearning? first appeared on The Upside Learning Blog.

Our take from the event is ‘Everyone Loves Responsive’. Most of the conversations that we had were centered around the Multi Device Universe and how to best cater to the ever changing needs of the end users who want to access the learning & training whenever they want, and on whichever device they want. More and more organisations are now looking forward to meet this demand and now have to either convert their existing content and platform to a responsive one or create a responsive learning approach from scratch.

Upside Learning has been in the forefront of the Responsive learning era. We have been helping clients with their requisites of being as responsive as the needs of their end users, and we have the right tools and services to help anyone and everyone who now wants to take the responsive path.

With UpsideLMS, winner of 17 awards and recognitions, equipped with 160+ features, accessible from your favourite device, FRED, our own Framework for Responsive eLearning Development, a Silver award winner for Best Advance in Unique Learning Technology at Brandon Hall Awards, and our Multi Device Testing Lab, that helps to deliver high-quality learning projects that run consistently across devices and operating systems, Upside is ready to meet the high expectation of your’s and your learners, and also to ensure that your organisation only delivers the best learning experience through the best tools and services.

The post LT15 Event Experience – ‘Everyone Loves Responsive’ first appeared on The Upside Learning Blog.

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 gradually shifted its base to tablets and smart phones, now evolving into 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!

Amazed? Wait till you see what we have lined up for you at Learning Technologies 2015.

1. Multi-device eLearning Products and Solutions on Display

With clients in over 13 countries and over 30 awards, including the 2013 “eLearning Team of The Year” award from E-Learning Age, we provide the right solutions for learning in today’s multi-device world. At our stand 146, we will be showcasing:

• UpsideLMS, our best value, Responsive Learning Management System – Come, attend a free demo
• Framework for Responsive eLearning Development (FRED), enabling faster and more reliable development of Responsive eLearning. Check out some courses developed using FRED
• Multi-device Testing Lab, for thorough testing of Multi-device eLearning projects

Feel free to interact with the team at the Upside Learning’s stand who will be more than happy to understand your business needs and provide you with tailor-made solutions

2. Learning Sessions

Learning Technologies 2015 offers a wide range of free L&D seminars and exhibitions. Amit Garg, will be presenting two learning sessions –

• Learning in the Multi-device world at Learning Technologies, 28th January 2015, 11:00 AM at Theatre 3
  From the telegraph to the smartphone, there has been a massive change in technological advancements. Today, a person uses an average of 2.9 devices and research predicts that this will go up to 5.2 by 2017! This brings with it a need to create, test and deliver learning resources across a multitude of devices, platforms and browsers. Learn about the various challenges and solutions of delivering learning in the Multi-device world.
• The why and how of moving your eLearning to HTML at Learning and Skills, 29th January 2015, 2:15 PM at Theatre 8
  Flash, which was widely used for designing and developing eLearning, has seen a sharp decline over the past couple of years. A few reasons are the rise of smartphones and Flash’s incompatibility with them, and the dawning of the Multi-device world.

  In making eLearning truly accessible, L&D professionals are now starting to feel the need to move towards HTML. But how can you move your eLearning, both existing and new, to HTML? We explain this in our session.

3. Meet and Greet

Take this opportunity to have your learning technology related queries answered by our experts at Stand #146.

We have been rated as the No. 1 company “to have had the most profitable conversation with” by visitors and delegates at Learning Technologies 2014 and also as the 5th company (of the 250+ there) whose material they remembered putting into their show bags! Need we say more?

To book a session with us, mail us at uk.sales@upsidelearning

The post It’s a Multi-device World at Learning Technologies 2015 first appeared on The Upside Learning Blog.

Responsive (multi-device) eLearning is the next big thing in the world of eLearning. We have written about why it matters and creating responsive eLearning responsibly in our earlier blog posts. While Responsive eLearning is not rocket science, it requires some amount of understanding of it as a concept, its need, features and benefits. Also, like any other approach, it comes with its own set of planning, design, development and testing considerations and guidelines. Learn about it all in our FREE eBook – Responsive eLearning Design & Development.

Key topics covered in the eBook:
1. Understanding Responsive eLearning Design
2. Determining Responsive eLearning Design Strategy
3. Challenges and Solutions

Please download your copy now. Hope you enjoy reading it.

Feel free to tweet about it, share it on Facebook, email it and share it with your friends and colleagues.

The post Responsive eLearning Design & Development – eBook first appeared on The Upside Learning Blog.

In previous blog posts, we’ve talked about what is responsive eLearning design and why it matters. Based on our experiences creating several responsive eLearning projects over the last 2 years, we had also listed the design challenges and considerations that can come up while creating responsive courses.

From a project management viewpoint, delivering the right quality within the estimated time frame and budget is obviously always the aim. With a responsive eLearning project, some additional considerations can arise with regard to best practices, process, framework, and even managing client expectations. Based on our experience in managing responsive eLearning projects (ReLP) so far, we’ve identified 5 key areas where a slightly different or additional focus may be needed to reduce risks associated with scoping, budgeting, and scheduling.

1. Decide on Content Treatment

When it comes to responsive eLearning, it is a common perception that content needs to be repurposed or shrunk to fit on small screens. However, from a learning viewpoint, this may not always be the best solution. Before you really decide on any specific content treatment or approach, it is important to understand the nature of the content and the overall learning outcomes, as well as the context in which learning material will be accessed.

Sometimes, it may not be possible to effectively display all content on a smaller screen by simply shrinking or resizing it. It is important to identify such content in the initial analysis and scoping stage, to work out alternative approaches.

Examples of such content might be:

• Application simulations [Guided and Practice Modes]
• Complex technical diagrams
• Animated stories/scenarios where you need to see details of the environment or objects or where there is important text within the animation
• Exploratory inter activities where you need to identify or locate areas to explore (visual hotspots)

2. Consider Offline Delivery

Considering that ReLPs are targeted for mobile devices, chances are some of your learners would want to access that elearning offline. You have two approaches here:

1. Mobile/Offline Player – In this case, learners will initially need Internet access to download the Mobile Player app along with the course content onto their device. Once downloaded, they can view the content offline. They will again need Internet access for receiving any updates to existing courses or to download new courses, and also to exchange tracking data with the LMS/LRS.
2. Course as an app – In this case, the learner will again need an Internet connection for downloading the course app for the first time and then for any updates to the same course thereafter. This approach will be useful only if you have a very few courses to deliver on mobile. Else, one would prefer a Mobile/Offline Player approach.

Here are some parameters, which we think are important to be considered while deciding the delivery medium for responsive eLearning courses:

3. List Target Devices

Before beginning a responsive eLearning project, it is important to get clarity on the targeted primary and secondary devices. This will help determine whether to go with a desktop first or a mobile first approach, and the design and development approach can then be aligned accordingly.

In fact, listing target devices will further help you with:

1. Working out the specifications for your framework and templates
2. Deciding the test strategy and accordingly determining a more accurate testing schedule and effort
3. Procuring the required set of devices in advance (while simulators and emulators help to a certain extent, they may not necessarily give 100% accurate results)

4. Be Prepared for an Iterative Process

The responsive eLearning development process is dynamic and iterative in nature. You will need more consultation/discussion especially during the design and prototype phases. Hence it is important to budget efforts and also commit any timelines accordingly.

We’ve included an overview of the process that we’ve been using for ReLP so far. Stages where we found ourselves going through more iteration loops are marked with blue dotted lines.

5. Set Client Expectations

A responsive development approach will take longer and thus cost more upfront than what the client may be used to (as compared to traditional eLearning). Therefore it is very important to note that if managed properly, a responsive approach can save a lot of effort and cost on maintaining multiple versions across devices in the long run.

1. It’s also important to specify the set of devices/OSs/browsers on which the eLearning will work and highlight the instances where alternative treatments or functionalities will need to be implemented, for example modifying functionality where a particular property or feature is not supported by a lower version of a browser
2. Explain that while responsive eLearning design – and the associated technology – is still evolving, it can still provide a more future friendly approach as long as upcoming technology and browsers follow HTML 5 guidelines.

While responsive eLearning projects have certainly thrown up some new challenges for us, we have been successful in implementing and delivering the right solutions to our clients by using our in-house Framework for Responsive eLearning Development (FRED) and following some of the responsive eLearning project management practices mentioned above.

The post 5 Key Guidelines for Managing Responsive eLearning Projects first appeared on The Upside Learning Blog.

To meet this multi-device usage and expectation, we now have to design and deliver our materials across different devices, operating systems, browsers, screen sizes and resolutions. And not only does it need to work, it needs to display correctly to ensure an optimal user experience. This is complex, challenging and critically requires time and effort! So how do you meet this expectation? The answer is through responsive design.

Responsive e-learning Design is:

• Material and resources delivered from one source to multiple devices in a consistent manner
• Content responding to or moulding itself to devices’ dimensions
• Content changing its form or getting layered where required for a better user experience

Why is it important?

• An increasingly mobile workforce requires and demands flexibility and convenience
• Content must be available at the point-of-need and in context of usage
• Usage trends that span PCs to tablets and smartphones
• Adoption of BYOD, which has increased variety of mobile devices that require e-learning must support

A responsive  framework  lends itself to the design and development of a single design that is compatible across all possible user devices, enabling learners to access content from the device of their choice. In many cases, this covers the possibility of allowing learners to continue their learning experience while switching between devices based on their points of access and context of usage. The requirement for responsive e-learning development, however, is not really met by any of the popular authoring tools at the moment. Consequently, creating truly responsive e-learning is time consuming and expensive.

Framework for Responsive e-learning Development (FRED) enables faster and more reliable development of Responsive e-learning. It has been in the making for over 12 months and is a product of Upside Learning’s numerous HTML5 and Responsive e-learning programmes conducted over the last two years. The Framework shares our knowledge and experience with others to help meet e-learning challenges. As believers in the mantra ‘Keep Learning’, sharing our work ensures that we keep learning too! Here are some of the key challenges and resolutions of the responsive framework.

Browser-OS-Device Combinations

The first challenge was quite simply in the sheer number of operating systems and browsers; it was still important to try to narrow the range and specifically identify the primary devices and configurations to target.

Multiple devices mean various browsers. Each browser sends information called a ‘user-agent string’ – about itself and the device it is running on. We therefore needed to provide for every individual ‘user-agent string’ to ensure it displayed content accordingly. It didn’t end there! Browsers can interpret and render content in a slightly different manner, this required different coding for every browser to ensure their behaviour was correct and accurate.

The lower versions of Internet Explorer presented their own set of challenges. Last heard, Microsoft plans to phase out IE6 soon and usage of IE7and IE8 is also declining, leaving IE8 as one of the more prevalent browsers. But the problem here is that IE8 doesn’t support HTML5. So once detected, we needed to ensure that alternative treatments and solutions (or fallbacks) were defined. Using a mix of HTML4 and HTML5 to create FRED permitted us to create Responsive e-learning that is supported on lower browser versions too. We decided to put a system check into place that tells the user if their browser does or does not meet the minimum requirements. If it doesn’t, the e-learning simply won’t run and you end up with a sub-optimal learning experience.

We found that testing Responsive e-learning was a far more complex and intricate activity. This is because all the targeted combinations or devices need to be tested, which makes the whole process time-consuming and expensive! In fact we can go as far as saying that the testing stage can be the trickiest as attention to detail is absolutely pivotal in recognising even the most minute discrepancies or errors.

Usability

Two things that came up here are touch friendliness and navigation. Tablets and smartphones are touch devices, so we needed to ensure that interactive elements were both large enough and far enough apart to be comfortably selected. With touch devices, possibilities for gestural navigation also arose. So, in addition to providing buttons, we coded in support for a swipe gesture on tablets and smartphones.

We also needed to decide how to handle the global navigation as device size reduced. Since all navigation controls weren’t required for smaller devices, we chose to implement a responsive menu where controls get grouped and positioned based on device size. So controls are hidden or displayed based on device or OS – for example, most of us are used to using our tablet or phone’s audio controls, so audio controls were not included in the menu on mobile phones and tablets.

The other consideration was usability and the readability of text. Text size varies based on device resolution – the higher the resolution, the smaller the text. We found that a font size of 16 pixels seemed the best option across all devices and actually laid out the devices and checked.

Content Display

In Responsive e-learning, the treatment  of content is transformed based on the device size and browser. So an Instructional Designer needs to think how to best alter treatments while ensuring that meaning and relationships between content elements don’t change across layouts, a consistent look and feel is retained and a user-friendly experience is guaranteed. In other words, we need to structure and visualize content accordingly. When rearranging content, we needed to be quite careful when handling images. There were a couple of options we came across here:

• • The first option was to scale down the image and possibly not to display it below a particular size
  • The second option was to reduce the image by cropping
  • And of course the third option is a combination of the two – so we cropped and scaled dynamically!

While transforming content treatment for smaller devices, what we had to keep in mind was the layering of interactivities for smaller devices.

While transforming content treatment  for smaller devices, we had to keep in mind the layering of interactivities for smaller devices. We limited the layers of interactivity to one or two on the larger devices to ensure that navigation did not get too complex on the smaller displays. This meant that while the first level of chunking was done for desktops, there was an additional level of chunking required for smaller versions.

Chunking and the organisation of content could be looked at in two different ways, depending on how comfortable the target group of learners is with scrolling content. If the e-learning is being created for just tablets and smartphones, then you could have bigger chunks of content that scroll on devices. Since we knew one of our primary devices was desktop, we went in for a desktop first approach and tried to avoid scrolling content.

The other thing to be wary of is that not everything is suited to a small device – application simulations, large complex technical diagrams, animated stories or scenarios. That type of content can be difficult to present effectively on a small device. As a part of the content analysis and design, it’s important to be able to identify such content and think of alternative approaches. And/or to even question whether the content should be included in the mobile version!

These were just some of the challenges and considerations we thought worthwhile listing. Responsive design can be complex and somewhat daunting but we hope you find these pointers useful and informative. We anticipate that growth of the adoption and usage of tablets and mobile learning in the coming year will be huge; and therefore the considerations for the demand and use of responsive e-learning will grow exponentially.

We hope this has made it easier for you to consider where and when to use ‘responsive’ design to make your eLearning user and device friendly in the multi device world we live in!

This article was originally published in Inside Learning Technologies & Skills May 2014 Issue

The post Challenges of Responsive eLearning Development first appeared on The Upside Learning Blog.

Therefore, as eLearning designers, how do we ensure that we create visuals that communicate effectively on all display sizes? How do we design to deliver user-friendly learning experiences on multiple devices? The answer is responsive design – unless you want to develop a different version for every target device and browser combination. However, responsive design is not straightforward and can pose challenges to beginners in this field.

Based on our experiences creating several responsive eLearning projects over the last 2 years, I have listed some key design challenges and considerations that can come up related to layouts; font selection; images, graphics, and animations; and interactive and navigation elements.

1. Designing Layouts Based on Breakpoints

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.

2. Selecting the Right Font

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.

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 Fluid Grids, where he explains the logic behind this unit.

Type

Another point to consider is font type. Serif fonts are more difficult to read on digital devices, so it is recommended to select a sans serif font. Jessica Hische recommends the Il1 test to check readability of sans serif fonts: see how well an uppercase “I”, a lowercase “l”, and a “1” are differentiable.

When using sans serif fonts, we also recommend avoiding italicized 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 Web-safe font.

Here are some Google Font Combinations; 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!]

3. Handling Images/Graphics and Animations

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:

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.

1. Scaling – 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.

2. Cropping – 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.

3. Combination – A third option is to combine both the above approaches to dynamically crop and then scale images depending on device size.

Images can be dynamically scaled and/or cropped using CSS.

SVGs 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 Swiffy.

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 caniuse.com.

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.

Icon 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 color 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 color – 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.

Sprite 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 dimension and file size limitations depending on the resolution and the RAM size of the device on which they are displayed. You can read more about sprite sheets here.

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

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

Flash 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.

4. Handling Interactive and Navigation Elements

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:

Ensure the interactive areas (buttons, hotspots, links, etc) are large and spaced out enough to be comfortably “touched”. As per Fitt’s Law, 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.

Apple recommends that touch targets should be at least 44 x 44 px; both Android and Microsoft 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 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 recognize where interactivities are available.

To conclude:

Once you are done with designing and the designs have been integrated into HTML, take a quick look at them in the responsive view mode of a browser – for example, Mozilla Firefox and Google Chrome have this feature. You can get a rough idea of how the designs look on different device sizes (including intermediate sizes) from the point of view of visual consistency, look and feel, and layouts.

If you’d like to know how to use browser responsive modes, you can view the following videos: Firefox Responsive Mode and Chrome Responsive Mode.

The post Design Challenges and Considerations for Responsive eLearning first appeared on The Upside Learning Blog.

Ah but there’s a new wrinkle here, the need for learners to access PS on their own device – whether it be iPad, iPhone, Android, Blackberry, etc. A reality that has achieved acronym status “BYOD” or Bring Your Own Device. BYOD matters greatly to organizations as it is a cost effective approach to delivering PS to an increasingly busy workforce.

Which begs the million dollar question, “How to create learning content that is compelling, yet plays on virtually any media device?”  A bit of a puzzler that has slowed the tipping point for mobile learning. The answer quite simply is ‘Responsive eLearning Design“.

Responsive eLearning Design means:

• Learning & PS interventions delivered from one source to multiple devices with no content loss
• Content responds to or molds itself to devices’ dimensions and rearranges itself according
• Content changes its form or gets layered where required for a better user experience

Why it matters:

• 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 smart phones
• Myriad 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

Upside has spent extensive time thinking of how to help our clients address this issue. And the solution arrived at is “FRED” – Framework for Responsive eLearning Development.

Upcoming Events

The post Responsive eLearning Design – Why It Matters first appeared on The Upside Learning Blog.

In line with Google’s report on our evolving usage patterns of multiple devices, there is a growing demand for responsive eLearning development. Organizations want to create once and deliver everywhere, enabling learners to access content from the device of their choice. In some cases there is even the possibility of allowing learners to continue their learning experience from one device to another as they switch between devices based on different times or contexts. This requirement for responsive eLearning development, however, is not met by any of the popular tools at the moment. Consequently creating responsive eLearning is relatively time consuming and costly.

The solution: FRED – Framework for Responsive eLearning Development. FRED is a framework developed by Upside Learning’s Custom Learning Solutions team to enable faster and more reliable development of responsive eLearning. FRED has been in the making for over 12 months and imbibes our learning from numerous HTML5 and responsive eLearning programs done over the last two years. I believe FRED will deliver the twin advantages of reliability and speed to our clients looking for responsive eLearning solutions.

FRED’s key features are:

1. Multi-device support
2. Multiple delivery options
3. Template library
4. Multimedia support
5. Responsive menu
6. Multi-lingual support
7. Learning standards compliance
8. Accessibility support
9. Social media integration
10. Developer aids

If you’re attending the Learning Technologies show in London later this month or LearnTec in Germany in the first week of February, our team will be more than happy to talk about FRED in more detail at our stalls.

Meanwhile, you can learn more about FRED here – https://www.upsidelearning.com/pressrelease/upside-learning-launches-responsive-elearning-development-framework/

Upcoming Webinar

The post FRED – Responsive eLearning Made Easy first appeared on The Upside Learning Blog.