This guest blog was written by Sergey Snegirev, founder of BranchTrack.com, a cool online branching scenarios builder compatible with Lectora®, and owner of INTEA, an eLearning development company. If you are going to DevLearn this year, make sure you drop by the Lectora booth #239 and say hi to Sergey, who will be there from September 29 to October 1. You can also contact him at sergey@branchtrack.com.
When a client says, “We need this title to work on phones, tablets, and desktops,” it is music to my ears. Such projects require designing multiple layouts and controls, creating actions to switch between different views, and adding a lot of custom JavaScript to make it all work across various devices and browsers. For me, it all means more work and bigger budgets, which is great when you own an eLearning company. Not so great, however, if you are a corporate eLearning developer.
The upcoming Lectora Responsive Course Design™ (RCD) (now in beta) makes managing layouts for different devices much easier as well as takes care of scaling your title to fill the width of any device regardless of its physical size. However, catering to multiple devices is still a lot of work. So, I'm offering you a few tips to help you build better responsive courses, faster.
Scroll is back
Most eLearning courses I've seen were designed to fit on a single screen. However, this is not feasible with phones. Trying to fit all your content on a single screen will result in nothing but frustration for you or for the learners trying to read your content in fine print. Thanks to Facebook and just about every website in the world, contemporary phone users love scrolling for new content, so make sure your course has long vertical pages and comfortable font sizes. Lectora RCD will take care of fitting your course width and making the rest scrollable. Adapt Framework is a great example of this approach, now completely feasible with Lectora.
Avoid drag and drops
I always avoided using drag and drop exercises, as they can be challenging to non tech-savvy users (or users with disabilities) and generally don't offer much more instructional value than a set of good old multiple choice questions. With touch-screen devices entering the picture, dragging and dropping items around becomes even more of a nuisance to your learners.
Less large images, more flat shapes
Images look nice, but they don't scale too well, and cropping them to fit different screen layouts takes time. It is much easier to use flat shapes (such as Lectora shapes) that scale better and don't get distorted when you resize them. In general, flat colorful shapes are easier to manage and provide a modern look for your course. See the Lectora User Conference App for an example of simple, flat design.
Use fonts for icons
Due to their vector-based nature, fonts scale up and down perfectly on any device, so you don't have to worry about your icons becoming fuzzy and unreadable. There are dozens of icon fonts that contain pictograms for e.g. “back,” “forward,” “menu,” “glossary,” “important,” and so on. The most popular fonts are Font Awesome and IcoMoon. I've explained how you can add your own custom fonts to Lectora title in a recent blog.
Learn some JavaScript
Lectora stands out from other tools with its unique extensibility. You can add custom media players, manipulate strings, use gestures on mobile devices, change font size on the fly, and much, much more. I recommend you start with this 4-part blog series on using JQuery (a library that simplifies many JavaScript tasks) with Lectora.
Editor’s Note: Make sure you visit Sergey at the Lectora DevLearn booth and let him know how much you liked this blog post. Stay tuned for information about the upcoming RCD Beta test for Lectora desktop.
.svg)
