Mobile website testing checklist

Nowadays, we spend most of our time using our mobile devices. This applies not only to shopping and browsing news but also to watching favorite shows and other content. Mobile websites are in no way inferior to full versions of websites on PCs, on the contrary, sometimes they are more accessible and popular precisely because of the high level of mobile device use and their convenience.

Therefore, to ensure convenient use of the site on mobile devices for users, the tester has to thoroughly test the mobile version of the site, assuming various test cases and features of gadgets. In this article, the Training Center has compiled a brief list of checks that are inherent in testing websites specifically on mobile devices.

First of all, a novice tester should understand the peculiarities of testing on mobile devices. We suggest considering the following aspects:

• basic device functions (mobile phone, tablet, etc.);
• adaptation of the website to the device screen size;
• display of content and components;
• website style;
• animations;
• user interface;
• navigation between the website versions;
• notifications.

Desktop Website vs. Mobile Website

However, before we jump ahead, let's also look at the differences between a mobile and a desktop website. You can take a break for yourself and try to compare them on your own, and then return to reading the article. We promise it will be interesting.

1. No mouse or keyboard on the mobile website, which means that checks will be carried out using special gestures. You can read more about gestures in the article on our blog.
2. No hover-state. 
3. A hamburger menu on the mobile device, which is hidden in the website header and opens after tapping on it. 
4. Features of correct layout display. 
5. Features of text display and its styles. 
6. Input forms and their specifics, pay attention – in negative cases.
7. Display of the website on a mobile device in two modes - landscape and portrait. 
8. Features of transitioning to another page - scrolling and smoothness.

Now we can move on to more specific checks that can be applied on a mobile website.

Mobile Website Layout Testing 

Layout is, by definition, the placement of elements (images, text, buttons, fields, etc.) on a website page, within a web or mobile browser window, according to the previously developed design. Layout testing is arguably the most obvious testing of mobile devices. However, let's review what specific checks will be relevant for layout testing, illustrating possible errors:

• checking the adaptation of button sizes, fields, etc., and their positioning;

• checking social network icons on the website;

• checking the page adaptation - text, tables on the page for the screen size of the user's mobile device;

• checking dropdown lists and burger menus;

• checking for horizontal scrolling. Note that in mobile website testing, the presence of such scrolling will be considered a bug, just like on the desktop version of the site; 
• checking the support of portrait and landscape modes; 
• checking button tap animation. This check is important in the context of user feedback and the fact that the element was pressed. Without such feedback, the user may think that the tap did not happen and the required page will not open, which can negatively affect the business request of the product; 
• checking the menu display using specific UX and UI elements, which can be explored in an article on our blog.

Testing Forms on a Mobile Website

Checking forms remains as important on the mobile version of the website as they are on the desktop version. The issue pertains to the value of the data used by the client of the website, both in terms of validation and the security of storing and disclosing this data. When testing forms, pay attention to the following nuances:

• checking the field sizes;

• checking the labels and hints next to the fields;

• checking the highlighting of active fields upon tapping;

(The field is activated, as it should be)

• checking the keyboard type;
• checking the change in keyboard orientation after device rotation (since these forms might often get hidden under the keyboard);

(After switching modes, the field disappears behind the website's keyboard)

• checking voice input (provided it is set up on the phone, for example, a pre-selected language input); 
• checking notifications and pop-up messages, as sometimes they darken the entire page, making it hard to find the actual notification and close it, or on the contrary, it's missing and it's hard to understand whether the user's request has been processed.

Checking the contact block on the mobile website

The contact block is interesting in itself, so often it is within this block that you can easily find bugs on websites that might seem functional at first glance. When checking contacts, pay attention to the following points:

• checking the availability and actual presence of contacts on the site;
• checking phone numbers, specifically that tapping on them opens calling applications;
• checking the tap on the email address (the email address should open the mail application and populate  the message recipient assuming the default mail application is set on the device);
• checking the address that the map opens and the address specified in the contact block.

Favicon Check

It might seem that this element is small, but it, like the website logo, contains certain business goals. It is worth paying attention to the following checks:

• checking the presence of a favicon display;

• checking the creation of a separate desktop  shortcut  with the corresponding logo/favicon;

• checking the addition to bookmarks with the corresponding favicon;

• checking the adaptation of the favicon display in light and dark mode (the favicon should adjust to the mode and contrast with it).

Checking the transitions between sections and pages

• the smoothness of swipes and page transitions;
• speed of loading sections and pages;
• functionality of the «Back» button on the device (returning one step back).

Please note that to confirm such bugs, as well as other dynamic bugs, it is worth adding a video to the bug report, not a gif animation, as it is almost impossible to stop it.

Other interesting checks to pay attention to:

• checking for the link to the desktop version of the site;

• checking the display of banners in full;

• checking the content (video, animations, carousels).

During the testing process, testers, especially novices, often forget that testing websites on mobile devices is a task that involves checking the websites themselves, not the browsers or devices. That's why checks for mobile applications are not always the same for websites. For instance, interruption testing cannot be applied to a website, as a website is a resource that a user can browse using browser applications.

In this article, we have reviewed a brief checklist of mobile device website checks that will not be considered duplicates of website checks on a computer. This is because the essence of mobile testing is to consider cases that may occur solely on such types of devices.