The Usage of Stripes for Optimal Design of The Letter
What are the stripes and why they are needed?
One of the most important goals of Stripo is to speed up the process of creating a rewriting. For this we have implemented a library of blocks, which saves you from the need to re-create the same elements from email to email.
For example, you can save each element of a footer or a header separately, and when you quickly create an email, quickly compose the same element from them. But there is a simpler way — just to save to the library a stripe that stores in itself the finished element entirely.
Stripes are the area of an email template that stores structures, containers, and basic blocks. Below we will consider how to work with stripes and what application they can find in terms of design.
How to work with the stripes?
Let’s consider how the stripes work on an example of a template from our library.
When you open the template, you can immediately see that the stripes define the logic of the email, breaking it into completed sections. While storing these structural elements in the library, when creating the next email it will be enough to add a saved stripe to the email and substitute the actual data.
Four fields are available for editing:
- Stripe background color;
- The background color of the content;
- The background image;
- Hide on mobile devices.
At first glance, it seems that the available settings are too small. But this is exactly the case when «less is more» and the available settings allow you to completely change the appearance of the email. How exactly, see below.
How can I use the stripes?
What are the stripes and why we need them already figured out, and now we need to understand how they will help us in creating a unique and attractive email.
Customization of the general background
Surely you faced with the fact that in each editor you can set the background of the email, which will be displayed in most mailers. But at the moment when you need to focus on a specific block or make a part of the background, for example, black, and the second white usually problems start and that’s when we first climbed into the code. In Stripo, this problem is solved by two clicks:
- Click on the stripe;
- Choose a color.
For the example below, the task was to highlight the block with the promocode and focus on it. It was decided to make this block part of the background, which allowed it to be organically written and not spoil the appearance of the email.
It can not be said that the use of blue only on the background of the container looks very bad, but going beyond the standard 600 pixels is another step towards bringing the appearance of the email closer to the style of the site.
Another version of the customization of the background appears when the corporate style uses patterns of different colors and they need to be combined with each other.
One of the solutions is to prepare the picture in advance, put it on the background and hope that your recipients will open the email exactly the way you want and nothing else. However, it does not happen, and it’s almost impossible to guess with the prepared picture. The problem is solved by manipulation in the code or we can simply create stripes with the blocks we need and set a background image for them.
In this case, you get rid of the need to prepare a picture in advance and guess how the subscriber will see the email. Now the desired background will be displayed equally well for any resolution.
Expanding the banner
There are times when a beautiful selling banner was drawn for the site and statistics show that it is clicked most often. There is a natural desire to make a mailing with this proposal and naturally, I want to use this picture. But the trouble is that the banner was drawn for the site and for email it is very wide. If such a banner is simply inserted into the email, then most likely the text will become unreadable and all the beauty comes to naught.
You can save the situation if you cut the picture correctly. We leave in 600 pixels all the most important and logically completed, and the remaining parts of the banner are inserted as a background in the strip. As a result, you get a banner that will be displayed on mobile devices logically intelligible, and on the desktop readers of the newsletter will see a full banner, as on your website.
And sometimes we just want to make the background become a continuation of the banner and carry only aesthetic pleasure, without the information component. On the example below, the banner background is a gradient. This could create discomfort when viewing a message if you just put a white or red color on the background. But with the help of stripes, you can put on the background the same gradient and the email looks like a single whole and each element only complements each other.
It is important to remember
Remember several important points that you need to consider when working with stripes to use them as efficiently as possible.
- The bars are displayed in the same way as the normal solid background. From this it follows that they will be visible only on screens whose width exceeds 600 pixels;
- Adding custom styles is important to remember that the stripe is the parent element for all containers, structures and basic blocks that are stored in it, so some styles may be inherited, which can negatively affect the appearance of the email and its adaptability;
- The «Background color of content» setting that you specify in the stripe does not overlap the background color that you specify in the structure. To change the color of the structure from the stripe, you need to set a transparent background in the container settings;
- When adapting a third-party template, you need to follow the step-by-step instructions to eventually get a responsive and fully editable template, ready for export to your ESP.