FAQ about Responsive Conversion
We’ve recently seen an increase of questions regarding what happens when a course goes through responsive conversion. Take a look at the frequently asked questions below to find out what to expect when you convert.
Why does my background look wrong?
In many non-responsive courses, a background image that is the full size of the page can be used, and all of the content items are laid out over that image. This doesn’t always look the best in a responsive title because a single background image is normally laid out for a landscape view only, and cannot be stretched into a portrait view without changing the aspect ratio of the image, creating unwanted distortion.
The responsive way to have a full size background image is to break it up into a header, a repeating body, and a footer. The header and footer would be added as images at the title level, and would be the same width as the desktop view, 1009 by default. The footer and surrounding course elements should have their positions set to “from bottom,” ensuring that they will be at the bottom of each view. The header and surrounding course elements should have their positions set to “from top,” ensuring that they will be at the top of each view.
Why are my buttons so small?
Buttons will look small because the size ratios are different in tablet and phones. A responsive design best practice is to leave enough space in between buttons that are placed in close proximity, such as the back and next buttons. You should also make the buttons large enough to be finger friendly on mobile devices. Apple’s iPhone Human Interface Guidelines recommends 44 pixels wide by 44 pixels tall.
Note: You can “override” RCD scaling and make the buttons the original size on each view. In Lectora 16, simply resize text buttons, or on the button’s Position & Size ribbon choose “Size to Image” for image fill buttons. In Lectora Online select “Reset to Original” on the Position & Size ribbon.
My original title uses a theme. Why is it not appearing properly on all views?
All of the themes have been redesigned to be responsive, but existing themes may not convert in all cases. The easy resolution is to remove the theme (i.e., select blank theme) then reselect the desired theme. The responsive version will be applied.
Note: Remember to check your page inheritance and other actions (such as hiding the Next button) with the re-applied theme in place.
Why is all my text not showing up correctly?
Text needs the ability to move and resize at will. The easiest fix is to expand the text box into available areas. Be sure to do this on the desktop view to inherit it on all other views
Why are there scroll bars in my course?
Don’t worry about your pages in mobile view having a greater height than the physical screen of the device. Mobile pages have less screen real estate, and it is natural for users to scroll the screen with a gesture to read the content. Remember that there are many, many devices out there, and they have many different sizes and aspect ratios, and you are building for all of them.
Why can’t I swipe through my course?
Converting a course to responsive doesn’t automatically enable mobile actions. You’ll need to go through and specify actions for pages and course elements. This is an optional feature that you’ll need to add using an action. Most commonly this is accomplished by adding the following Swipe actions at the title level:
- Swipe Left, Go To Next Page
- Swipe Right, Go To Previous Page
Note: Remember to disinherit the Swipe action on the page(s) where you disinherit or disable the Next or Back buttons.
Why are my images and text overlapping?
In today’s environment, you cannot guarantee which browser will be used to view the content, and text may be spaced differently within each browser, leading to the text and images not lining up. One thing that you can guarantee is that the placement of the top left of the text block will be at the position you place it.
Why won’t my audio and/or video play?
The major browsers on iOS and Android do not support the auto start option for HTML5 media, making it very difficult to have auto started audio and/or video for your content. They require a “touch” of the screen in order to begin playing any audio. Typically designers place a “Play Audio/Video” button on the page, or enable the media controller.
Note: Interestingly enough, it is only a browser restriction. If you install the Firefox browser on your Android or iOS device, you will see that audio and video will auto start on each page on a mobile device when run from Firefox.
How do you I apply actions based on a view?
Actions within RCD titles are not overridable. They apply to all views and will occur regardless of the device and orientation in which the student is viewing the content. However, you can create actions which are specific to a particular view. To do this, there is a special trigger and reserved variable: Trigger: Device Rotation Reserved Variable: CurrentView. For example, when adding a “move to” action to a title you’ll most likely have to move objects around to properly fit the device and orientation. To move the object across all devices you’ll add actions to move the arrow the designated location only if the Current view equaled one of the following options: Desktop, PhonePortrait, PhoneLandscape, TabletPortrait, TabletLandscape. Find this information at any time by viewing the description of CurrentView in the Variable Manager.
Want to know more about Responsive Course Design for Lectora?
Watch this Inspiration Wednesday Webinar: Converting a Course to be Responsive
Check out this post which includes best practices when working with RCD: Best Practices for Responsive Course Design (RCD)
Watch this video: What is Responsive Course Design (RCD)?
Download this helpful kit: Responsive Course Design Storyboarding Kit
Watch this video: Responsive Course Design in Lectora
This article last reviewed Dec, 2015. The software may have changed since the last review. Please visit our Release Notes to learn more about version updates.