Mailing lists: written kitchen

Every day I receive various mailings from many services, and by the nature of my work I am happy to criticize them. But this time I received a letter from PayPal c advertising partner stores, which I was very pleasantly surprised. This prompted me to “cook” a similar newsletter and share it with you.

Distribution scheme

In this picture I have separated the semantic parts of the letter about which we will talk separately in each subtitle. There are several grammatical errors in the layout, but to redo it for a long time, because it has already merged the layers;)

The foundation

To begin with, without touching the blocks marked on the diagram, we will focus our attention on the basis of our layout. Some mail systems sending letters have one peculiarity - they cut out the html, head and body tags, which in principle does not do anything wrong, but based on this fact, we can make our layout easier.
')

<meta http-equiv="content-type" content="text/html; charset=utf-8" /> <table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr><td align="center">  ""</td></tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr><td align="center">  </td></tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> </table> 

Here we separate the blocks in such a way as to simplify the layout in the future. The “Display” service block is stretched to the full width of the letter, and everything else will be enclosed in another table with a fixed width. Pay attention to the code element:

 <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="0"/></div></td></tr> 

This is a 10 pixel spacer which gives us an iron space between blocks. As an image we use a transparent .gif file of 10x10 pixels. If you are extremely concerned about the correct display in TheBat!, Then the background of the .gif file must match the background color of the place where it is located, otherwise TheBat! may paint transparent pixels black, which is not so desirable for display.

Service block "Display"

This block consists of two semantic parts. In the first we ask the person to include pictures in the mail client (which is quite logical), and view the letter in the browser. As for viewing, I have already spoken quite radically with this quote:

Our designer is an asshole, and is not sure that the letter he wrote will be displayed correctly in your mail client, so click here and read the letter we sent to you on the site .

Yes, it was somewhat categorical, and I probably rephrase my opinion. If you are confident enough in your layout, you can omit the link to view in the browser. If, nevertheless, no, then put it boldly, because so many do. As for the plain / text version of the letter, this link should be necessary so that people who prefer the text format of mailings, if desired, could get acquainted with the full version of the mailing.

This block is made up in our case quite simply:

 <span style="font-family:tahoma; font-size:11px; color:#404040;">, %username%.     ,         <a href="%view_in_browser_link%" style="color:#0077c0 !important;" target="_blank"> </a>     . ,   <a href="%mailto_link%" style="color:#0077c0 !important;" target="_balnk">mail@sampleshop.com</a>   ,       .</span> 

Do not forget to set the target for the link, and then some email clients have the ability to open the link in the client window, which is inconvenient.

The rest of the letter

Now let's talk about the next volume block, which we dubbed in the code above as "The rest of the letter." This block contains “header”, “greeting”, “content” and 2 service blocks below. I give the block code of this part:

 <table align="center" width="600" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr><td><div style="line-height:0;"><img src="hut.jpg" width="600" height="88" alt="sampleshop.com" title="sampleshop.com"/></div></td></tr> <tr><td> <table bgcolor="#f4f4f4" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr> <td> <table width="100%" bgcolor="#ffffff" cellpadding="0" cellapscing="0" style="border-collapse:collapse; border-left:#e5e5e5 1px solid; border-right:#e5e5e5 1px solid; border-bottom:#e5e5e5 1px solid;"> <tr><td></td></tr> <tr><td height="30"><div style="line-height:0;"><img src="blank.gif" width="30" height="30"/></div></td></tr> <tr><td></td></tr> </table> <table width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr> <td width="10" height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td> <td>   ""   "" </td> <td width="10" height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td> </tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> </table> </td> </tr> </table> </td></tr> </table> 

Without further ado, with a cap, we simply reflect it in the form of an image and set the width and height for it, as well as alt. Setting the width and height is necessary in order not to break the layout with the display of images turned off, as well as the user otherwise will not see the description of the image.

Block "Welcome"

The block of greeting is not critical, but it is good form. We select a picture match the target. In our case, the image is focused on the "family" audience, respectively, we want to sell products for the family, and not any geek gadgets or weapons;) We impose this:

 <table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td width="215"><div style="line-height:0;"><img src="family.jpg" width="215" height="130" alt="happy family"/></div></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td><span style="font-family:tahoma; font-size:12px; color:#404040;">, %username%, [br/][br/] -      .   ,      ![br/][br/] !  %shopname%</span></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> </tr> </table> 

I’ll mention again: In the code, the BR tags are enclosed in square brackets because the hacker doesn’t eat these tags in code listings.

Content block

In the content block, a classical method of attracting attention is applied in accordance with the heat map of that very attention. The map has already been used by me in articles, but the original source is Jacob Nielsen , a usability specialist at SUN Microsystems.

Placing the pictures on the left side of the screen, we catch the user's eye in this particular area, give a brief description of the product, and immediately next to the picture we encourage the buyer to take action. The buy button, located on the right, would have had a smaller effect, according to the map. And you can believe her, for it is not for nothing that Nielsen is called a usability guru. I also want to say that you should not have pictures in an alternate version (either to the left or to the right) - this leads to disorientation of attention.

Given that the letter as a whole is low-contrast, we add a noticeable effect to the buttons, painting them in a bright color that blends well with the overall color scheme.

Ah, they ate, ah, a Christmas tree, ah, ate evil wolves. Unnecessary patter, so that the code listing does not climb under the picture.

The block is being put together by analogy with the “Greeting”, but nonetheless I cite the code listing:

 <table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt=" !" title=" !"/></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> </tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt=" !" title=" !"/></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> </tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td width="120"><div style="line-height:0;"><img src="gift.jpg" width="120" height="120" alt="happy family"/></div></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> <td><span style="font-family:tahoma; font-size:12px; color:#404040;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries.</span>[br/][br/]<img src="buy-now.jpg" width="120" height="25" alt=" !" title=" !"/></td> <td width="20"><div style="line-height:0;"><img src="blank.gif" width="20" height="20"/></div></td> </tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> </table> 

Blocks "Security" and "Unsubscribe"

In the block called “Security” there is information that warns the user about possible fraudsters. It is quite logical and necessary if you have a serious store. This text is a tracing from the PayPal mailing list, but it can also be rephrased in its own way. I will not rant much about this. If you care about the safety of users, then decide how to prevent them. Service links - half a wish.

And finally, about sore - unsubscribe! The example shown on the layout is extremely successful. You inform the user of the reason for receiving the letter, and also specify to whom it was addressed. In the case of PayPal, the mechanism is tripled just perfect, I think! When you click on the “unsubscribe” link, you will be taken to a page addressed to you, where you are asked: “Do you really want to unsubscribe?”, And moreover, the interface implies the choice of what you want to unsubscribe: ".

From myself I will add one more option, which will not be superfluous: let the user choose the distribution option he wants to receive. In view of the great turbulence of thick masses, the opponents of HTML letters despise those who send them. Give the person a choice, and he will calm down.

And finally, the layout code of service units:

 <table align="center" width="100%" cellpadding="0" cellapscing="0" style="border-collapse:collapse;"> <tr><td><span style="font-family:tahoma; font-size:10px; color:#404040;"><b> ,       ?</b>[br/] ,      %shopname%,             .         , ,  ,        .        ,      ,      .   ,            ,  ,   .         ,    ,       %shopname%.          .  <a href="#" target="_blank" style="color:#0077c0 !important;"></a>,          .</span></td></tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr><td align="center"><span style="font-family:tahoma; font-size:11px; color:#0077c0 !important;"><a href="#" target="_blank" style="color:#0077c0 !important;"> ?</a> | <a href="#" target="_blank" style="color:#0077c0 !important;"></a> | <a href="#" target="_blank" style="color:#0077c0 !important;">  </a> | <a href="#" target="_blank" style="color:#0077c0 !important;"></a></span></td></tr> <tr><td height="10"><div style="line-height:0;"><img src="blank.gif" width="10" height="10"/></div></td></tr> <tr><td><span style="font-family:tahoma; font-size:10px; color:#404040;">       dudeonthehorse@gmail.com,                %shopname%. [br/]     <a href="#" target="_blank" style="color:#0077c0 !important;">  </a>.</span></td></tr> </table> 

As a result, we get!

PS

This is how we work. It looks like a lot of code, but if you use tabs correctly, the code is quite readable. If you do not master / no desire to go crazy, please contact. Good luck with your work!