Layout e-mail newsletters - "pitfalls". Part one. Pictures

Good afternoon, dear habravchane!

Not so long ago, we came up against the task of creating e-mail newsletters. This is not the most pleasant thing, but many companies are actively using corporate newsletters, and layout is becoming an increasingly important task.



It would seem that difficult - to impose a simple page? But there are “pitfalls” that can bewildered even an experienced layout designer. It is these “stones” that the post is devoted to (we make a reservation right away - all the experiments described in the post were carried out under Windows with the software that many have at hand).

First Stone - Images

Virtually every newsletter contains pictures. Logo, hat, photos, social network icons ...

There are 2 ways to use pictures:

1. Upload from server

Pros:

• Low weight letters;
• All email programs “understand” such use of pictures and are able to load them from a specified location.

Minuses:

• In large bureaucratic companies, it is often not possible to quickly allocate space on the server for displaying pictures, and placing pictures on a third-party server is unacceptable for such companies. In this case, uploading images from the server is basically impossible.
• Client policies may prohibit uploading graphics. For example, in Windows Live Mail, Outlook Express, Outlook 2007, no images are uploaded by default. Pictures are loaded only if the user manually allows you to perform this action, or if he (again, manually) configures the program to automatically upload images. In other mail programs, blocking the loading of graphics can be manually configured by the user intentionally.
  
  

Blocking graphics, firstly, leads to the fact that the user has to perform unnecessary actions to view the pictures, and secondly, if the pictures were not loaded right away, then while viewing the letter, it will not be possible to view the pictures.

')

2. Attaching images directly to the letter

The first thing that needs to be said is how exactly to achieve the attachment of pictures to the letter. When viewing the html-code of letters with attached pictures, you can see that the paths of all the embedded pictures are set using the special identifier cid.

The MIME standard, which describes the transmission of data via e-mail, defines in particular the mechanism for transmitting non-textual content (such as pictures). " MIME defines a set of e-mail headers to define additional message attributes ." One of these headlines is Content-ID. Content-ID is a unique identifier for a message part. The value of the identifier is indicated in angle brackets after the title:

Content-ID: <1.23.44455.9874563210@test.example>

The main condition for the formation of the Content-ID is uniqueness, one of the conventions that was adopted regarding the formation of the Content-ID is the use of the “@” symbol and an indication of the host name of the computer to the right of it, to the left of the sign there should be a unique identifier for this computer.

When using pictures in the body of letters (img tag), the link to the picture (“src” parameter) indicates the required identifier using the “cid” URI scheme, the identifier syntax differs from the Content-ID by the absence of angle brackets:

cid: 1.23.44455.9874563210@test.example



In addition to headers, the MIME standard defines a data conversion scheme for transmission via e-mail — this is the base64 scheme. Any image that is transmitted in the body of the letter is first converted to base64 format.



Thus, in order to manually generate a letter with attached pictures, you need to convert the pictures to base64, register the Content-ID headers, and for all images in the “src” parameter, prescribe the URI scheme with the necessary identifier.



You have to agree, it’s not so easy to do it manually and it will take a decent amount of time. However, there is no need to do it manually. Mail programs that allow you to use html-templates of letters for distribution, automatically convert images themselves, put down headings and identifiers, convert absolute paths to pictures into cid uri-schemes.



It remains only to determine in which mail programs you can use html files as message templates.



In Outlook Express, this feature is and is described in many sources (“Message - Create with use — Select a form ...”). But in a more modern analogue - Windows Live Mail there is no special option, as there is none in Outlook 2007 . However, common sense suggested that the opportunity should be somewhere, and it was revealed. To use html-templates in these programs, you need to drop the html-file of the letter onto the Inbox folder in the program from the folder in which the letter is located — the letter will automatically be generated from the template. At the same time, if the letter uses pictures that lie somewhere on the computer, and absolute paths are written to them - the pictures are automatically attached to the letter, and the paths are automatically changed to the resource identifiers “cid” ":" content-id.

The important point is that absolute paths should be spelled out. Example: the picture header.jpg lies in y: \ temp \ mailing \ along with the html file of the letter. If the path is registered to the picture

src = "y: \ temp \ mailing \ header.jpg" or

src = “file: /// Y: /temp/differe/header.jpg” - the image will be loaded. If you register simply

src = "header.jpg" - alas, nothing will come of it.

Common advantages:

Pictures are displayed in all email programs. Even if the automatic loading of graphics is disabled in the program settings, “embedded” pictures will be displayed (you do not need to load them);

There is no need to quickly search for a place to place pictures (as mentioned above, for large bureaucratic companies such a search can be very problematic).

Total minus:

The letter will weigh more - each recipient will receive a letter with a full set of pictures.

Comparison of Windows Live Mail, Outlook Express, Outlook 2007 programs in terms of using HTML templates

Original layout

Windows Live Mail

Minuses:

• All pictures used in the mailing list will be attached to the letter as attachments, and this is an important point: even if the same picture is used 100 times (spacer, for example), 100 identical pictures will be attached to the letter (!!!);
• When using gifs with transparency, some mailers may have display problems. For example, in the program TheBat! instead of transparency, black appears;
• Images in jpg will add "shadows" - that is, in fact, the images spoil. In TheBat! corrupted images are displayed with strong distortions.

Outlook Express

Pros:

• Duplicate pictures will not be attached to the letter - even if the picture is used 100 times, only one picture will be attached to the letter.
• Jpg are transmitted normally, without distortion.

Minuses:

• When using transparent gifs, instead of transparency in TheBat! there will be a black background.

Outlook 2007

Pros:

• Jpg are transmitted without distortion;
• Absolutely identical pictures will not be attached with duplicates to the letter, one picture will be attached;
• If a transparent gif file is used to “fill in” individual cells, Outlook 2007 analyzes this, converts the gif to png, and attaches as many png files to the email as there are differently sized areas of the “filled” gif.

The mechanism on the example:

The list uses spacer.gif file in the size 1x1, transparent. This file is used to fill several areas: 2 cells 800x10, and 3 cells 120x10. As a result, 2 png files are attached to the letter: one is 800x10, the other is 120x10. Also, the mailing list uses 2 times the file top_g.gif, which is opaque - it is attached to the letter once, it is not converted to png.

Minuses:

• Outlook 2007 paid - the license can either be purchased separately or in the MS Office 2007 package (not available only in the Home And Student version).

Summary:

Various useful articles were read in the search for truth (special thanks to Aralot for the article 10 recommendations on the html layout of emails and dudeonthehorse for the article Layout of mailing lists: debriefing and the preceding 3).







Which of the two ways to use pictures in e-mail lists to use is an individual question, the one and the other have their own pros and cons. So one cannot give definite advice here - it all depends on the situation.