Mobile website testing

A mobile website consists of browser-based HTML pages that are linked together and accessible over the Internet. A mobile website adapts to any screen size and interacts with a touch screen. Websites display texts, data, images and videos. They also interact with mobile device features such as making a call, accessing the camera, location, and more.

A properly designed website attracts the user in the first seconds and thereby guarantees his return in the future.

The statistics of the most visited sites can be found on Semrush.

Most visited websites in the world for online services, March 2022

A website that is not optimized for mobile devices, and whose performance has not been tested when using the mobile Internet, will not be prioritized in search results and will appear at the bottom of the results. And this creates a big risk for business.

More than 54% of Internet traffic comes from mobile devices. The mark of 50% was overcome in 2017 and it continues to grow. This is an indicator that users continue to explore mobile browsers, websites, etc.

Quality mobile website testing will reduce the risks of a negative user experience with the product.

When testing mobile websites for defects, the following areas are the priority areas to check.

Screen size

In order to meet the demands of different users, manufacturers strive to provide mobile devices with different screen sizes in one model. This is a good strategy to increase sales and reach a larger audience. Having a large number of screen sizes should not be a concern for testers, as mobile devices usually have standard screen sizes from all manufacturers.

Resolution

The next step to check is the resolution of the device. The better resolution a device has, the better its screen and ultimately more user-friendly.

The biggest impact a web page has on resolution is when developers define absolute numbers for their elements.

For example, on a 300-pixel-wide display, an element may occupy 50% of the area, while at 450-pixel resolution, it reaches ⅓ of the width. This undefined display of elements can cause problems on a web page. When one of these elements is used, the other elements may be displaced from their respective positions. For example, call-to-action buttons may be moved from their intended positions.

Testers should always analyze the website documentation if it is available. If not, solutions can cover the core segment of mobile devices.

Below are the statistics of current resolutions for the period 2021 – 2022 from the resource statcounter:

Statistics of mobile device screen resolution around the world

Operating system

Only two operating systems dominate the mobile device market: Android and iOS. This reduces the combination of checks, but new versions of the OS are released frequently. With each new version of the operating system, some outdated functions are disabled.

So it's very important to keep an eye out for deprecations and test the website for any changes in previous versions etc.

Browsers

The most time-consuming part is testing in web browsers. Unlike operating system versions, browser versions are released more frequently, with an average cycle of four weeks.

In addition, there are many browsers on the market. Even if you exclude Google Chrome, which has more than 60% of the market, other browsers also hold a large share of the available market.

Global mobile browser market share, 2022

In turn, each browser releases new versions, but not all users update their browsers as often as possible. This also adds work to the testers.

Global desktop, mobile and tablet browser versions market share, 2022

With each release, new features are expected to be introduced to replace outdated ones. A tester should be careful when testing a mobile web application on updated versions of browsers.

Impact on mobile device systems

In terms of impact on device systems, much of what is covered in mobile web browser testing can be summarized in this section.

Web applications are supported by device systems and, of course, their operation depends on some features of the mobile device. For example, Wi-Fi or cellular network can affect the download time. If the end user is on a 2G network, the time may increase by two to three times.

Google Analytics will help you better understand what users use to access the website. However, this is not always true. For example, if a web application does not work well on a 2G network, users will leave the page. Due to low interest in the Google Analytics list, they may not be displayed.

Another problem is battery drain, which also occurs during mobile internet testing. A few years ago, Stanford conducted a study on the relationship between battery drain and mobile Internet. While most people assumed advertising and hardware were to blame, the study found «poor code selection».

Accessibility

The World Wide Web Consortium (W3C – the main international organization that develops and implements technological standards for the World Wide Web) stated in its standard specification that a website should be accessible to everyone, including people with various disabilities. According to the document, they include the following categories:

• auditory-visual,
• speech,
• cognitive,
• neurological,
• physical

As mobile traffic exceeds desktop traffic, mobile web accessibility testing becomes even more important. Therefore, customers should also consider such accessibility categories when discussing a web application before developing it.

Many people find it sufficient to test the mobile web browser with a single process. This includes browser adaptation tests or just visual UI testing, etc. However, mobile website testing is much more than that, and the tester should carefully focus on each segment described in this section.

Approaches to mobile website testing

Improvements in testing technology have resulted in several options for testing mobile websites.

Using desktop browsers

Using desktop browsers for mobile web testing is one of the cheapest but least effective approaches.

The developer tools options in all browsers provide the tester with predefined resolutions for different mobile devices.

An example of testing a mobile website in the desktop Google Chrome browser

The problem with this approach is that it doesn't take hardware into account when resizing a web page. In addition, testing uses the resources of the computer, not the mobile device. This may affect the final result or provide false data.

Another problem with this approach is the lack of a mobile operating system and the inability to switch between different versions of the browser.

Testing on emulators and simulators

In the mobile world, emulators and simulators are designed to simulate the behavior of a mobile device without physically using it.

Emulators are a possible option for testing. The hardware is easy to install, readily available, and maintenance-free.

More in «Emulators, simulators and farming devices for mobile testing» blog article.

Testing on real devices

Testing on a real device is one of the best options for testing mobile websites for accurate results. However, such testing itself is costly. In addition to purchasing devices, maintenance takes a lot of time and money. Mobile operating systems and browsers constantly release different versions. For example, you need to test device X with operating system Y and browser Z with version ABC, and then repeat with another version of the browser, etc.

Cloud testing

In order to overcome the problems encountered in the above methods, cloud testing is used.

Cloud-based cross-browser testing platforms offer mobile website testing in the cloud and therefore eliminate the hassle of maintaining internal device labs.

A cloud device laboratory and a mobile emulator are used for testing. This is enough to perform a quality check of a mobile website.

Additional features such as extensive reporting, geolocation testing, multi-tool integration, etc. are another advantage.

The most popular cloud device farms: Firebase Test Lab, Samsung Remote Test Lab, AWS Device Farm, Sauce Labs, Xamarin Test Cloud, Perfecto.

Mobile testing allows you to check whether a website works properly on target devices. It is important to test for speed and accuracy in order to provide users with immediate access to the resource.

A mobile-friendly website gives users a better experience than a desktop website because they can view all the information on a small, convenient device. This helps to attract more visitors and also helps to increase the level of user trust in the resource.

And this, in turn, has a positive effect on the ranking of the website in search engines and helps to encourage visitors to return again and again.