Audit and testing of letters: what you should pay attention to while layout

Hello, Habr!

The code does not tolerate negligence, whether it be complex data processing algorithms or layout of email newsletters.

Having received a letter from one of the major retailers, our head of the layout department noticed that some elements are uneven. The professional instinct did not allow us to simply pass by, and, since the store is not among our customers, he decided to check it out according to our layout quality control process. Ilya Kasterin ikasterin , head of the layout department at Retail Rocket, tells about the results and how to see problems in the display at the development stage of the newsletter.

For whom and why it is important

The display of letters is important for online stores, as many of them communicate with customers primarily through email. The less attractive the newsletter, the more unsubscribes and fewer orders.

You may argue: “If a store sells quality products at an affordable price, then mailings are not that important.” Yes it's true. However, the prices for the most popular positions are the same everywhere, plus or minus, and the goods themselves are often purchased from one manufacturer. This is especially true for online hypermarkets and partly an assortment of marketplaces. So it turns out that decides the quality of service, excellent work in email communications and marketing in general. And if someone doesn’t care that the text may be crooked or the line spacing is not the same, another buyer will think that such shortcomings can be in the store’s service or the quality of the product, and change the opinion of the store for the worse.

How to organize the work process to minimize errors?

Retail Rocket is a personalization platform for online stores that helps retailers build personal communications with each customer on the site and in the email channel. The personalized email marketing platform includes mailings of any kind and complexity: from trigger emails to the formation of smart automated campaigns with dynamic content.

Many retailers choose our platform because of the high level of service and support that we provide through a clearly calibrated work process. At the moment, the layout department has reached (and is not going to stop) the following indicators:

This result was obtained not least with the help of a streamlined work process, for which Retail Rocket uses kanban boards in Trello:

One of the boards of the layout department

With the help of kanban boards, the whole team controls the task and sees the difficulties if they appear. The whole layout process is as follows:

  1. Collection of information: layouts, texts, links, banners and other information from the store. It is necessary to get all the necessary introductory as much as possible so that some edits do not appear at the stages of layout and testing, because there something will change more resource-intensively.
  2. Layout The basis is a universal basic template, which includes all the achievements and "chips" of the company, which can be used in the design of letters (about them, alas, not today);
  3. Testing. Using specialized tools, letters are checked on almost all email clients, sometimes we even check some points on real devices with Android and iOS;
  4. Testing again. Additional verification of the display and code of all letters personally by the head of the layout department and the project manager of all letters;
  5. Mission accomplished. Ready letters are sent to the task manager.

Audit letter

Before showing what problems may arise during layout, I want to emphasize that no concrete solutions will be indicated, except for one thing: to remake the letter from scratch. If you have several stages with a review, then finding and fixing errors will be simple. Here are some more tips to help you improve your work:

Let's get back to the audit. We tested the received letter on several email clients after placing an order for a large retailer according to Retail Rocket standards.

Let's start by looking at the display of letters on the desktop. Try to find the layout errors in it yourself:

At first glance, the letter is pretty well laid out, but this is because the main errors are visible when you open the letter on mobile devices. Although here you can see several flaws.

Many retailers are limited to checking on the desktop and are satisfied with the results. But more than half of the letters open on mobile. That is why the testing process on the largest possible number of different devices and email clients is so important.

Consider the errors and drawbacks of the layout in more detail.

A common flaw in all letters

Absolutely in all email clients text blocks are displayed incorrectly with the price, quantity and properties of the product, such as incorrect hyphenation or a disproportionate font in relation to the picture, but most often there are problems with indentation.

This can be clearly seen in the example below: in one product card, the display is correct, and in the one below, the text is at different levels:

Display on iPhone 6 and iPhone 6+

The product image is too small relative to the text and against this background, the font seems huge. The ruble symbol is also transferred, which does not look very beautiful.

It is worth noting: the price and name of the product are at different levels, the same problem with the parameters of the product under the name.

Display on iPhone X and Pixel

There are no problems with displaying the price, but, like in the previous example, the product image and text look too small and large, respectively. The price and name also vary in height, the same applies to the parameters.

These problems recur in Gmail on the iPhone 7 iPhone 7+ and iPhone SE.

Display on Samsung Mail

The letter does not adapt to the screen size, without approximation it will be difficult to consider the details of the order.

Mapping on Lotus Notes 8.5 and Outlook 2003

Yes, some buyers still use these mailers and therefore they cannot be ignored. In our case, both in Lotus Notes 8.5 and in Outlook 2003, the letter fell apart due to the gigantic size of the pictures.

All images in the letter must be the maximum size. In this particular case, it is 90px high and wide.


Buyers are not always aware that there are problems with spacing or font ratio in the newsletter, but this definitely affects how the message is perceived as a whole. Unfortunately, not all retailers take this into account. The letter would look something like this if it went through our layout process:

Our mission is to increase sales of online stores, so we openly share our methods of work and show how to avoid mistakes. Thorough testing could identify all display problems and fix them in time.

Perhaps the letter after completing the order is not the most remarkable, but if there are so many drawbacks in such a simple structure, then what is the likelihood that mass mailings with various design elements will be perfectly made up?

What do you think about this? We are waiting for your answers and will gladly discuss the topic.


All Articles