How to do Browser Testing for your New Website
By Erin | Sep 26, 2018 (5 min read)
Every time you use the internet, it’s likely that you use the same web browser most of the time. You might not even think about why you do, it’s probably just because of habit.
However, the rest of the world doesn’t use the exact same browser as you. In fact, other people’s web browsers may be completely different, with different functionality.
Most browsers today are customized and have a lot of personal info built in (e.g., name, email, payment info, calendars, etc.). This is why when launching a new website, you must test each browser to ensure each visitor has a quality experience.
What is a web browser?
A web browser (usually referred to as a browser) is a software application for accessing information on the web.
Each individual web page, image, and video is identified by a distinct URL, enabling browsers to retrieve and display them on the user’s device.
A website is designed so that the code on the back and frontend gives specific instructions to the web browser about how it should interpret code. However, each browser interprets this code a little differently.
Not all browsers are created equal
Some browsers have a lot more funding and updates than others. Some browsers are in decline in use. When designing a website, remember that a vast majority of users may be on a different platform than you. If you take a look at Statcounter, you can see that currently, Google’s Chrome browser is the market share leader at 59% of users. Ten years ago, almost the whole world used Internet Explorer, but this is not the case anymore.
On top of which browser is most popular, it is important to know which version of each browser is most popular. If the newest release is only adopted by a small percentage of the market, then it makes no sense to just cater to the functionality of that latest version.
Knowing which browsers (and versions of those browsers) have ‘market control’ (i.e., meaning how popular they are) is crucial as you need to focus your code on meeting their requirements and functionality.
Know which browser does what
How can you tell what each browser can and can’t do? Fortunately, there are tools online that can help you. As web developers, a tool we like is Can I Use, which is a website dedicated to providing up to date browser support information.
You can get detailed information about which browser supports which functionality. This can be very useful when wanting to add some unique code to your site.
What to test for Browser functionality
Regarding what to test, here are the main types of functionality that we usually check for each of the most popular web browsers.
Font – Each browser uses different default fonts, so you must code accordingly to ensure they are displaying correctly for your site.
Video – Browsers and various browser versions use different video formats to display content. For example, older browsers support Ogg; modern browser versions of Chrome, Internet Explorer, and Safari support MP4
Form fields – Some platforms (i.e., an iPhone using Safari) will add additional nuances, which are system defaults on their browser.
Buttons – By default, most submit buttons are square and flat, however, on some browsers the submit buttons are shaded with a gradient.
Predictive Text & Autofill – Know which browsers have this functionality built in, especially for mobile web browsers. It can save your visitors a lot of time needing to add details to your forms.
Scroll Bars – How does each browser handle the functionality and scroll bar styles. Does it cover or limit the view of your website in any way?
Orientation – On Mobile, this can factor become important, as the screen can shift from vertical to horizontal by turning the phone.
Screen Size – Remember that although some people use hug desktop screens, that some of your visitors might not be on a mobile device, and there are plenty of sizes in between. Testing the resolution and layout on smaller and larger screens is crucial.
3 Different Tests for Each Browser
Remember today that almost 84% of people use their phone or tablet to make purchasing decisions, so you must be prepared to display correctly on mobile browsers. (To know which browsers are popular with your visitors, it’s also a good idea to have Google Analytics on your site. This will help you gain more clarity.)
As a rule, we will always test each site on four browsers: Apple’s Safari, Google’s Chrome, Mozilla’s Firefox, and Microsoft’s Internet Explorer.
As part of these tests, it is important to perform three different format tests for each browser.
These are the full screen (desktop) midsize (tablet) and mobile size tests. This can quickly be done by dragging the browser to a smaller size, using the browser’s Development Tools, or using a tool such as MobiReady, which does the job for you.
These are some simple browser testing guidelines to ensure that your new website looks great on all possible formats it is displayed. If you need some help setting up a new site or making some improvements to your current site, then we can help.
