With the help of beautiful design and professional layout, you can create truly beautiful and multifunctional sites. Nature loves diversity, and this also applies to modern websites. If you are developing websites, you most likely know that the process of developing a modern website does not end after its design and layout. Among other things, there is also a very different testing: code validity, usability, support for various devices, browser compatibility, etc.
In this article, we will pay more attention to cross browser compatibility (website compatibility with various modern browsers). Why is it needed? The short answer is this: if you do not pay attention to this issue, you can lose thousands of potential visitors to your site. Cross browser compatibility testing is an important part of website development.
What is cross browser compatibility testing
Cross browser check for compatibility is, in short, a test of how all your web pages look when viewed in different browsers, for example, Chrome, Firefox, Safari, or Internet Explorer. Even if you did not know that almost all browsers give your site a different look, alas, it is the truth, and only through website browser testing can this be detected and corrected. Of course, it is impossible to adapt the site to absolutely all browsers but you can start with the ones that most of your users use. You can find this out, for example, from Google Analytics statistics. However, it is highly recommended to adapt your site not only to the most widely used browsers but also to old web browsers.
Why is cross browser testing important
Modern Internet users have a wide selection of browsers. If you do not run website browser testing as well as change the layout and styles for the most popular browsers, you will simply lose many potential visitors, because for them your site will be inaccessible or simply difficult to view. The same applies to mobile layout or in other words website optimization for mobile devices.
What are the main engines used in different browsers?
Blink is owned by Google, has an open-source code, and is a part of the Chromium project. It is used in the following browsers, namely Chrome, Opera, Yandex, Vivaldi, etc. Many large companies are working on the development of this engine, including Opera, Intel, IBM, Yandex, Vivaldi, and others.
WebKit is owned by Apple, has an open-source code, and is used in the Safari browser. Namely, this engine was used by Google in its Chrome browser from 2008 to 2013.
Gecko is owned by Mozilla, has an open-source code, and is used in Firefox and Tor Browser.
EdgeHTML is owned by Microsoft, has closed source code, and is used in the Edge browser. It replaced the Trident engine (formerly used in the Internet Explorer), with the launch of Windows 10, and works only on this operating system.
And the very problem of the different web site layout is that different engines perceive and process some HTML-tags and CSS-styles, as well as the contents of the tags themselves. For example, the Edge browser highlights all phone numbers and adds its own styles.
What can affect the difficulty of viewing your site?
There are a number of difficulties that users may have when visiting your site. Due to a large number of variables including those that do not depend on you, each visitor will probably see your site a little differently than you wanted. Here are the main elements that can cause problems with the display of the site:
- User hardware: graphics card installed in the computer, color settings, and screen resolution used by the visitor.
- Software: used operating system and installed fonts.
- Old web browsers versions. Some visitors may not update their browsers for a very long time, and this may cause browser compatibility conflicts when viewing your site (especially if it is made using the most modern technologies).
Why some people still use Internet Explorer
- Not everyone is aware that there are faster and more convenient browsers for surfing the Internet;
- Individual users are simply accustomed to Internet Explorer and are afraid to try something else, believing that this may violate the stability of the system;
- Many companies have corporate protection against installing third-party programs, so you have to use the browser that is integrated into Windows by default;
- There are also ardent fans of Microsoft products, who basically use only their software and do not want to consider alternatives.
Now imagine that your web site looks like there was an explosion of a bomb in the Internet Explorer. That is why, in order not to lose those who can buy or order something from you in the future, it is worth making the site cross browser designed for users of all popular web browsers.
What is crossbrowser compatibility of a site and how to achieve it
Cross browser compatibility is the same display and operation of a site in various browsers. If you do not take into consideration this issue at the stage of layout, then when you create a site, you will see that it is displayed differently and not correctly in different browsers. Okay, let’s try to figure out the reason for the cross browser issues. Everything is very simple. The reason is that browsers use different engines. The browser engine is engaged in loading, processing, displaying, and calculating data. Despite a large number of different browsers nowadays, if we analyze them according to the engines they use, we will face the following result, namely that there are not so many engines since creating your own engine is a very time-consuming task.
Why is it necessary for any site to be cross browser compatible
According to the research, each web browser has a specific target audience. For example, Chrome is mainly used by young people, whereas the Internet Explorer and Opera are mainly used by the older generation over 35, Mozilla Firefox is mainly used by techies, and Safari is mainly used by Mac OS users.
If you do not adapt the layout of your site for different browsers, then there is a risk of losing some visitors, each of which could become a potential client. Just admit that this is not an option for business because leaving of any buyer means a probable loss of profit. In addition, if a site visitor spends less than 15 seconds on it, search engines consider such behavior as a failure. And the more failures, the lower will be the site’s position in the same Yandex or Google, and it will be difficult for customers to find a resource. And even if the site owner has taken into account all browsers, except Internet Explorer, whose developers do not particularly adhere to generally accepted layout standards, the owner still risks losing part of the interested audience that uses this browser.
What are the peculiarities of a cross browser
Problems with cross browser compatibility arise due to various algorithms for processing cascading style sheets (CSS) and site source code (HTML) by different browsers. In order to achieve crossbrowser compatibility, you will need to use not only standard CSS tools but also a whole host of special CSS selectors designed for individual browsers.
There are many smart ways to achieve the desired page display even on completely old web browsers but you should only use them if a large percentage of site visitors are still using these outdated browsers.
How to make the cross browser compatible site?
There are several working methods with which you can achieve crossbrowser compatibility of your web resource.
1. Using CSS hacks
CSS hacks are pieces of code that only one browser understands. For example, when running compatibility testing your site is displayed correctly in three browsers, and in the other three you can see some bugs, then the problem is solved by separately registering the appropriate hacks for each of the three browsers that incorrectly display the contents of the page.
Please note that hacks are not the best way to fix errors in the code, as they make it ugly and incorrect. However, this method continues to fulfill its functions.
2. The introduction of universal elements
Such elements work equally successfully in most browsers, so it is recommended that you pay special attention to them. Using only universal elements, the source code for your site will be aesthetic, short, and understandable, while meeting all commonly used browsers. You can check which tags are supported by which version of the engine using special service.
3. Using vendor prefixes
They are a relic of browser wars, especially WebKit. This method is more efficient and “cleaner” than using hacks. Any browser is characterized by unique properties that have a vendor prefix. Considering the case of Google Chrome, the border-radius element is represented here by the -webkit-border-radius property. And in Mozilla Firefox, the -moz- prefix is added. Such properties change the function of an element only in a specific browser, and in no way affect other browsers.
5 Criteria to evaluate the browser compatibility of your resource
Nowadays, there are a number of criteria to evaluate the cross browser compatibility of your website:
- Text. If this is an information site that predominantly contains textual content, this parameter is extremely important. If the text slides down or just simply is not displayed, then it is a cross browser issue.
- The location of the elements. Some of them may either slide down a little or not be visible at all. This means that the site is not adapted to any particular browser.
- The normal operation of all sidebars, buttons, etc. If in response to a click, a certain button or all buttons do not work/respond, then they do not work together with some particular program or device.
- Download speed. If the pages load slowly and freeze, this means that the browser does not recognize some elements.
- Adaptability for different devices. The site should open normally, and its elements should correctly display on PCs, tablets, mobile devices. In the absence of adaptability, you should take care of at least different versions for different devices.
Nowadays, an unadapted site is very difficult to find. Usually, all web resources are adequately displayed in most browsers taking into account, of course, that the latest are updated to the latest versions. If this is not done, then there may be problems with the displaying of your web resource. Usually, for such cases, webmasters put a special stub that opens if the site is being accessed by an outdated browser. This stub is designed to inform the user that he/she is using outdated software, after which the user is invited to switch to official sources to update his /her browser. Such a solution partially solves the problem, but not all people are willing to update their old web browsers. Perhaps they just don’t need it, so they will close the site and look for another.
Compatibility test: how to choose a priority browser for testing
The priority browser is always determined by the customer. Based on the specifics of the application and commercial targeting, the customer initially relies on certain users that is quite logical. However, you should not forget to take into account the fact that the customer is not always sufficiently aware of how wide the circle of potential users is. Therefore, the task of testers, as people more experienced in the field of web compatibility test, is to help and suggest which browser in one case or another should become the “main one”.
Cross browser testing can be simplified through various tools. For example, you can test on a virtual machine. This is a convenient solution in cases where you need to check different versions of the same browser. Also, the virtual machine is suitable when testing needs to be done in the Safari browser on Mac OS, but there is no real device running this operating system. Another method to facilitate checking the site for browser compatibility is already ready-made utilities and online cross browser testing services. Using such services, you will save yourself from installing all the browsers you are checking, or versions of browsers, virtual machines. It will be enough just to install the utility or visit the online cross-browser checking service, for instance, Comparium that provides you with the screenshots of the site displayed in different browsers with the combination of different operating systems, offers various comparison modes to help you with analyzing the layout of your web resource.