Useful tools for layout testing

Webpage layout is the creation of an HTML code structure that places web page elements (images, text, etc.) in the browser window so that the design elements look similar to the layout.

A distinctive feature of the layout of web pages from a printed one is that during development, the difference in the display of elements in different browsers, as well as the dimensions of the working space of devices, must be taken into account.

Often the layout is tested «by eye», if no layouts are provided on the project. But a more effective way to test a layout is to test with tools and mockups. This allows the team to be sure that the product will be delivered to the end user in accordance with the stated layouts and expectations of the client.

Let's look at some popular tools for this below.

Adobe Illustrator

Adobe Illustrator is a graphic editor used to process vector graphics. It is used for creating images from company logos to website layouts and large billboards.

Unlike raster images, in which information is stored in a grid of individual points, Illustrator uses mathematical equations when creating forms, which allows you to change the size of such images without loss in expansion.

The editor has a number of pros and cons that each user can find for itself.

Let's consider a number of general advantages:

• a large set of tools for creating graphic primitives;
• a wide range of tools for design and transformation of objects (tools for creating a perspective using a grid, combining and separating shapes, adjusting the width, deformation and change of shape);
• images made in Illustrator do not take up a lot of memory.

However, there are a few notes about this editor:

• a limited number of publicly available developments, various add-ons and templates;
• the program is quite complex and is intended for use by experienced designers, mainly when working on the «quality» of manufactured products;
• Illustrator is quite demanding on PC resources.

Adobe Photoshop

Adobe Photoshop is one of the popular graphic editors, which has a large number of functions that allow you to positively influence the quality of work.

The tool allows you to create various text effects, photo collages, website graphics, special effects, background images and much more. This is not a complete list of applications of the program, but demonstrates its versatility.

The advantages include:

• display of contrasts, tone, colors, etc. in the form of graphs;
• the possibility of customizing brushes;
• a wide range of tools.

In turn, the disadvantages include:

• the difficulty of learning it for a novice user;
• high cost of the product;
• limited support for OS versions (installation on Linux via auxiliary software).

PerfectPixel

PerfectPixel is a plug-in for popular browsers, with which you can test the execution of the layout and its compliance with the layouts.

The layout technique, in which the layout HTML template exactly (pixel-for-pixel) matches the original, PSD layout is called pixel perfect. And, recently, this is already some standard of website implementation. The technique assumes that if you superimpose the «picture» of the created HTML template on the picture of the original PSD layout, then both pictures must match (all elements of the pictures: text, images, graphic elements).

Advantages:

• the plugin is available for all popular browsers;
• support for multiple overlays;
• simple interface;
• zoom function (useful for optimizing images for different PPI/Retina screens);
• keyboard support;
• adjusting page elements in real time according to the active overlay.

Disadvantages:

• the need to have PSD layouts for conversion to PNG/JPG or a ready-made file from the original PSD layout;
• lack of support for other popular image formats (TIFF, TGA, WebP and others).

How to test layout in the above programs

The principle of layout testing with the help of the mentioned tools is to overlay product and layout layers. Next, we will analyze it programmatically.

Layout testing in PerfectPixel

Before exporting to PNG images, the PSD layout must be brought to the original size! Photoshop has a reserved hotkey combination for this: Ctrl+1 for Windows/Linux, Cmd+1 for Mac OS X.

As soon as the PNG copy of the PSD layout has been prepared and saved, it is necessary to open the HTML page in the browser window that corresponds to this layout.

Next, install or launch the PerfectPixel plugin from your browser's toolbar. A plug-in window will immediately appear, in which you will be asked to select a pre-prepared layer. After adding a layer, you should try to combine it with the finished page of the site. If everything matches, it means the site is made according to the layout. If not, then it is necessary to describe the bug report, indicating which elements did not match for which page. Below you can see what the interface of the current version of the plugin looks like, as well as the available options.

The screenshot shows that the header of the HTML page matches the original PNG, but the block with the banner does not.

Layout testing in Photoshop and Illustrator

Layering

In Photoshop, the layout is also checked by overlaying layers: you need to adjust the transparency of the layout and overlay it on a screenshot of the finished page.

Photoshop:

Illustrator:

Color check

In addition to layering, a handy check is to check the color code being used. You can determine the color of the element using the eyedropper tool. As a result, we get the color code that should be used and then we compare it with the color on the HTML page.

Thus, the color R182 G162 B127 is obtained. If the color differs from the layout, check the shade again or provide a color that is not in RGB format (for example, in HEX and vice versa), the online color converter from the search results will help.

Determination of the distance between elements

To measure the distance between elements, you need to select the «ruler» tool and draw a line from the starting point to the end point.

In conclusion, it is worth to be noted that testing the layout «by eye» does not always give a complete understanding of whether the product is made according to the layout or not. The use of tools and the presence of layouts are recommended for full-fledged testing of the layout. If such (layouts) were not provided in the task, you should additionally clarify them with the manager.