It’s Monday.
You’ve decided to stop by the coffee shop on your way into work. As you’re waiting in line, you notice the woman in front of you using her mobile device to pay for her cappuccino.
Then, you realize the couple behind you is there to pick up muffins and drinks for their office. They laugh about how nice it is to order from an app. Now instead of a notepad, they track everyone’s order in the phone. (Even Ted’s venti coconut milk mocha frap with double shot espresso and light ice…).
At the table next to you, a man is taking a live French class through a video service on his iPad.
Nowadays, mobile devices play a huge role in our daily lives. For many, it would be difficult to leave the house without one. In 2015, Google even started to reward sites with mobile-optimized designs by giving them higher rankings in their searches.
With more and more reasons to design for mobile, many eLearning solutions have started the shift to two major design types: mobile-friendly, and responsive.
So, what’s the difference between the two? Let’s take a look.
Mobile-Friendly
Have you ever found a website on your computer, only to open it later on your phone and see that it’s…tiny? It has the same layout as the desktop website, it’s just smaller. Welcome to mobile-friendly design!
Mobile-friendly design is often considered the bare minimum. That isn’t to say it’s bad. This is a design strategy that prioritizes speed and creation ease over an optimized user experience.
If you design your eLearning to fit a computer screen and publish it in HTML5 it should work on most mobile devices. Meaning the content will play on the device, at its regular size. That can lead to scrolling and zooming. So, it’s mobile, but not mobile-friendly. These days, many eLearning authoring tools also have a “scale” or “fit” setting. That’s what makes the content mobile-friendly. If you turn that on, the eLearning will shrink down to the size of the learner’s mobile device. No scrolling or zooming needed. But that resizing can also lead to awkward menu and button placement, clickables that are too small, etc.
Mobile-friendly eLearning might not be as user-friendly as the desktop version, but everything important is there. Your design will still look familiar, instead of the way a device makes it look. And it usually just takes a few button clicks in the project’s publish settings.
Simply put: mobile-friendly designs are general fixes, but much better than nothing!
Mobile Responsive
On the other hand, mobile-responsive designs are going to be a cut above. Everything that’s responsive is also mobile-friendly, but not everything that’s mobile-friendly is responsive. This is a design strategy that prioritizes an optimized user experience over speed and creation ease.
Platforms like Knowledge Direct 7 use responsive design because the resulting eLearning works well on ANY device. Responsive content does more than just scale to fit any size screen. It transforms. The visual design on a smartphone can look completely different from the computer version, but they’re controlled by the same code or file. This is good if you want one master design that can be used anywhere, from tiny smartphones to huge monitors.
Basically, responsive design “looks” at the size of the screen and the objects that are supposed to go on it. Then it re-works the whole screen to improve the user experience. For example, “If the screen is or is larger than 768×627, put the navigation menu at the top. If it’s smaller than 768×627, put the navigation menu at the bottom.”
This sounds great, you’re probably saying, so what’s the catch? Time and budget. To make your learning responsive, it takes more time to build and test. You’ll also need specialized tools, programs, or custom from-scratch coding to get the job done. Because of that, it’ll often cost a bit more than mobile-friendly would.
So, which mobile strategy is best for my course?
Ok, you’ve read the bullet points. You’ve been successfully convinced that mobile design is important. So, which design strategy is best?
There are a few things to think about…
Who are your users? How will they be accessing the content?
If you think your learners will mostly be using your course from the on-site company training PCs, then you probably don’t need a responsive strategy. And older versions of Internet Explorer have trouble processing responsive content. However, if your users will be accessing the course from anywhere, at any time, it might be worth it to make sure it’s optimized on all devices.
Can your course layout be rearranged?
If something moves because of the screen size, will that ruin the content? If so, you’re probably better off with mobile-friendly. But if location isn’t important, as long as everything looks good and works well, then feel free to consider responsive design.
What’s the purpose of your content?
Is your eLearning highly interactive? Are your learners in a situation where it’s VERY IMPORTANT for them to pass a course? What if they can’t click the submit button because the hotspot is too small for their device? It might be worth investing in a responsive design to avoid those panicked phone calls. If it’s mostly just reading or watching a video, mobile-friendly should do the job.
In the end, it’s up to you which strategy best suits your content. Either strategy will improve the usability of your course on mobile devices.
And hey, maybe next time you open a site from your phone, you’ll appreciate the hard work that went into designing that mobile experience just for you.
