Cross Browser Testing

What is cross browser testing?

Why do we need to test different browers?

Chrome, Firefox, Edge, Safari, Opera and other browsers are all designed to display web pages. But their different characteristics can affect how web pages are displayed.

Let's explore some of those differences...

Chrome, Firefox and Safari are all designed to display web pages, but they have different characteristics

Cross Browser Testing

Why test on different web browsers

Google Chrome, Internet Explorer, Firefox, Microsoft Edge, Apple Safari and other browsers are all commonplace on computers these days, and manufacturers of phones and tablets such as Samsung and Huawei also have their own browsers.

They are all designed to display web pages, but they have different characteristics which can affect the way web pages are displayed, and not all of them are compatible with some methods of laying web pages out.

What are the most popular web browsers?

There are many browser versions in existence. Certainly some are more popular than others, and there is also a wider range of screen sizes and mobile devices than ever before.

According to Oberlo, Google Chrome has roughly two thirds of the market share. At time of writing, Chrome's share of the market is close to 66%, with Safari at nearly 19%, Microsoft Edge in third place with 4.27% share, followed by Firefox, Samsung Internet and Opera, each with less than 3% market share. (see below)

Websites designed for the trades

Web page layout methods

Most web pages use CSS (Cascading Style Sheets) to define how elements on a page should display.

CSS can control the position, size, colour, and other aspects of page elements. It can divide the page into sections using methods such as CSS Grid and Flexbox, and each of these and other methods has default gap sizes, margins and padding values.

Not all browser versions can handle CSS Grid and Flexbox, and default margins, padding and spaces may differ between browser types and browser versions.

There are WebKits available which can, in some cases, be applied to certain CSS classes to help the rendering of some page features across different browsers and devices in the way the web designer intended, so those might be worth exploring.

For web designers there is a very good resource called Can I Use, which provides guidance on browser compatibility for many features and styling elements, including which browsers can accommodate CSS Grid and Flexbox and the Flexbox gap properties between different browsers.

An important point to remember...

As you view all of the examples below, remember that the comparisons are of the exact same page viewed using different browsers and devices.

Fonts and Font Sizes

Websites which use externally sourced font libraries are quite common, but unless I have good reason to use one, I prefer to stick with the range of standard fonts. Avoiding external font libraries as much as possible helps to keep the number of externally held files or libraries to minimum.

It is one less reason for potentially making pages take longer to load, and I have seen so many examples of websites, computers and devices being hacked by externally sourced files (including plugins) that I prefer to play safe as much as possible.

Chrome, Firefox and Galaxy tablet font comparison

Some fonts display consistently across different browsers and devices, but that's not the case with all fonts. If you compare the examples below, Arial and Verdana are very similar in the way they display, but notice the difference in the display of Jubilat and Copperplate.

Cross browser testing - fonts on desktops

In the context of your page design, only you can determine whether such differences are important enough for you to make changes to the font selection or size based on device detection, but it's worth knowing how some of your customers might be seeing your website.

Samsung Galaxy phone and iPhone font comparison

Here is the same font comparison carried out on a Samsung Galaxy phone, and an iPhone. Once again note the differences between the Jubilat and Copperplate displays.

Also note the size of the font in the paragraph in the upper part of each screen. Font size differences like this might not usually be a problem, but if a display panels contains text content adjacent to an image (as is often the case for product or service descriptions), differences in font size can cause irregularities in those display panels.

Cross browser testing - fonts on smartphones

Symbols and Special Characters

Very often symbols can be represented by code, such as UTF-8 Hex or Decimal values which browsers can use to display many different symbols, shapes, icon and characters. However, precisely what gets displayed can depend not only on the browser, but also on the device.

It the examples below you can see that whilst Chrome and Edge are almost identical in this case, the phone symbol is different when using Firefox, and both phone and email symbols are different on the Samsung Galaxy tablet.

Cross browser testing on laptops

When comparing displays of symbols on different smartphones, besides the slight difference in size of the symbols and icons, it's clear to see how different each device can render those symbols.

Cross browser testing on mobile phones

Need help with your cross browser testing?

Whether you have a one off need for testing, or the need for ongoing testing and collaboration for new sections or features being added to your website, get in touch.

Depending on your preferences and requirements, feedback of issues found can be compiled into a single email, Word.doc, PDF or PowerPoint, or you might use systems such as Jira, Confluence, Slack or Trello for capturing, tracking, fixing and retesting bugs.

Whatever your preferences, experienced cross browser testing and other types of website testing is at hand.
Hope to hear from you soon.

Get in touch...

Ether use the form on the right, or if you prefer you can email or phone:

Either email, phone or use the form below:

01406 373511

07564 372222

Fields marked with * are mandatory

security code 1st charactersecurity code 2nd charactersecurity code 3rd charactersecurity code 4th character

Targa Web Solutions Targa Web Solutions logo
01406 373511