Layout mailing: debriefing
In my previous topics, I gave only a dry theory about the layout of mailings, and I think that it was time to practice. The reader will not grasp the cardinally new information regarding the previous articles, but will see how the tips I described earlier are applied in practice. As an example, we will use the layout of the mailing list of the fictional company (he drew himself). With the layout, and then the analysis of the layout can be found on the cut.
Layout mailing
Mailing Usability
Layout mailing: view from the inside
')
As a basis, we take the table at 710px with zero indents and collapse. As it was written in the early topics, the collapse is necessary in order to avoid one-pixel indentation between cells in MS Outlook. Just set the gray frame to frame the base.
In this example, the cap is quite simple, and the text used in it is not critical for selection and copy-paste, so the entire cap can be made up entirely with a picture. Areas sensitive to click (for example, the Learn More button in the header) are set based on the map tag.
In the body of the letter will be more complex structures, for the simple reason that all indents will be done with spacers. Let me remind you that blank.gif (single-pixel transparent .gif file - 1450821408255127738039) acts as a spacer, which guarantees an iron display of the layout everywhere.
The code of the body of the letter came out a little large, so it lies in the paystyn , but you should not be afraid, it is quite readable. The volume of the code gives an abundance of tables nested in each other.
Attention! Another important note is swinging imitation indents. Gif strut may not be less than the standard line-height in height . Therefore, in the example of the letter body code (in the case of lists), you can observe a way to reduce the spacer in height. This is done like this:
For especially picky. I did not pick up the entity for the icon for the square of the list, so I inserted the essence of “tambourines”. If you want a square, look for the essence or replace it with a picture. Also in some places there may be discrepancies in the values ​​of colspan cells. Sometimes they may not be indicated at all, but I indicate by habit. Disagreements to collapse also do not always lead. But one way or another, always conduct test mailings before sending letters, even if the template has undergone a slight change.
The blue border for the footer, as you might have noticed, was indicated at the base of the layout. For contact information, we will build a two-column table with padding-spacers.
Please pay attention to the fact that in the footer code after the line of domain.com 2011 , as well as after Peter’s phone number, the br tag is put (for some reason it eats it). I also want to focus on the link to unsubscribe from the newsletter. We deliberately made it the color of the text and removed the decoration in the form of an underscore, which makes the link minimally noticeable, but at the same time we are good - we inserted a link to the reply in the body of the letter.
PS I do not know how much I blew up your brain with my own examples, but if you are interested in analyzing more complex layouts, write, we will do it! :)
UPD: and here I am corrected in the case.
For missed
Layout mailing
Mailing Usability
Layout mailing: view from the inside
')
The foundation
As a basis, we take the table at 710px with zero indents and collapse. As it was written in the early topics, the collapse is necessary in order to avoid one-pixel indentation between cells in MS Outlook. Just set the gray frame to frame the base.
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <table width="710" align="center" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:#cccccc 1px solid;"> <tr><td border="0" style="border:none;"></td></tr> <tr><td border="0" style="border:none;"> </td></tr> <tr><td border="0" style="border:none; border-top:#1667b2 5px solid;"></td></tr> </table> </body> </html> Cap
In this example, the cap is quite simple, and the text used in it is not critical for selection and copy-paste, so the entire cap can be made up entirely with a picture. Areas sensitive to click (for example, the Learn More button in the header) are set based on the map tag.
<map id="map" name="map"><area shape="rectangle" coords="700,200,602,162" href="http://domain.com" alt="learn more" /></map> <img width="710" height="195" src="http://habrastorage.org/storage/2eaa88b4/0e1af19d/85f2e20d/e389e5e2.png" usemap="#map"/> Letter body
In the body of the letter will be more complex structures, for the simple reason that all indents will be done with spacers. Let me remind you that blank.gif (single-pixel transparent .gif file - 1450821408255127738039) acts as a spacer, which guarantees an iron display of the layout everywhere.
The code of the body of the letter came out a little large, so it lies in the paystyn , but you should not be afraid, it is quite readable. The volume of the code gives an abundance of tables nested in each other.
Attention! Another important note is swinging imitation indents. Gif strut may not be less than the standard line-height in height . Therefore, in the example of the letter body code (in the case of lists), you can observe a way to reduce the spacer in height. This is done like this:
<tr><td height="5"><div style="line-height:0;"><img src="1450821408255127738039" width="5" height="5" /></div></td></tr> For especially picky. I did not pick up the entity for the icon for the square of the list, so I inserted the essence of “tambourines”. If you want a square, look for the essence or replace it with a picture. Also in some places there may be discrepancies in the values ​​of colspan cells. Sometimes they may not be indicated at all, but I indicate by habit. Disagreements to collapse also do not always lead. But one way or another, always conduct test mailings before sending letters, even if the template has undergone a slight change.
Footer
The blue border for the footer, as you might have noticed, was indicated at the base of the layout. For contact information, we will build a two-column table with padding-spacers.
<table width="100%" cellpadding="0" cellspacing="0" style="border-collapse:collapse; border:none;" border="0"> <tr> <td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td> <td/> <td/> <td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td> </tr> <tr> <td/> <td align="left"> <span style="font-family:Tahoma; font-size:12px; color:#404040;">domain.com (c) 2011<br/><a href="%unsucscribe_link%" target="_blank" style="font-family:Tahoma; font-size:12px; color:#404040; text-decoration:none;">unsucsribe</a> from all lists</span> </td> <td align="right"><span style="font-family:Tahoma; font-size:12px; color:#404040;">St.Petersburg +7(812)123 45 67 <br/> Moscow +7(495)123 45 67</span></td> <td/> </tr> <tr> <td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td> <td/> <td/> <td width="20" height="20"><img src="1450821408255127738039" width="20" height="20" /></td> </tr> </table> Please pay attention to the fact that in the footer code after the line of domain.com 2011 , as well as after Peter’s phone number, the br tag is put (for some reason it eats it). I also want to focus on the link to unsubscribe from the newsletter. We deliberately made it the color of the text and removed the decoration in the form of an underscore, which makes the link minimally noticeable, but at the same time we are good - we inserted a link to the reply in the body of the letter.
PS I do not know how much I blew up your brain with my own examples, but if you are interested in analyzing more complex layouts, write, we will do it! :)
UPD: and here I am corrected in the case.
Source: https://habr.com/ru/post/114234/
All Articles