Testing For Cross Browser Compatible Web App using Joomla

A web developer’s life would have been much simpler If everyone used the same browser. This is a dream that will never happen. With 6 major browsers, covering a huge usage share and many small browsers maintaining their own space in different platforms, we cannot design a webpage for any specific browser and leave the others out. Add in the complexity of users coming from mobile devices of different screen sizes and operating system, you get a really complex problem.

Cross browser compatibility makes sure that the developed webpage looks same in every browser on every device. Since a website’s visitor base consists of people using different browsers, no specific browser cannot be left out. In the following article, we shall deep dive into creating a website using Joomla, one of the most used free CMS (content management system) after wordpress, allowing developers to create and manage a website dynamically.

How to Make the App Using Joomla

Creating a standalone application using Joomla is very easy. No advanced knowledge of web development is needed. All you need is a PHP enabled environment and internet access. Let’s go through the procedure step by step.

• Download the platform from GitHub ().
• The platform will be downloaded in zip format, extract it in your system.
• Create a project folder and using your preferred editor, code what you desire in your application and name the file to example.php format.
• Using the command line interface, navigate to the folder and execute the application with php example.php command
• You have just made your first Joomla platform application.
• For complex applications, you have to follow the same procedure, create separate components and integrate together to form a complete application.

Testing Cross Browser Compatibility of a Joomla App

The real challenge begins once your application is ready. You need to keep the mobile first approach in mind and test the application on popular browsers in Android as well as iOS.

• Run it on all major browsers like Chrome, Firefox, IE and Safari and check whether it is displayed properly, or any breakage is occurring.
• When using desktop, use the developer tool and emulate commonly used desktop resolutions like 1024X768, 1920X1080, 2k, 4k etc.
• For mobile browser testing, you can use an emulator or test directly on the devices.
• No matter how perfectly developed your application is, like all other applications, it will cause some breakage, either in UI or in functionality in a few browsers.
• Debug the CSS and try to find out where the breakage is occurring. Use vendor specific CSS or browser specific media query to fix the issue.
• If old version of Joomla is installed in the system of the developer it should be upgraded, since the new version supports all major browsers.

Common Cross Browser Issues in Joomla

No matter how perfect your Joomla template is, issues will always be there. Let’s discuss few issues faced by developers while working on a Joomla template and how to fix them.

• Responsiveness – Since new devices are arriving in the market almost every day, each with their own sets of browsers, it is not possible for a Joomla template to work in every browser or devices. It will definitely cause responsive issue in one or few of the devices.

  Fix – Proper device testing should be performed, especially in the devices that are mostly used by the end users. Any kind of breakage in responsiveness of the template can be fixed by writing appropriate media queries.

• Browser Support – The latest release, i.e. Joomla CMS 3.x supports Chrome XY, Firefox 13, IE 8, Safari 5.1 and their newer versions. If the end user is using any other browsers or lower versions of the supported browser, the template may not get rendered as expected

  Fix – If any new CSS3 style tags are used that are not supported by a specific browser, vendor prefix should be added. If “browser not defined” error is found, it means that the version of Joomla installed in the system is old and it does not support new browsers. In that case, migration to the latest version is recommended.

• IE Bug – One of the major browsers used in today’s world is the Internet Explorer. And unfortunately, the older versions of IE do not support many latest web technologies and certain new style tags. If the developer is unlucky, they may find that a specific functionality or style is not working or getting rendered at all in the targeted version of IE that may be used by the end user.

  Fix – If the template is well developed, it should contain scripts for evaluating the template in all browsers. But often, certain free templates do not contain IE scripts. Especially if you are developing the template yourself, a little chance is there that you may have missed it. In case the IE script is not there, it can be obtained from any premium templates or by copying the CSS fix by inspecting a premium template with developer tools

When you want to host a large amount of content and you have a very short time to develop a fully responsive cross browser compatible website, it is better to go for a platform offering content management system. And if you want an open source platform that offers thousands of templates, most of which are supported by all devices and browser compatible, Joomla is obviously the best choice for you.

With all that said, testing across all browsers and browser versions is not that easy especially if you don’t have large number of different devices in-house. Here, LambdaTest can help. At LambdaTest you get access to 1400+ browsers and browser versions where you can test your website for cross browser compatibility. Get started!

Happy Testing!

Arnab Roy Chowdhury

Arnab Roy Chowdhury is a UI developer by profession and a blogging enthusiast. He has been writing content for about 5 years and has strong expertise in technical blogs, travelogues, and content in the latest programming languages.

See author's profile