How-to: Rules for the layout of email-letters

E-mail is an excellent communication tool that allows companies to deliver content to the audience in a way that is convenient for them. At the same time, reading letters in plain text format is not always convenient, therefore, modern graphic e-newsletters use various graphic elements.

HTML HTML layout is an interesting and rather difficult task. Emails should be equally well displayed on older devices and versions of software clients.
')
In today's article we will talk about how to create email-letters that look good on any devices, and also consider how to adapt the HTML code of existing mailings to display them on phones and tablets.

Translator’s Note: The material presented below contains a significant number of technical terms that may cause inaccuracies in the translation. If you notice a typo, mistake or inaccuracy of the translation - write to us and we will fix everything promptly.

HTML basics for email

The main problem with the layout of email-letters is the fact that there is a huge amount of software for reading such messages - from desktop products like Eudora Outlook, AOL, Thunderbird and Lotus Notes to web services like Yahoo !, Gmail, Mail.ru and mobile mail applications.

How the software is used by each of these tools for rendering HTML will depend on which HTML and CSS code will work and which will not.

Providing cross-browser web site mapping is not easy, but when it comes to email, it is still more difficult. Each of the existing programs for working with mail can display the same letter in completely different ways. And even if you achieve more or less the same display in different client programs, it’s too early to rejoice, because how the letter will ultimately look depends on the width of the user's screen.

If you are going to typeset letters manually or use a ready-made template, you should follow two basic rules for creating HTML for email:

1. You must use HTML tables for more control over the letter template. Even if you are accustomed to relying on CSS on the web - do not transfer this habit to the world of email, because it does not work with the diversity of client software.
2. Use inline CSS (inline) for more control over other elements of the letter (fonts, background color, etc.) - this is a great version of CSS Inliner from Pechkin .

The easiest way to see how HTML tables and embedded CSS can be used in email-letter templates is to download some of these templates from the Campaign Monitor and MailChimp sites ( note: here are some examples of Pechkin-mail client email design examples ).

When studying these patterns, several things will be noticeable, which we will discuss in more detail below:

• CSS style declarations are placed after the tag , ;
CSS: font: 12px/16px Arial, Helvetica , , font-family , font-size line-height ;
span div , HTML;
CSS , - CSS-.
, ;
CSS: font: 12px/16px Arial, Helvetica , , font-family , font-size line-height ;
span div , HTML;
CSS , - CSS-.

  

  Step 1: Using HTML Tables for Layout Templates

  
  Yes, the tables are back. Yes, the web is already far ahead, but we are not on the web! Of all the multi-emailing email clients, finding one that has broad and high-quality support for CSS is also a task. This means that we simply have to use the tables if we want the mailing letters to be created consistently displayed to each reader.
  
  So you have to put aside the best practices of meeting web standards and roll up your sleeves, sorting out the layout.
  
  The first step towards creating an HTML version of a letter is to choose a template — one-column and two-column templates work best for newsletters because they help minimize the chaos that often occurs when you try to shove a large amount of information. Letters in one column are also better displayed on smartphones and tablets.
  
  A one-column pattern usually consists of:
  
  
  1. The heading containing the logo and a certain number of navigation links to the parent site - for the purpose of branding and familiarizing the readers of the letter with the design of the site itself.
  2. Internal links that lead to some sections of this particular letter.
  3. The basement (footer) at the bottom of the email-message, which most often contain links that duplicate the navigation from the header, plus instructions on how to unsubscribe.
  
  Two-column letters also have a header and footer. As in the case of a two-column web page, in such messages one column is narrow - it contains links for more information and other navigation elements, and the second, wider column contains, in fact, the content of the message. To make such letters appear well on smartphones and tablets, we have to put a lot of effort into the layout.
  
  Messages in which goods or services are promoted are created in a similar fashion, but contain less content than newsletters. Often they include one two key sentences and sometimes contain a large picture, on which is an explanatory text and several links under the image.
  
  All the above properties can be encoded using HTML tables, thanks to which the space is divided into columns and rows. Only with the help of tabular layout you can create templates that will be displayed on any device and in any mail programs.
  
  Regardless of the intended design of the letter, you need to remember that the most important information should be placed as close as possible to its upper part - this will allow the user to see it immediately after opening the message. The upper left corner of the letter is the first point where the reader is looking.
  
  Here is the approach you can use when creating HTML letters:
  
  
  • For two-column templates, one table is created for the header, the second for the central columns with content, and the third for the footer. These tables are "wrapped" in yet another general table ("container"). The same approach can be used for single-column templates, just a table with content should consist of one column. This approach is especially good if the letter contains a lot of images, divided into different cells. A simple table with rows ( colspan=”2” ), ( Lotus Notes).
    Inside the tables and tags, , . , border="0" , valign="top" , align="left" ( center, ), cellpadding="0" , cellspacing="0" .. . , . , border="0" , valign="top" , align="left" ( center, ), cellpadding="0" , cellspacing="0" .. .
    Even if the design of the letter does not imply the display of the table border, during development it is useful to set the border=”1” value - this helps with debugging and searching for problems that may arise with the alignment of content inside the tags . «», border=”0” .
. «», border=”0” .

    This approach may cause dissatisfaction of fans of the development of the latest standards, but this is the only way to achieve an acceptable result. In addition, the use of tabular layout does not imply the use of outdated methods in other aspects of creating email lists. For example, no matter how bad Lotus Notes displays HTML, you never need to bypass it with a tag

     .        HTML  MS Outlook 2007,      . 
     
     ,   .       . 
     
     
      Step 2: Add CSS Styles 
    
    
     Above, we talked about the fact that many email clients are not strong in supporting CSS.  However, this does not mean that you should not use styles in your letters that you create using tables.  Just need to take into account a few points. 
    
    
    
     First of all, you should use the built-in styles to store all the necessary information in them, as shown below: 
    
     
    
     <p style = "color: red;"> </ p>
    

    
    In the same way, you can use , , , ..

CSS HTML- , -. — Gmail style . link , : email- , .

-, , , 98%. (, Yahoo) 1% , . , 95% 90%, . , , 100%.

, . , . (, ) .

, float . Gmail CSS float ( Yahoo Outlook online ). , float . — . ( ).

, — . : .

: email- , , , . , CSS style=”margin: 10px 5px 10px 0;” , . , . CSS, , .

MailChimp Campaign Monitor, , - HTML- . , Campaign Monitor “BodyImposter” — -. CSS, - , , Gmail .

, , , ..

CSS HTML- , -. — Gmail style . link , : email- , .

-, , , 98%. (, Yahoo) 1% , . , 95% 90%, . , , 100%.

, . , . (, ) .

, float . Gmail CSS float ( Yahoo Outlook online ). , float . — . ( ).

, — . : .

: email- , , , . , CSS style=”margin: 10px 5px 10px 0;” , . , . CSS, , .

MailChimp Campaign Monitor, , - HTML- . , Campaign Monitor “BodyImposter” — -. CSS, - , , Gmail .



    Step 3: Apply Best Practices

    
    Creating valid HTML using the steps you described is only part of the way. There are other practices that need to be followed to create a quality mailing list.
    
    The next step is testing the resulting email on various email clients. As a rule, at this stage problems will emerge, for the solution of which one or other tricks will be needed.
    
    The first tools for testing emails are Firefox and Internet Explorer browsers. If the message looks good in them, then there is a great chance that in clients like Outlook, Yahoo, Gmail and others there will be no big problems with it. If this is possible, you should even go ahead and test the letter in IE 6 - this will allow you to see how the letter will be “rendered” in Outlook 2003. To understand in some detail how the letter will appear on the iPhone and iPad, you need to test it in Safari.
    
    After the letter is normally displayed in IE and FF, you need to send it to a certain range of test email addresses using the email distribution service. Ideally, the sample should have accounts from the most popular mail services - of course, the final choice depends on which domains have the mailing list addresses. If there is no one among them, with mail to Yahoo, then you shouldn’t waste time fitting the letter for this system.
    
    The following are useful layouts that facilitate the testing phase:
    
    
    • Sometimes switching from a percent in percentage to a fixed value improves the situation. This is not ideal, since readers often “resize” the browser window while reading a letter, but sometimes there is simply no other way to make a letter look different in different clients.
    • If there is a problem with the distance between the columns, you should first play with the attributes of the cellspasing and cellspasing . If this does not help, then the margin and padding CSS attributes should be applied. On older email programs, the version with pure HTML works better.
    • If the cell , . HTML. , . HTML. , . HTML. immediately after the tag on the same line as it.
    
    In addition to this, it is recommended to follow the best practices listed below:
    
    
    • You should avoid using javascript. Most email programs will disable it anyway.
    • If the image is “sliced” and placed in several cells of the HTML table, you need to check the letter using different test accounts. Sometimes it happens that the letter looks great in Outlook, the image is dispersed in other mail programs. In addition, it is worth considering the option in which the image becomes the background for a new HTML table, which contains all the rows and columns of the table in which parts of the image will be displayed. This can achieve the same effect as when "cutting" the image with a smaller amount of code. It must be remembered that Outlook 2007 does not show background images - it is always important to test the letter on the most important and popular mail service for subscribers.
    • For background images, it's better to use the background attribute instead of CSS. This allows you to achieve greater uniformity when working with various mail services.
    • You need to store the images from the letter on the web server, ideally, in a folder other than where the pictures of the company's main site are stored (for example, the folder may be called /images/email ), and you can never delete them. Some people open letters of the week and months after they are received, using them like bookmarks in the browser - to return to the desired content.
    • The images must use the attributes alt , height and width . Setting the values ​​of these elements improves results when working with Gmail. In addition, this allows the letter template not to fall apart if the user has disabled the display of pictures. Note: Outlook 2007 does not recognize the alt attribute.
    • In link tags you need to use the target=”_blank” attribute - people who read the letter in the web client are unlikely to want the link to open in the same window.
    • Using 1x1 pixel images can help align the content of the letter, but often such tracking pixels use spammers to see if this letter has been opened. Therefore, the use of such small images increases the likelihood that the letter will be marked by the mail system as spam.
    • Also, you do not need to use huge images above the actual letters - this is another favorite tactic of spammers, and the filters do not like this very much.
    
    It is very important to make sure that the letter is displayed correctly in mail clients, in which the display of images is disabled. In a large number of email clients, the default setting is “off”. This means that when using a background image with white text on top of it, if it is impossible to load this image, there will be problems. To avoid this, you need to set a dark background color for this part of the HTML table.
    
    After setting up and carrying out the work that led to the fact that the letter is qualitatively displayed on the test email accounts, you can “get rid of” it through the final checklist. It might look like this:
    
    
    • Is the correct information displayed in the “From” field (in the form of a name, and not just an e-mail address)?
    • Is the subject line correctly filled in?
    • Is the contact information correct and visually obvious?
    • Is there an explanation in the headline that “you received this letter because ...” and links to unsubscribe from its mailing list in its basement?
    • Is there a request in the letter to add the sender's address to the user's contact list?
    • Is there a link in the letter header to display it in the web version?
    
    Many email services allow you to test how the letter will be displayed in different mail systems - this allows you to see possible problems before sending it.
    
    

    Step 4: Layout for Gmail, Lotus Notes and Outlook 2007

    
    Gmail, Lotus Notes and Outlook 2007 pose new challenges for layout designers and designers. For example, in Outlook 2007, CSS support is much worse than in previous versions of the service.
    
    Gmail allows more liberties - since this is a web service, it cannot control the content of the displayed message. Accordingly, Google engineers had to work hard to ensure that their mail system worked correctly, regardless of the quality of HTML and CSS in the letters themselves.
    
    As a result, Gmail behaves like an artifact from the 90s, when web standards were at a primitive level.
    
    First of all, Gmail removes the CSS styles contained between any style tags, regardless of where they are found in the letter. The only alternative to styles is the display of fonts within HTML tables, but the font is often larger than expected (regardless of the structure of HTML).
    
    The positive moment of all these difficulties lies in the fact that if you managed to deal with the three mail programs mentioned above, then the likelihood that the letter will look good in other systems increases several times.
    
    Here are a few tricks that work in Gmail and old email clients:
    
    
    • It is better to determine the background color in the cell bgcolor , CSS.
      A side effect of this approach is the fact that the background image can be made arbitrarily long - if the content in the letter is of different size, then using the super-long picture allows you to increase or decrease the height of the letter depending on the message text. However, in Outlook 2007, background images are completely ignored.
      If this works better, then you can use padding to specify the size of the cell fields . margin , padding — . . margin , padding — .
      In case you need to display a border around a cell , , Gmail - , div , , , .
, ( ), color: .
, .
Gmail , . 10 — .
HTML- Gmail , , , , , . , , Google .

Gmail « » — Lotus Notes. .

, , Notes «» . — , . , , , Notes.

. , Notes HTML , .

, , :

, , Gmail - , div , , , .
, ( ), color: .
, .
Gmail , . 10 — .
HTML- Gmail , , , , , . , , Google .

Gmail « » — Lotus Notes. .

, , Notes «» . — , . , , , Notes.

. , Notes HTML , .

, , :


      • As discussed above, you should use a container table that contains all the internal tables of the template (letter header, content and footer). This will fasten all parts of the HTML-letter together, did not allow them to move apart when displayed in Notes.
      • You should leave a pad from the empty space around the container table, specifying the width in percent (and setting the width to less than 100%) and using cellpadding at least 5.
      • Avoid using style declarations in email tags . Notes, Gmail . (inline) <table , , , , , .
URL , -. Notes , .
( ) Notes. , .
colspan HTML-. Notes — — .
. -, , Notes , .
Notes. , .

Gmail Lotus Notes Outlook 2007, .

Campaign Monitor CSS, , - .

. Notes, Gmail . (inline) <table , , , , , .
URL , -. Notes , .
( ) Notes. , .
colspan HTML-. Notes — — .
. -, , Notes , .
Notes. , .

Gmail Lotus Notes Outlook 2007, .

Campaign Monitor CSS, , - .



        Step 5: Layout for phones and tablets

        
        A huge number of people read HTML-letters, opening them on their smartphones or tablets, and not just on the web or on the desktop. This means that the adaptation of tables for display on mobile devices will be extremely useful - besides, it is not so difficult.
        
        To do this, use the CSS @media definitions to define cells HTML- . , iPhone 13 , .

- - @media , , .

@media HTML- :

HTML- . , iPhone 13 , .

- - @media , , .

@media HTML- :



         @media only screen and (max-width: 480px) { /* mobile-specific CSS styles go here */ table[class=email], table[class=email-content] { clear: both; width: 320px !important; font-size: 13px !important; } } 

        
        This code should be placed immediately after the body tag, after the class=”email” in the table definition and the class=”email-content” in the cells . ( -) 480 .

HTML- . HTML- CSS float:left HTML align=”left” . class=”email” , — class=”email-content” .

.

. ( -) 480 .

HTML- . HTML- CSS float:left HTML align=”left” . class=”email” , — class=”email-content” .

.



        Conclusion

        
        Many people who receive certain mailing lists prefer to view HTML letters, rather than their plain text versions for a variety of reasons. For developers, however, the task of creating an HTML distribution may not be so trivial.
        
        In today's article we tried to describe some of the problems and their possible solutions, as well as give tips on creating markup that will work in various mail programs.
        
        

        List of sources for further study:

        
        The following resources contain valuable information that will help all who wish to better master the layout of letters in HTML:
        
        
        • Campaign Monitor: Guide to CSS Support in Email
        • Campaign Monitor: Responsive Email Design
        • MailChimp: Email on Mobile Devices
        • MailChimp: Email Blueprints
        • MailChimp: Email Marketing Field Guide
        • Pechkin-mail: Design examples of email newsletters
        • 5 rules for the layout of email-letters from Pechkin