Mailing lists are an important part of marketing campaigns. Creating emails for them is much like developing simple web pages. At the same time, certain important differences should be considered. In particular, sending out HTML letters will be effective only if they themselves are correctly composed technically, and their content and style are consistent with your goals. At the same time, there is an opinion that a layman cannot cope with this task. This article provides detailed step-by-step instructions on how to write and how to send an HTML letter.
Creation Features
A modern person receives an average of 5-6, and sometimes even up to 10 emails daily. This means that you only have less than a second to catch the attention of the addressee before he proceeds to read the next correspondence. Otherwise, your sending out HTML emails will be completely ineffective, and you just waste your time.
One of the nuances that increase your chances of attracting the attention of potential customers or other target audience is the creation of correspondence that is adapted to mobile devices. Indeed, most of those whom it is addressed to view mail, probably use them much more often than desktop computers and laptops.
For this purpose, you can apply, for example, a “responsive design” that can easily adapt to the screen size.
What should be the letter template
When imposing 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 the range of 500-600 pixels, which will ensure the correct display of text and other content on devices of any type.
- You need to use a large enough font for all text information, since on iOS devices HTML-letter will be inconvenient to read if the font size is less than 13 pixels.
- Elements that can be clicked should be large enough and isolated from the nearest links. In this case, the addressee will be able to easily activate them on the first try.
Training
Before developing an HTML letter, you should create a new folder on one of the disks and name it, for example, “Mailing Lists”. In addition, you must download and install Dreamweaver CS3. This Adobe product is one of the fairly simple website building tools and is well suited for developing HTML mailing list.
Create and save a document
Before writing the text part of the letter, you need:
- open the rather popular Dreamweaver CS3 (DW) HTML email builder;
- create a document by selecting "Transitional HTML 4.01" as the type;
- save the file with the extension “.html”;
- find the edit command in the top menu;
- uncheck the checkbox “Use CSS instead of HTML tags”.
Step-by-step instruction
Now, consider how to create an HTML email. For this:
- Sequentially open the "Insert" and "Table" tabs in the menu and set the desired table parameters. For example, rows - 2, columns - 1, width - 700, heading - above. Borders can be set, but you can do without them by specifying 0.
- Form the title of the letter. Since the HTML letter is intended for a larger number of recipients, they therefore use the [first_name] operator, which substitutes the desired recipient name.
- In the lower window "Properties" set the necessary parameters for the font, size and color of the title text and background color.
- “Exit” from the title bar. At the bottom of the screen, the parameters for the cursor "Center" and "In the middle" are set.
- We paste the finished text of the letter or “write” it directly in the DW program, selecting the desired type and font size, as well as the location of the text on the page.
Creating Hypertext Links
We’ll try to make HTML writing more professional and advanced. For this purpose, we will hide hypertext links in the content. To do this, select the place in the text that was chosen as a hypertext link. In the left corner at the top of the screen you should “open” the corresponding icon and insert your link in the pop-up window. At the same time, you must remember to check the “_blank” checkbox so that the link opens in a new window and the addressee after viewing it does not lose access to the main message.
How to insert pictures
Typically, a letter in HTML format ends with contact information, preferably with a photo of the author or with a suitable thematic picture. It can be downloaded from the Internet or pre-downloaded to the Internet, since you will need the URL of this image. This is best done through one of the free services.
In order to arrange such a nice ending:
- insert another one at the bottom of the letter, inside the main table with 3 columns and a parameter for a border of 0 pixels;
- place the cursor in the place of the table where they want to see the picture;
- mark in the lower window "In the middle" and "On the upper edge" for each section;
- select the tab "Insert" in the top menu;
- make a click on the inscription “Image” and in the drop-down menu we paste the address copied by us;
- click “Ok” 2 times.
View
Now that you know how to make an HTML letter, you need to make sure that the recipient 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 abracadabra appears instead of letters on the screen, then you should set auto encoding in your browser settings.
Encoding
From the section "Project" and go to the code part - "Code". In the window that opens, select and copy everything that is enclosed between the <body> and </body> tags. Save the file. Next, insert the HTML code.
Sending HTML Email
In order to do the newsletter open the "Smart Reporter" (SR). Then:
- choose or create a new letter by filling in the lines “Name” and “Sender Address”.
- fill in the line "Subject of the letter";
- mark HTML code in the upper left menu;
- paste the code copied in the program DW-code in a large field "Source";
- check the correctness of the display using the tool "Preview";
- delete the text version of the letter;
- test it for spam using the button of the same name located next to the "Submit" button.
Several popular patterns
Using the framework helps to significantly speed up the process of creating a letter and make it more accessible for a developer who is just 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 normally display both in the Gmail mobile application and in Outlook. It allows you to use blocks of HTML code either individually or by combining them.
- Ink is a collection of letters, the mailing lists of which are almost universal and compatible with any devices and clients.
- Really simple HTML email template. The template allows you to create newsletters very quickly and easily. True, they will have an extremely simple design in the form of a single column, which contains a call to action.
How to embed HTML in a letter
Let us now consider a slightly 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 window that opens with the code for the current gmail client page, find the place where the HTML message should be inserted, right-click and select "Edit as HTML".
- Paste the copied HTML code
- press the combination of two keys “Ctrl” and “Enter”.
For the same purpose, you can download the easy-to-use Mozilla thunderbird program. With its help, you can create a letter, and then first select "Paste" and then "HTML", and paste the code of your newsletter there.
Instruments
WordPress e-Newsletter plugin allows you to professionally manage newsletters and subscribers. Both of them are done directly through the WordPress admin panel. This circumstance provides complete control and is completely free, which cannot but rejoice.
Another simple tool is Bulletproof background images, which is a simple tool that allows you to get code for the background image of the generated letters. With it, you can make correspondence much more beautiful. To design a letter, you just need to specify the URL of the background image you like and its backup color, and also whether these parameters should be applied to the entire body of the HTML letter or if they are intended only for one of the table cells. As a result, you will get ready-made code that you want to copy and paste into your template.
Now you know how to send an HTML email. Its creation is not particularly difficult, especially if you use ready-made templates that are not lacking on the Web. Therefore, even those who do not have special knowledge can easily cope with this task.