15 of the rules of UniSender
We UniSender collected 15 basic rules that will help to create a beautiful newsletter, even if you have never engaged in the design and layout of letters. If you have a designer in the state, to know the basic fundamentals still important:
- You will be able to deliver competent TK and evaluate the work.
- Sometimes you have to make your own letter - for example, to edit a minor tweaks or replace the designer while he is on vacation.
- Additional skills increase your value in the job market - all of a sudden in the future you have to create your own HTML-emails?
To compile this list, we looked into the foreign papers and picked up good examples of good design letters. Let's not pull - that all 15 of the rules.
1. Use professional graphics editors
They are many: Adobe Photoshop, Adobe Illustrator, Figma, Scetch. They can sketch a beautiful layout, download different fonts, add gradients, shadows and other designer fashion. Of these applications coder can easily get all the colors, spacing, and fonts to impose a beautiful letter.
Egor Vakulyak, UniSender designer:
"The choice of a graphical editor for email-mailing is more dependent on the habit. Well versed in any one application? So, do in it. The exceptions are images that need to somehow handle: erase the background, change the color, remove vatermarku. In this case, only help Photoshop ».
Not a very difficult letter can zadizaynit and immediately impose in the block editor. In these applications, you simply drag and drop the different blocks in the letter, and then set them up. Block editors have almost all mailing services, but sometimes there are as separate applications: for example, Stripo or Tilda editor.
2. Watch out for letters width
Optimum writing width for computer screens - 600 pixels Mobile - 320 pixels. These sizes are supported by all platforms - can not be afraid that someone will cut the wrong email or display it.
Many companies are experimenting with a width of letters, trying to 620, 680 and even 960 pixels. If you dare on this, then be prepared to call a good coder or undertake vorstku own - in block editors play with the width of the letters will not work.
3. First, outline, then beauty
The layout of the letter (as well as any other layout) easiest to start from scratch. Place blocks of pictures, icons, text and letter buttons. Do not become distracted by the shadows, gradients, and fonts. At the initial stage it is important only to the relative position of the elements.
When everything is ready, it is possible to direct beauty: insert images, write a real text, understand the font size and font style, add shadows and gradients.
4. Make sure that all the basic elements in place
Subscribers are accustomed to the classical structure of writing: the top of the cap, then there is a body of the message, below - cellar. Try not to break the sequence - so users can quickly find all the necessary elements in the letter.
5. Use safe fonts
Safety - are the ones that will be displayed correctly in all email applications. Font for the letters are quite a few:
- Arial, Helvetica, sans-serif.
- Arial Black, Gadget, sans-serif.
- Georgia, serif.
- MS Sans Serif, Geneva, sans-serif.
- Tahoma, Geneva, sans-serif.
- Times New Roman, Times, serif.
- Trebushet MS, Helvetica, sans-serif.
- Verdana, Geneva, sans-serif.
- Courier New, sans-serif.
Sometimes in the newsletter you want to add a font that is not on this list. For example, to highlight your company logo or message header. Such fonts designers inserted in the form of pictures.
6. Font size - not less than 12-13 px
The fine print is inconvenient to read - people with poor eyesight will have an increase or reach for the glasses. Many simply close the message, when faced with such difficulty.
Some e-mail platforms do not support the fine print. For example, iOS native application will increase any standard font to 13 pixels. Because of this layout letter can go - and part of the email users do not appear as you intended.
7. Think about tables
Layout collect the letters with the help of tables and it is important to keep in mind during the design stage. Make sure that all the elements of the letter can be easily placed in a rectangle or square, and some of the messages do not overlap each other.
8. Prepare a separate template for mobile
By Litmus statistics for 2019, with nearly 42% of mobile users are reading. It is important that these people be comfortable to view your messages.
The basic approach to adaptation for mobile - rubber layout. This means that elements, which stand in two columns on the computer will jump to each other on the mobile.
Sometimes the images individually adapted for mobile devices: images can resize or crop.
Recommended parallel with the desktop version to think to design mobile in a separate document with a width of 320 pixels. Of course, it should not be very different from the "older" brother, another coder will not be able to adapt the design to the mobile version.
9. Do not use the prohibited items
Mail does not support some of the elements that we used to see on the sites. Some of them are simply cut out of postal letters, because of the other sending spam may get in (even worse). That there were no problems in email-design is better to refuse:
- Of Flash-animation
- parallax effects
- Shortened links (bitly.su services, is.gd)
10. The letters must be text
If you send a letter, which consists of one or more images, the postal service, likely will regard it as spam.
But the letters, in which there is only text, you can send. For many companies, this is the usual style - they send letters without pictures. Only text and hyperlinks.
11. All the most important - in the form of text
Many mail applications by default block the display of images. This happens in Outlook, AOL, Windows Phone 8, and Yahoo !. Sometimes users themselves disable the display of images to emails faster progruzhat or distract them with unnecessary elements.
If you want to share something important, to call a subscriber on the website give a discount or put a link to unsubscribe, use the text. So you will be sure that subscribers will see your message.
12. To use the animation GIF and APNG
Animation helps revitalize newsletter: show the product from different angles, to show some kind of instruction or simply create a catchy element. For the animations in ezines marketers use GIF and APNG - mail applications only support these formats.
13. Keep an eye on margins
Padding helps to orient, what are the different elements of writing. Proper use of empty plots helps avoid overloading the design and manage the user's attention.
For padding between the letters corresponds to letter spacing between words - the space between lines of text - leading. Typically, these intervals are automatically registered in the font style, they rarely have to change.
Most often the designer has to do with the amount of space between different elements: pictures, paragraphs, headings. There are 2 basic rules:
- Objects located close to each other are perceived due (Artemy Lebedev, "The theory of proximity").
- In the transition to a higher level (the word "string <paragraph <section) margins should always be increased (Bureau Gorbunova, advice on regulation of internal and external).
Let's see how these rules work in the following example:
In Example 1, the heading "stuck" to the previous paragraph. A cursory reading might seem that this is the conclusion of the previous section, but not the beginning of the next. In Example 2, title hung between two paragraphs - it is not clear to which it relates more. In Example 3, the headline on the spot: it is separated from the preceding paragraph is indented, and begins the next logical partition.
Another example of the mutual arrangement of the various elements:
Here the distance between lines of text is the same as that between a paragraph and headline. The eye does not perceive the contrast - it becomes more difficult to navigate the text. The easiest way to resolve this conflict by reducing the spacing:
14. Use the corporate design
Often, the company already has branded fonts, colors or characters. They can be easily moved to the newsletter - then a letter will be a continuation of the site. The easiest way to do this is when the company has a ready-made brand-book - from there you can take the fonts, logo and corporate colors.
If there is a brand book, not a problem. Corporate colors and fonts can be found using special extensions for the browser. For example, in his Google Chrome I use the Eye Dropper, to see the color, font and Typ.io.
Many fonts are added in the letter did not come out - mail applications will not display them. In these cases, we recommend to take the safe fonts from the same family, that are installed on the site.
15. Develop a universal template for different mailings
Conveniently, when for each mailing is ready template - we only need to insert a picture and change the text. In general, do not need to touch vorstku. Companies often use this approach - we unload email-marketing and designer, so they are not distracted by routine tasks.
For example, we have to send digest UniSender use a single template. Changing the text and illustrations, but the overall structure remains the same: a hat, a short introduction, the article of the week, news, event announcements, footer.
Create a layout, you can email, even if you had never engaged in design. We recommend to start with the block editor: it is possible to collect a beautiful letter, which displayed correctly on all platforms and will automatically adapt to the mobile device. To know HTML and CSS for this is not necessary.
Make beautiful writing can be in the block editor UniSender . You can choose a template for your business scope or to sketch a design from scratch. A simple letter in it, you can create in just 10-15 minutes.