How to make beautiful writing without designer

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.

Block Editor Interface UniSender

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.

Recommended dimensions for writing a computer screen

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.

Bezdushny layout is converted into newsletter cute

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.

Font settings in UniSender editor. You can choose only safe fonts - all of them will normally be displayed in all email applications
Designer fonts in mailing lists. All of these logos in letters - with sewn image link

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.

For example, there is the logo crawled under a translucent image. Make a vorstke when tables will be difficult

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.

Rubber layout of sending Email Soldiers: while reducing the viewing area separate blocks jump to each other
Pictures for cell adapted with the help of zoom: do not cut, only the scale has changed
Here the first picture are cut off so it looked better in the newsletter. The second picture is unchanged

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:

  • JavaScript
  • Of Flash-animation
  • CSS-animation
  • Video
  • forms
  • 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.

Message in Spam - all content is placed on one picture. View other masterpieces from the spam folder can be on the list UniSender
But "Mosigra" sends the letters that consist only of text and links

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.

The sending of T-F "Suitcase" a lot of links, but they are all made in the form of text. The pictures also sewn links, but if you turn them off, there is always an alternative

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.

"Netologiya" each letter starts with a thematic animations that somehow plays the first article of the digest

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:

  1. Objects located close to each other are perceived due (Artemy Lebedev, "The theory of proximity").
  2. 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:

How we perceive the location of various objects in relation to each other. explained below

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:

Now, between the header and the body text appeared contrast

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.

Website and newsletter Boomstarter. The same logo, colors and fonts

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.

Newsletter digest UniSender always comes with a single template

Conclusion

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.

subscribe

Subscribe to SearchEngines newsletter

— Articles of renowned experts

— Analytical reviews

— Important news

— Hot topics from our forum

preview 6 secrets to a successful marketing during the holidays

6 secrets to a successful marketing during the holidays

For many companies, holiday revenue is a substantial share of the total retail sales...
preview Writing brilliant case study and improve conversion

Writing brilliant case study and improve conversion

Any businessman will not be difficult to describe the benefits of the brand, but quite another thing to back up their real-world examples...
preview How to reduce the cost of Lida in social networks is almost 4 times in two weeks. case

How to reduce the cost of Lida in social networks is almost 4 times in two weeks. case

Author: Ivan Papus, founder https://ipapus.com When it comes to Digital-promotion, any business owner secretly hopes that every guest of his site - a client who buys something...
preview Digital-Fall 2019: A review of business activities, which should add to Calendar

Digital-Fall 2019: A review of business activities, which should add to Calendar

We have studied the autumn 2019 conference of the year and put together a list of 10 professional "digital is-togethers" for all those who in one way or another...
preview New Marketing. How and why to work with inflyuenserami

New Marketing. How and why to work with inflyuenserami

Author: Gulnaz Rakhmatullina, project team leader in Topface Media Marketers all over the world are sounding the alarm: traditional advertising is losing ground, consumers...
preview How to manage brand reputation

How to manage brand reputation

Reputation is more important than money. It builds trust, from which sales depend. Is it possible to control the reputation on the Internet? Yes, with a SERM...