How to create an HTML-letter: step-by-step instruction

Mailing lists are an important part of marketing campaigns. Creating letters for them in many ways resembles the development of simple web pages. At the same time, certain important differences should be taken into account. In particular, the sending of HTML-letters will be effective only if they are correctly compiled in a technical sense, and their content and style are in accordance with your goals. At the same time, there is an opinion that a layman can not cope with this task. This article provides a detailed step-by-step instruction on how to write and how to send an HTML-letter.

Features of creation

The modern person daily receives on average 5-6, and sometimes up to 10 emails. This means that you have only less than a second to catch the attention of the addressee before he goes on to read the next correspondence. Otherwise, your sending of HTML-letters will be absolutely inefficient, and you will simply waste time in vain.

One of the nuances that increases your chances of attracting the attention of potential customers or another target audience is the creation of correspondence, which is adapted to mobile devices. After all, most of those to whom it is addressed to view mail, certainly use them much more often than desktop computers and laptops.

To this end, you can use, for example, "responsive design", easily adapting to the size of the screen.

What should the letter template be like?

When you make a document intended for sending to correspondents, the following requirements should be adhered to:

• It should be made narrow enough, i.e. in size it should not exceed a range of 500-600 pixels, which will ensure correct display of text and other content on devices of any type.
• It is necessary to use a fairly large font for all textual information, since on iOS-devices the HTML-letter will be inconvenient to read if the font size is less than 13 pixels.
• Elements that can be clicked on should be large enough and isolated from the nearest links. In this case, the addressee can easily activate them from the very first attempt.

Preparation

Before you develop an HTML-based letter, you should create a new folder on one of the drives and name it, for example, "Newsletters." In addition, you must download and install Dreamweaver CS3. This product from Adobe is one of the fairly simple tools for constructing websites and is well suited for developing an e-mail letter in HTML format.

Create and save a document

Before writing the text part of the letter, you need:

• Open a fairly popular program-designer HTML-letters Dreamweaver CS3 (DW);
• Create a document by selecting "Transitional HTML 4.01" as the type;
• Save the file with the extension ".html";
• In the top menu, find the editing command;
• To remove a tick from the check-box "Use CSS instead of HTML tags".

Step-by-step instruction

Now, consider how to create an HTML-letter. For this:

• Successively open the "Insert" and "Table" tabs in the menu and set the necessary table parameters. For example, lines - 2, columns - 1, width - 700, heading - from above. Borders can be set, but you can do without them, indicating 0.
• Form the title of the letter. Since the HTML-letter is intended for a larger number of recipients, so use the [first_name] operator, substituting the desired name of the recipient.
• In the lower "Properties" window, set the required parameters for the font, the size and color of the header text, and the background color.
• "Exit" from the header area. At the bottom of the screen, you set the parameters for the cursor "Center" and "In the middle".
• We paste the finished text of the letter or "write" it directly in the DW program, selecting the desired type and size of the font, as well as the location of the text on the page.

Creating hypertext links

We will try to make the HTML-letter more professional and advanced. With this goal, we hide the hypertext links in the content. To do this, select the place in the text that was selected as a hypertext link. In the left corner at the top of the screen, you should "open" the corresponding icon and insert your link into the drop-down box. At the same time, do not forget to put a tick in the check-box "_blank", so that the link opens in a new window, and the addressee after viewing it has not lost access to the main letter.

How to insert pictures

Usually the letter in HTML format ends with contact information, preferably with the author's photo or with a suitable thematic picture. It can be downloaded from the Internet or pre-loaded on the Internet, since you will need the URL of this image. The best way to do this is through one of the free services.

In order to design such a nice ending:

• Insert at the bottom of the letter, inside the main table another with 3 columns and a parameter for the border of 0 pixels;
• Put the cursor at the place of the table where they want to see the picture;
• Note in the bottom window "In the middle" and "On the top edge" for each section;
• Select the "Insert" tab in the top menu;
• Make a click on the inscription "Image" and in the drop-down menu we paste the copied address;
• Press "Ok" 2 times.

Look inside

Now that you know how to make an HTML-letter, you should make sure that the addressee sees it in the correct form. To do this, before sending, you need to view your work in the Dreamweaver CS3 browser. To do this, click on the icon with the globe in the middle upper menu. If instead of letters on the screen appeared abracedabra, then you should put in the settings of your browser auto-coding.

Encoding

From the "Project" section and go to the code part - "Code". In the opened window, select and copy everything that is enclosed between the and tags. Save the file. Then paste the HTML-code.

Send an HTML message

In order to make the dispatch, open the SmartResponder (SR). Then:

• Choose or create a new letter by filling in the "Name" and "Sender's address".
• Fill in the line "Subject of the letter";
• Mark in the upper left menu HTML-code;
• Insert the code copied into the DW-code into the large "Source" field;
• Check the correctness of the display by means of the "Preview" tool;
• Delete the text version of the letter;
• Test it for spam, using the button of the same name, located next to the "Send" button.

Some popular templates

Using the framework helps greatly speed up the process of writing a letter and make it more accessible to a developer who is still learning the basics of creating web documents. The most popular templates are:

• Cerberus . This set of so-called responsive templates allows you to create letters that are normally displayed in both the mobile Gmail application and Outlook. It allows you to use blocks of HTML-code either individually or by combining them.
• Ink is the preparation of letters, the dispatches of which are almost universal and compatible with any devices and clients.
• Really simple HTML email template. The template allows you to create mailing letters very simply and quickly. True, they will have an extremely simple design in the form of a single column, in which a call to action is concluded.

How to insert HTML into a message

Let us now consider a somewhat different problem. To insert HTML code into an email, for example, gmail using, as in the example below, the Google Chrome browser, you should:

• Press the "F12" button or select the appropriate sequence of commands in the menu;
• In the opened window with the code of the current page of the gmail client, find the place where the HTML-letter should be inserted, make a right click and select "Edit as HTML".
• Insert the copied HTML code;
• Press the combination of two keys "Ctrl" and "Enter".

For the same purpose, you can download a simple Mozilla thunderbird program. With it, you can create a letter, and then first select the "Paste", and then "HTML", and insert the code of your mailing.

Instruments

The Wordpress plug-in e-Newsletter allows you to professionally manage mailing lists and subscribers. Both are done directly through the WordPress admin panel. This circumstance provides complete control and is completely free, which can not but rejoice.

Another simple tool - Bulletproof background images, which is a simple tool that allows you to get code for the background image of the created letters. With its help you can make correspondence much more beautiful. To design a message, simply indicate the URL of the background image you like and its backup color, and whether these parameters should be applied to the entire body of the HTML message or they are intended only for one of the table cells. As a result, you will receive the ready-made code that you want to copy and paste into your template.

Now you know how to send an HTML-letter. Its creation is not particularly difficult, especially if you use ready-made templates, in which there is no shortage on the web. Therefore even those who do not have special knowledge can easily cope with this task.