Home   →   Blog   →   The Layout Testing

The Layout Testing

Web projects testing is a necessary procedure for anyone who wants the site to work perfectly and without failures. But only multi-level testing performed by a qualified QA team can guarantee that the result of web developers' work meets all client's expectations.

In general, testing web projects includes a number of such stages as:

  • Documentation testing
  • Testing the layout
  • Functional testing
  • Testing usability
  • Performance testing
  • Security testing

In this article, we'd like to touch on the stage following the documentation testing. The matter concerns the layout testing.

The basics

The layout testing is aimed to search out noticeable inconsistencies of the website and includes the verification of the web resource scaling, resolution, reliability and availability.

In addition, you should not forget another important issue, namely the cross-browser ability. Let’s discuss it in more details!


As you know, we all have our own preferences in everything, including when choosing the best browser to view a web resource. Some people prefer Google Chrome, someone uses Mozilla Firefox or (less often) Opera, Yandex Browser... And there are also Internet Explorer for Windows, Safari for MAC and mobile versions of browsers on Android, IOS and Windows Phone platforms. So, having such a variety of browsers, it's very important that your website should look as originally intended.

Therefore, the task of the QA team is to check the availability, functionality, site design, and the fonts and colors in all possible browsers and on different devices. And believe us, you may be surprised, comparing the display of colors in Windows and MAC OS!

So be smart enough and don’t miss this stage.

Testing the visual part

This is a very important step being performed in the first place when testing the layout. It's no wonder because we perceive the world with our eyes, so the visual flaws would be discovered almost immediately.

Now then, during the process of the layout testing, the experienced QA team usually checks:

  • the presence of obvious inconsistencies, visible to the eye: broken blocks, colors inconsistencies, incorrect display of text around images;
  • whether the layout fully corresponds to the implemented project;
  • the grid (vertical/horizontal alignment of fields and blocks);
  • stability of the backgrounds: they should not "float";
  • the page scaling: page mustn't have visual defects and floated blocks for all reasonable scales (range of 75-150%);
  • the text box resizing (it should not break the layout);
  • the selection of fields of focus, highlighting the fields with errors;
  • website in different resolutions (1024x600, 1024x768, 1152x864, 1280x800, 1280x1024, 1440x900, 1680x1050, 1920x1080).

In addition, QA experts must ensure that:

  • all the site elements are being changed in proportion when reducing the window size less than the minimum technical specifications;
  • every detail looks as intended, nothing is broken;
  • there is no horizontal page scroll at the screen resolutions noticed in the specification;
  • the backgrounds do not drop sharply at higher resolutions.

When the checkup of the visual part is completed, QA experts can switch their attention to the site availability testing.

Testing the site availability

This is the second and equally important phase of testing the layout, as well as one of the factors helping to assess the quality of the whole site.

In short, the availability is the website operability. In other words, the QA expert is trying to find out if…

  • one can select the text in the text blocks;
  • clickable elements (links/buttons) work the way they should;
  • the logo icon is clickable and leads to the main page;
  • the mouse cursor when hovering over clickable elements takes the form of a «pointer» “” or «resize» “” , “”; and remains «default» “” when hovering over inaccessible elements;
  • all active elements react properly to the mouse cursor (and the unavailable/inactive elements don’t react);
  • clickable elements, whose purpose is not obvious, are provided with tooltips.

Testing the layout reliability

The next stage of the process is aimed to check the layout reliability which means the correct site response to adding the real text to the fields. So, the QA team is checking…

  • the correctness of increasing and decreasing the number of displayed material for information blocks (blocks with descriptions, articles, menus, lists, etc.);
  • the print of the page (if the website suggests such a possibility: for example, the resource for selling online tickets);
  • readability. If images are switched off, the inscriptions (especially the logo and the main site menu) should remain readable, and all the information symbols have to be signed by the alternative text that a browser displays when it's unable to load the picture (for instance, if the picture was deleted from the server or a visitor has disabled the image display in browser);
  • the input and deletion of data. To check it, one should input a big and small amount of text information into the text fields of forms for filling in.
  • the work of styles. In this case, one has to observe the site reaction to inputting the text of different format (with and without paragraphs, with lists, images, tables, etc). Is everything working as expected?

The reliable layout means that the user is at ease during working with a website (specifically, with its textual content) under all conditions.

Error 404

Another step in testing the layout is to check broken links, also known as 404 errors.

Let's briefly explain what this number (404) means.

  • The first digit "4" means that there is an error occurred on the client side. This error can be a misspelled URL or request for a non-existent page. In turn, if the first digit is 5, it would mean an error on the server side.
  • The number "04" identifies the specific error "Not Found" from the 4хх group. Among other mistakes from this group, one can distinguish 400 Bad Request, 401 Unauthorized, 402 Payment Required, 403 Forbidden and so on.

Try to look at the problem from the user's point of view. When a user encounters a 404 error, the first question that comes to his mind is "What should I do next?" Probably, he will leave the website, unless you find a way to keep him. Obviously, it makes sense to change the standard 404 page which ideally must have the same stylistic structure as the rest of your website.

In general, the custom 404 error page should handle such tasks:

  • the user-friendly design able to keep a user on the website;
  • useful content ready to provide a user the answer to the question «What should I do now?» by giving him simple and clear instructions.

There are many different online services to check 404 errors on your site, one of the most optimal is W3C Link Checker

When moving to this service, you just enter the URL of your web project into the appropriate box, mark suitable options and click “Check”. Some time later, the system will give you a full report on your website.

That's all for now. Good luck with testing! And feel free to ask any questions. We’re always ready to cooperate!

Next Posts
752ad06bd179a88a4637911ccac3a22f9bc3a912 Testing Design in Mobile Development
Software testing is the process of identifying the quality of any software using various test-design techniques.
6cf189f7d6a1bed5f5d912207c3b52dc0866a373 Galen MD. Automation of the Testing Process
The difficulty of testing the site layout is a common problem. And when we need to test a responsive pattern, the manual testing seems the only solution that comes to mind. However, there is another way to automate the process, namely, to take advantage o
262b55407c8eade0deed70f1648978f3691d388b Unusual Controllers for Managing Various Characteristics
Our company keeps on creating plugins, templates and open-source libraries which can be useful to developers. Today, we are pleased to offer you a new free lightweight plugin aimed to help you create unusual and expressive controllers for managing various