In 2019, more than 4.5 billion people worldwide reportedly used the internet – 11 times more than the number that used it back in 2000. This dramatic increase in users has brought with it ever-increasing numbers of internet-capable devices, platforms and browsers, leading to countless ways in which your eLearning content can be engaged with.
Making sure that your content can be viewed in an optimal manner by anyone, regardless of what they’re using, is essential for creating successful eLearning content. Because of this, cross-browser compatibility is an element that must be paid attention to. Here, we’ll take you through what you need to consider in order to achieve cross-browser compatibility, how you can test for it, and how you can avoid common issues.
What exactly is cross-browser compatibility?
To define what cross-browser compatibility is, it’s probably best to first establish what we mean by browser compatibility. Effectively, browser compatibility refers to the ability of a website’s HTML coding and scripts to be shown on a particular web browser (e.g. Firefox, Safari, Chrome, Internet Explorer). Browser cross-compatibility, then, occurs when your content can be viewed and functions the same across different browsers without any problems.
Though the benefits of your eLearning content having cross-browser compatibility might be obvious – improved reach, better performance, and so on – it is often overlooked in the web design process due to issues like time constraints. In addition, there are some other significant hurdles that must be overcome for it to work. One of these issues is if your eLearning content incorporates Adobe Flash and not HTML5.
Adobe Flash
Once upon a time, Adobe Flash was integrated into almost all eLearning platforms. Its interactive nature, smart graphics and engaging overall presentation meant that much eLearning content – and most other websites as well – basically wouldn’t work without the Flash plug-in being installed.
Though Flash’s ability to do these things never waned, a number of factors led to its gradual decline in popularity. Chief among these factors were the myriad security issues that Flash has dealt with essentially ever since its introduction. Though Adobe and other companies provided innumerable patches and updates to solve these problems over the years, the plug-in remained extremely vulnerable to hackers intent on using it to collect data and install malware on users’ computers.
When the late Steve Jobs announced that Apple’s iPhones and iPads would not support Flash, its downfall began in earnest. Flash’s cross-browser compatibility issues quickly became something that could not be solved, since Apple’s iOS platform would not host it. The ‘Death of Flash’, as it is known, thus eventually occurred in 2017, when Adobe released a statement stating that it would cease distributing and providing updates for Flash at the end of 2020. The company recommended, instead, that content creators should “migrate any existing Flash content” to new open formats such as HTML5.
HTML5
HTML5 is the current standard governing web-programming language, which determines how websites appear and function. Introduced in 2008 and updated in 2014, HTML5 has a number of benefits not provided by Flash, including much-improved security measures, support for offline access, and improved customisation.
An extremely beneficial element of HTML5 is that it, generally speaking, allows for cross-browser compatibility. Unlike Flash, HTML5 is available on almost all browsers and on mobile devices including iPhones and iPads, in addition to traditional PCs and laptops. Furthermore, it can be displayed on a variety of screen sizes without issue – if the coding behind your eLearning content is correct, updates can be implemented automatically regardless of the browser or device size/type.
However, achieving cross-browser compatibility for your eLearning content is not as easy as simply using HTML5 and hoping that it will solve every issue. If your content uses certain web design tools or innovative features, compatibility problems may crop up and require further examination.
Common cross-browser compatibility issues
Here are some of the issues that arise most frequently when it comes to cross-browser compatibility for content:
- While every browser implements certain markup standards set by the World Wide Web Consortium (W3C), how they achieve this is not always in the same way. For example – there are certain elements of JavaScript, HTML and CSS that Safari and Firefox treat differently, and deviations from these standards are also often dealt with in distinct ways.
- When it comes to graphics and other visual input, the operating system that the browser runs on can also implement these elements in different manners entirely.
- Though cross-device compatibility is generally achievable through HTML5, different screen resolutions on mobile devices, desktop PCS, laptops and tablets can impact how your eLearning content looks across different devices.
These are just a few of the variables that can lead to issues with cross-browser compatibility. Thankfully, there are a number of steps you can take to ensure that your eLearning content looks and responds in a consistent manner across different browsers and devices.
Steps you can take to improve cross-browser compatibility
Perhaps the most important step that you can take to optimise your eLearning content’s cross-browser compatibility is to check with the W3C’s Markup Validation Service. This free service checks whether your content follows the rules of HTML5, for example, and whether or not it contains errors that may prevent the content from being displayed.
Other steps that you can take include:
- Check how your content functions – It’s understandable that there might be a few bugs or issues with how your eLearning content functions at first. Seeing how it renders without JavaScript or styling being enabled can help to clarify if users can access your content successfully.
- Don’t use Flash – for reasons that have already been stated, Flash is a no-go if you want cross-browser compatible content.
- Clean up the code – If your content has clean code and doesn’t have any elements that will be interpreted differently by different browsers, it should function identically no matter the browser.
- Use a framework – A framework such as JavaScript, or a framework for styling like Bootstrap, will generally already possess cross-browser compatibility to a high degree, allowing you to execute eLearning content that is easily translatable.
- Use a framework – A framework such as JavaScript, or a framework for styling like Bootstrap, will generally already possess cross-browser compatibility to a high degree, allowing you to execute eLearning content that is easily translatable.
In fact, it’s worth extending this last bullet point into its own section.
Cross-browser compatibility testing
Manual cross-browser compatibility testing is one way in which you can minimise issues cropping up after your content is made accessible to users. However, it’s advised that you engage with one of the many cross-browser testing tools that are available so that any subtle differences across browsers can be identified and remedied.
Manual cross-browser compatibility testing is one way in which you can minimise issues cropping up after your content is made accessible to users. However, it’s advised that you engage with one of the many cross-browser testing tools that are available so that any subtle differences across browsers can be identified and remedied.
BrowserShots is a good though limited resource for this exact purpose. A free online service, it takes screenshots of a specifically requested URL across a plethora of different browsers, helping you to make sure that your content looks the same no matter what the browser is. However, BrowserShots is not ideal for measuring the functionality of your eLearning content’s more interactive elements, and so additional testing services are often necessary.
LambdaTest is another service that performs live and automated cross-browser testing on over 2000 browsers and operating systems, yet achieves this with relative speed. Mobile browsers can also be tested through this service by using an emulator, and it’s integrated with many popular bug-tracking and task management tools like Asana and Trello.
BrowserStack is a well-established cross-browser compatibility tester that offers not just fast and comprehensive testing, but excellent security as well. However, BrowserStack is not a free service and their support can, at times, prove to be lacking considering the price.
Overall, ensuring that your eLearning content is compatible across browsers is a crucial part of maximising your potential user base, as well as their satisfaction with your resources. It is especially crucial if you are building your content on programs such as Adobe Captivate (which is only compatible with IE 9, 10, or 11, Chrome 67 or later, FireFox 60 or later, and Safari 12.1.1 or later), Storyline 3 (which requires the latest version of all browsers) or Lectora (which has different feature capabilities based on your user’s browser).
