Transcription
A MobileWorld NeedsResponsiveCourseDesignAn eBook by Trivantis
2016 Trivantis Corporation. All rights reserved.Trivantis Corporation311 Elm StreetSuite #200Cincinnati, OH 45202Trivantis.comInfo@Trivantis.com 1 (877) 929.0188This is a free eBook. You may view, download, print, andreproduce the contents in unaltered form for personal,non-commercial use or use within your organization. All otherrights are reserved.Trivantis and Lectora are registered trademarks of TrivantisCorporation. Responsive Course Design is a trademark of TrivantisCorporation. All other names are trademarks of their respectiveowners.
TABLE OF CONTENTSWhat is Responsive Design? 5Best Practices for Developing With Responsive Course Design 14Summary 25
WHAT ISRESPONSIVEDESIGN?
Responsive Design is an approach to creating content that allows for an optimaluser experience across a wide variety of devices, including phones, tablets,and desktop devices. The content should be usable across these devices witha minimum of zooming or panning, allowing the user to get the best contentexperience available on each device.Web designer Ethan Marcotte is widely credited for coining the phrase “ResponsiveWeb Design” in his 2010 article for A List Apart. (1) His article defined ResponsiveWeb Design as featuring fluid grids, flexible images, and media queries that identifydevice types and resolutions.Today there are many Responsive Design solutions on the market, from JavaScriptlibraries for programmers, to end user authoring products. Each of these operateson the same core principle described by Ethan Marcotte—the content is laid out ona fluid grid which responds to the width of the device that the content is viewedon. As the view area gets smaller, the grid collapses, and content is repositioned toallow for viewing without the need to scroll the content horizontally or zoom. Mostend user focused tools use device width-based “breakpoints” at which a new layoutwill be used to format the content.1. Ethan Marcotte. A List Apart. “Responsive Web Design”. 1 August 2016. n
ISSUES WITH CURRENTRESPONSIVE DESIGN SOLUTIONSIt seems that every new device that comes on the market has a new screenresolution or physical size. With that comes corresponding changes in the CSSpixel count, which is the logical size of the device that web pages are rendered into.Because of this varying pixel count, it becomes quite complex to know exactly howyour content will be rendered on any particular device. You would need to test yourcontent on every device that your users may have in order to definitively know howyour content would lay out on each device.“When will the madness stop?” asked a 2011 Smashing Magazine article by KaylaKnight. “It won’t, of course.” (1)“In the field of Web design and development, we’re quickly getting to the point ofbeing unable to keep up with the endless new resolutions and devices. For manywebsites, creating a website version for each resolution and new device would beimpossible, or at least impractical. Should we just suffer the consequences of losingvisitors from one device, for the benefit of gaining visitors from another? Or is thereanother option?” Knight asked.Responsive web design was that other option back in 2011. However, if you usea width-based breakpoint to define content for a tablet—as most responsivesolutions do—what happens when the newest phone has a logical screen width thatis the same as the tablet? The view you intended for a tablet is used on a phone,even if the screen on that phone is too small to render it properly. As technologyprogresses, this problem will occur more often.The problem gets worse when you consider that eLearning content is quite a bitmore dependent on the relative position of objects than a typical website. If youhave a character pointing out which bolt to turn on the new widget that yourcourse is describing, it doesn’t help to have those objects be repositioned when thecontent is viewed on a phone, or when the phone is rotated between landscape andportrait modes.1. Kayla Knight. Smashing Magazine. “Responsive Web Design: What It Is And How To Use It.” 1 August 2016. s-for-responsive-web-design/6A Mobile World Needs Repsonsive Course Design
Meet your newfavorite cloudauthoring tool.Try it free today.A Mobile World Needs Repsonsive Course Design7
Should we just give up and not create mobile learning content? According to researchdone by Towards Maturity—that’s not an option. Take a look at these stats: (1) 57% of learners like to be able to access learning on the go 42% respond to alerts as soon as they come in 37% are accessing work-related resources while they are traveling—only 18% arenow learning at their work desksSo if we need to create mobile learning, but using width-based breakpoints isn’t theideal solution, how can we do it?1. Towards Maturity. “In-Focus: Learning and Performance on the Move April 2016 report.”8A Mobile World Needs Repsonsive Course Design
THE SOLUTION: RESPONSIVECOURSE DESIGN IN LECTORAFor an mLearning course, what we really want to know is how the course will lookon a phone, a tablet, and on a desktop. We also need to consider landscape andportrait modes for the phone and tablet. The solution is to design for device typeand orientation, instead of screen width. This gives us 5 possible views to designfor: Desktop Tablet Landscape Tablet Portrait Phone Landscape Phone PortraitUsing Lectora authoring tool’s Responsive Course Design (RCD), you onlyneed to design once, in the desktop view. Content will be automatically sizedand positioned on other views. Each view can then be tailored as necessary toaccommodate the unique needs of that view, and changes in each view will bepropogated using the inheritance model shown in the figure below:A Mobile World Needs Repsonsive Course Design9
Changes at the desktop level will be propagated down to all of the other views.Changes made at the tablet level will not affect the desktop view, but will bepropagated to the phone views. Changes at the phone views will only affect therespective phone views.Mobile views (tablet and phone) will scale the content to fit the exact width of thescreen, with vertical scrolling if the content is taller than the screen height. Thisallows you to have designs in which you will always know exactly how the contentwill be rendered on each device. Content laid out for the phone will look the sameon every phone, regardless of the resolution of the screen on that phone.LET’S TAKE A LOOK AT HOW ASAMPLE COURSE WOULD BE LAIDOUT ON SEVERAL DEVICES.On a laptop, which would correspond to the desktop view, you have lots of roomto work with, so you could have many options for the user that could includethings such as rollovers, which only make sense in the context of a laptop/desktopexperience.10A Mobile World Needs Repsonsive Course Design
When viewing the same course on a phone, your display area is greatly reduced, soyou need to consider the content that is added. For a landscape view, the viewablearea is wide but not tall. In this case, removing some of the extra navigation buttonsand reducing the image sizes still allows for a good course experience, giving theuser all of the information he or she needs.A phone in portrait viewis generally the mostchallenging device viewto design for. In thiscase we have elongatedthe text block, andwrapped it aroundthe images, while alsooverlapping the twoimages a bit more.Again, this gives us allof the information, ina format that is easilyusable on the phone’sviewing area.A Mobile World Needs Repsonsive Course Design11
Lectora manages this through a unique methodology we call Responsive CourseDesign. The Lectora interface has been enhanced with a Responsive Bar at the topof the work area. This allows you to switch between device views within the title.Working within the main view, you build your content just like you always have withLectora. You can then switch to other views to see how your content is laid out.If anything needs adjusting between views, it’s as simple as moving and sizing asnecessary. For example, to remove the buttons from the landscape phone view asshown in the images above, just drag the buttons off the view:With Lectora’s Responsive Course Design,each view can have its own layout, and asingle publish will produce best-in-classHTML output optimized for viewing on alldevices and orientations. It’s amulti-device world we live in, andTrivantis is bringing you the tools youneed to produce eLearning content forall of them. With Lectora, you can trulypublish once, and distribute everywhere.12A Mobile World Needs Repsonsive Course Design
GNWhen it comes to creating content using ResponsiveCourse Design (RCD), there are a few best practices tokeep in mind.A Mobile World Needs Repsonsive Course Design13
DESKTOP FIRSTYou’ve probably seen articles on Responsive Web Design advocating that youshould “design for mobile first.” However, for RCD, we use inheritance from thedesktop view to populate the mobile views, so you should always design for thedesktop first. Content that you place in the desktop view will be automaticallyresponsively positioned and sized for the other views—landscape and portrait onmobile devices. When you work with the mobile views, it will be much easier toremove or reposition content that might not be as important to the information youare trying to convey on that page.It’s important to do as much of your work as you can from the desktop, and let theinheritance do the work for you. That way, any changes or updates you make to thedesktop view are carried over to the mobile views without any tweaking necessary.START AT THE TOP!When converting a non-responsive title to RCD, or even starting a new RCDtitle from scratch, it’s important to set up all of your title level navigation andbackground images first on the desktop, and then make sure everything is workingon all of the mobile views, before filling in all of your content. That way, you knowhow much room you will have to work with, and how things will be laid out on eachof the pages.14A Mobile World Needs Repsonsive Course Design
THEMESUsing one of the prebuilt themes within Lectora, or creating your own, is a greatway to get a head start in creating new content. Each of the themes has alreadybeen designed with navigation, headers, and footers specifically designed with RCDin mind, so you know that you will get a smooth working design in each responsiveview without having to put in a lot of effort to get started.PAGE LAYOUTSPage layouts have been greatly improved with the RCD release of Lectora. Eachlayout now has specific layout properties for all five views within an RCD title. So,you can use one of the prebuilt layouts, or create your own custom layout andknow that your content will flow correctly in each view without having to switch toeach view to check it.A Mobile World Needs Repsonsive Course Design15
BACKGROUND IMAGESIn many non-responsive courses, a background image can be used that is the fullsize of the page, and all of the content items are laid out over that image. This isan issue in a responsive title in that a single background image is normally laid outfor a landscape view only, and cannot be stretched into a portrait view withoutchanging the aspect ratio of the image, creating unwanted distortion. Lectora willautomatically scale the background image to the mobile views, while maintainingthe aspect ratio of the image, which will not cover the entire screen.The responsive way to have a full size background image is to break it up into aheader, a repeating body, and a footer. The header and footer would be added asimages at the title level, and would be the same width as the desktop view, 1009by default. The footer should have its position set to “from bottom,” ensuring thatit will be at the bottom of each view. The repeating background would be set asthe background image of the page, and would also be the width of the desktopview, but a small height. Lectora willautomatically repeat the backgroundimage to fill the whole page. You’ll seemany examples of this in the themesthat Lectora provides. Let’s take a lookat an example of a static backgroundimage, and how that would beconverted.Let’s say we have a title with the imageto the right as its background:For a non-responsive desktop course meant to always be viewed in landscapemode, it would be perfectly fine as a single background image. It won’t, however,translate well to responsive views, especially portrait views, which will have greatlyvarying page heights, and therefore greatly varying aspect ratios. So we break it upinto three distinct images:A header:A repeating middle section:and a footer:16A Mobile World Needs Repsonsive Course Design
Create mobile-readyeLearning anywhere.Try Lectora Online FreeA Mobile World Needs Repsonsive Course Design17
OFFSET FROM BOTTOMLectora has always had the “Offset from Bottom” option on the position and sizetab for all objects, but it takes on new importance for RCD. An object’s “Y” positionis normally determined by how far the top corner of the object is from the topof the page it is on. When “Offset from Bottom” is selected on the position andsize tab, an object’s “Y” position is determined by how far the top of the object isfrom the bottom of the page it is on. This is especially useful when the page sizevaries from view to view, the object will always be at the same place relative to thebottom of the page.So all bottom navigation and footer objects should have the “Offset from Bottom”option set on their position and size tab. A good rule of thumb is that if it is at thebottom of the page, it should have the “Offset from Bottom” option set. You canlook at any of the included Lectora themes, and note that all objects in the footerarea have the option set.18A Mobile World Needs Repsonsive Course Design
JUST SAY NO TO OVERLAYINGIMAGE OBJECTS ON TEXT BLOCKSWhen creating a page in Lectora, it may seem easy to line up several images withina text block by just leaving spaces in the text block and putting image objects overthe blank areas within the text. This could work if you only had a single browser toproduce output for. However, in today’s environment, you cannot guarantee whichbrowser will be used to view the content, and text may be spaced differently withineach browser, leading to the text and images not lining up.In an RCD environment, it would be impossible to line up an image object over aspace in a text block, as text block heights are changed and text is reflowed withinthe text block between views. And your content will be displayed in a great varietyof browsers and devices, which will certainly display the text differently. So whatcan you do when you have text and images that need to line up?One thing that you can guarantee is that the placement of the top left of the textblock will be at the position you place it at. So for instance, if you have a text blockwith three paragraphs set up, and an image that is supposed to line up with eachparagraph like this:A Mobile World Needs Repsonsive Course Design19
You could break the paragraph up and line each image up with a unique text blocklike the following:This will ensure that the top of each text block will line up with the top of eachimage.But what if you have small images that need to be inline with text? You can actuallyinsert the image into the text so that it will flow with the text. Just right click onthe point in the text block where you want to insert the image and select “Insert Image” from the menu, as shown below:This provides another method of including images aligned with text, by placing theitems in a table and including the images in the table, like the following:20A Mobile World Needs Repsonsive Course Design
WRAPPED TEXT IS YOUR FRIENDAnother option that has been in Lectora for quite some time, but becomes moreimportant with RCD, is the “Wrap Text” option in the text properties. Checking thisoption will cause the text to automatically flow around any image placed on topof the text block in the layering order. Images behind the text block in the layeringorder will not cause the text to reflow.This can be a huge benefit when creating responsive titles, as the text will naturallyflow around the image as it is resized in each view, as shown below:A Mobile World Needs Repsonsive Course Design21
THE END OF FLASHResponsive Design inherently means your title will be running on mobile devices,so any title produced for RCD should not contain Flash, as it will not have runtimesupport on these devices. For better or worse, Flash is completely unsupported onmobile devices, and so your content should not rely on it.There are free utilities available on the web that you can use to convert somesimple Flash to HTML5, and then use the produced HTML in a Web Window withinLectora. Try out Swiffy at https://developers.google.com/swiffy/. It works very wellat converting simple animation to HTML5, and may be all you need for your project.The Easy Way to Go MobileMeet Lectora with Responsive Course Design.Try It Free22A Mobile World Needs Repsonsive Course Design
AUDIO/VIDEO WILL NOT AUTOSTART ON MOBILEThe major browsers on iOS and Android do not support the auto start option forHTML5 media, making it very difficult to have auto started audio and/or video foryour content. They require a “touch” of the screen in order to begin playing anyaudio. Interestingly enough, it is only a browser restriction. If you install the Firefoxbrowser on your Android or iOS device, you will see that audio and video will autostart on each page on a mobile device when run from Firefox. Unfortunately, youwill not know what browser your user will have, so you need to keep this restrictionin mind when developing responsive courses.Any “On Click” action (which equates to a touch on mobile), or a controller view,will be able to start media on a mobile device. So, when designing your page withmedia, look for a way to include a click to start it. That simple interaction can havethe added benefit of keeping your users engaged with the content rather than justhaving it “auto played” to them.LONGER PAGES, VERTICALSCROLLING ON MOBILEDon’t worry about your pages in mobile view having a greater height than thephysical screen of the device. Mobile pages have less screen real estate, andit is natural for users to scroll the screen with a gesture to read the content. Itis absolutely how a responsively designed page should work in a mobile view.Remember that there are many, many devices out there, and they have manydifferent sizes and aspect ratios, and you are building for all of them.Much of our content in static page design has been built around exact size pages,fitting to a pre built theme height. In RCD, you can use all of the features of RCDsuch as “Offset from Bottom” and repeating background images so that you canuse a designed background, but still allow the page to flow to its natural height,including all the information you need to, without feeling the need to cram it all intoa predefined space.A Mobile World Needs Repsonsive Course Design23
SUMMARY24A Mobile World Needs Repsonsive Course Design
Mobile learning is here to stay. However, it doesn’t need to intimidate you. Justfollow these best practices, and you’ll be well on your way to creating greatmLearning.We hope you enjoyed this eBook! Special thanks goes to John Blackmon, ChiefTechnology Officer at Trivantis, for contributing his responsive design knowledgeto this eBook. For more great eLearning content or to sign up for a free trial ofLectora with Responsive Course Design, check out Trivantis.com.A Mobile World Needs Repsonsive Course Design25
Web designer Ethan Marcotte is widely credited for coining the phrase “Responsive Web Design” in his 2010 article for A List Apart. (1) His article defined Responsive Web Design as featuring fluid grids, flexible images, and
