Create Responsive Learning, Engage Mobile Users

Editor's Notes

• #3: Thanks and hello and welcome everyone! Ramon - as we suspected, and based on the turn out today, there is a tremendous amount of interest in the Learning and Development community around Responsive Design. Why is that? Because… if we can produce responsive learning content for our blended programs, we can provide learning content at the moment of need, any time, anywhere and on any device. And… we can stop creating multiple versions of the same content for different devices, causing us maintenance headaches and reducing our process capability. We are very happy to be here with you today. If you don’t know Xyleme, we have been a leader in standards-based learning solutions for many years. We have a proven Learning Content Management System, and are passionate about personalizing the learning experience! Mobile access to learning is one key aspect of personalization. By the end of our session today, you should have a good understanding of what Responsive Design is and how it relates to learning. We will talk about both formal and informal learning content and why it is important that your strategy for responsive mobile content must include both. We will examine the factors that are stopping you from producing responsive learning today, and how to address them. And if you haven’t considered single-source authoring and publishing yet, we will offer some insights in to why you should.
• #4: Responsive Design is a Powerful New Design Paradigm. Well, Responsive Web Design is not exactly new however our latest web technologies have made it far easier to accomplish today. Largely, we are using the same technologies today as we did 20 years ago – HTML, CSS and JavaScript, however like everything else – they have evolved. Responsive Design really came into it’s own around 2010. RWD – Responsive design is not just about scaling the content to fit the device, or adding horizontal and vertical scroll bars. It is much more than that and by the end of this session, you will be able to spot a responsive website. In addition, you will walk away with some ideas on how to better support your companies mobile initiatives in 2014 and future-proof your learning content.
• #5: Let’s take a look at a example. Fluid Layouts Flexible Media Adaptive Accessible Device-appropriate
• #7: It is more than just scaling as I said. It is like designing a flexible grid system so things can scale, shift, move and even disappear depending on the characteristics of the device. These include screen size, resolution, and also touch vs. mouse. So responsive means: Fluid Layouts Flexible media – which means that the best image, or image size is rendered for the device. Adaptive – which especially applies to things like font size, navigation presentation, etc. Accessible in some form on any device, 508 compliant Device-appropriate is similar to what we have done with our m. sites. We have simply removed content or features that did not make sense for the device. So by now you realize that scaling is part of responsiveness, but it is not scaling the whole experience. It is smart scaling specified for each element on the page individually. We will not get into the mechanics of this, but the general approach is to design the adaptive behaviors using CSS media queries.
• #8: Just a bit about the technology that makes responsive design possible…. And why a modern browser will be important to properly render a responsive website. As I said, largely the key technologies are the same – HTML, CSS etc. These were around back when we only had 1M Internet users, as compared to today where we are nearing 3B Internet users and 1 Billion internet enabled phones. Whew! The HTML standard itself is now on version 5. It is a continuous work in progress. CSS3 and HTML5 together make it possible to create fluid designs, to handle media well on any device, and to detect what type of device is being used to render the content on at any given moment in time. Hence the modern browsers. The browser manufacturers need to keep pace with the standards at the same rate as the development community. A modern browser from a web developers perspective would be described as “any browser that: successfully renders a site that you just built using web standards, testing only in your browser of choice along the way, with all the essentials functioning well; without you having written any browser-specific hacks, forks or workarounds; and shows great performance as you navigate it.” From our IT departments perspective, they might describe it by Browser version number. IE9 and above, Firefox 21 and above, Chrome So one barrier to producing responsive web design, could be the target audience browser version. We have little control over this, and some companies are still standardizing on an older browser, and if hesitant to upgrade, that can be a problem.
• #9: <Monica> So what do people like to do on their phones? I know there is research that says that not everyone wants to take e-learning on their smart phones, however I have 2 teenaged kids, and they do absolutely everything on their smart phones, including class assignments, reading, socializing. With them I will say it is all to do with convenience. They will use whatever device is convenient to read, write, complete an online math assignment, submit a paper through a plagiarism checker, email a teacher, etc. Relaxing and socializing are their favorite activities on their phone and they use a number of sites that I am not that interested in. Richard Culatta (Director OET | Office of Educational Technology) tweated this the other day, and it seriously helped me a lot to explain the appeal of some of the sites/apps they use. This is an aside, but I thought you might enjoy it.
• #10: <Monica> Thank Ramon for sharing that. As we look at the barriers to producing responsive learning, we have to consider the tools that are used to create, manage and publish content. You may use any or all of these tools in your learning departments today. Mobile Device Support from popular tools Output from all three of the popular authoring tools can run on Tablets. It is my understanding that Articulate Storyline publishes output only for I-pads while Lectora and Captivate support I-pads as well as Android tablets and smart phones. Lectora can also publish output for I-phone. Unfortunately none of these tools are capable of providing responsive/adaptive output. The primary target device is still desktop OR tablets. This means that you will need to maintain and deploy multiple versions of the same content for different outputs. The desktop and creative tools are primarily for creating rich text, images and videos. Full blown LCMSs provide a set of capabilities around managing lots of content, typically in a collaborative way, and can produce many outputs from the same content. Xyleme of course does this extremely well and has Responsive output as Ramon has demonstrated. I can’t speak authoritatively for the other LCMSs.
• #11: On the flip side, the tools used today for creating responsive web sites (not specific to learning) include the same desktop and creative apps, and add another set for writing good HTML, CSS and JavaScript. You may or may not have these available in your learning department today.
• #12: What does your Learning Dream team look like?
• #13: Single Source authoring, like what you do with Xyleme LCMS is a little different than authoring learning in Storyline. Because the content and the presentation are separated, the experience design really happens in the output templates. One of our customers explained it this way. They used to have 4 out of 400 designers that were extremely good at the visual and experience design. Once they switched to single source authoring and publishing with Xyleme, and after setting up their output templates, 400 out 400 Instructional designers could produce the same level of quality. Offline Viewing There is limited support for offine play and tracking using these tools as well. ------- Storyline provides a mobile player for viewing courses offline on iPads. This player also allows you to update and track data from offline usage once you get back online. You just need to ensure that the course is published for Tin Can (and not SCORM/AICC) if you want any offline data tracking. If you are viewing the course in a browser, which necessitates staying online, then publishing for SCORM/AICC works well. Lectora does not have an offline player and neither does it support packaging and delivery of content output as hybrid application. The only option for viewing material published in Lectora on mobile platforms is through a browser while staying online. While Captivate does not have an offline player, it allows you to publish the course as an app to multiple mobile platforms including Windows® RT (Metro apps), using the Adobe PhoneGap™ service (requires separate purchase of PhoneGap). Non-LMS Tracking If you do not have an LMS but still need tracking, Captivate could be a good option as it allows custom tracking using Adobe Connect or FTP. With Articulate Storyline or Lectora you will necessarily need an LMS to track user data.
• #14: <Ramon> Any organization that is serious about adding mobile delivery to their offering needs to devise a content strategy keeping the following in mind: Single-Source of content – keeping content output agnostic and separate from presentation. Granularity – storing the content in granular lego blocks that can be reused and reassemble to allow learners to consume the content they way they want. Increase your content IQ by making it flexible. Publish to Many Outputs – Make the same content available across any print, web or mobile output without having to reauthor it. And use responsive output templates for producing your web outputs which will let learners consume the content on any device.
• #15: <Monica> By separating content from presentation, you can create a responsive “skin” for your web based output and elearning, to allow you to publish in one step.
• #16: Like this with the Xyleme LCMS.
• #17: When looking for a solution, basic tailoring of the Skins must be straightforward. You should be able to change the logo, color and fonts without technical knowledge of the underlying CSS . However if you do know CSS and HTML, you will want complete control over the style, layout and HTML behaviors of the responsive rendering templates. This gives you best of both worlds.