Layout email newsletters from A to Z for dummies
For more than 3 years I have been engaged in the design and layout of mailing lists, which are focused on English-speaking users. During the work we shoveled a huge pile of information, tried many layout options, filled a sufficient number of bumps. Typical bugs were found and fixed, which to some extent repeated in all email clients. There were also problems with some CSS properties - different email clients interpreted them differently. Each letter was tested on the most popular email clients: Gmail, Outlook, Yahoo, Android, iOS, MozillaThunderbird, Microsoft Outlook, The Bat. Mailings go to hundreds of millions of users and bring very good results. So, we proceed to the study.
For the layout of letters used table layout. We use only inline-styles, that is, apply directly to the tags. Writing CSS in the head and body tags is prohibited, as some clients will delete everything that is in these tags.
Such constructions will not work in the head and body:
If you are typing for all devices, including mobile phones and tablets, the width of the letter should not exceed 600px. If you use a width larger than this value, then the letter in width will not fit into your email client.
')
For html-tags tabular layout there are properties that reset the extra padding, boarders, as well as save us from some bugs in the future. They should always be used in all html tags of the letter.
border = "0" - the thickness of the frame in pixels;
cellpadding = "0" - indent from the frame to the contents of the cell;
cellspacing = "0" - the distance between the cells;
style = "margin: 0; padding: 0 " - reset the internal and external padding that some email clients add:
color: # 333333; font: 10px Arial, sans-serif - always use these properties for all links and reps, otherwise email clients will add their values ​​to these properties;
line-height: 30px - also used for all links and spans, otherwise email clients will set their value. Also with this property we can indent above and below between lowercase and block elements;
-webkit-text-size-adjust: none - a mandatory property for all line elements, used to fix a problem with the font size on iPhone iOS 6-7 / iPad devices. By default, these devices have a minimum font size of 13px, this property solves this problem;
display: block - makes a line element block:
alt = " " is a required property, should always be used, can be left empty;
border = "0" - frame thickness in pixels (px);
width = "100 " - the width of the image, if the picture is static and its real size is used, then we can also set its height height = "100" . If we need to make the size of the image smaller than it actually is, we control its size using the property width = "30" and it will proportionally change both the height and width;
display: block; - hack for Outlook, if you do not set display: block, then Outlook will add indents to the image.
Properties background = "" bgcolor = "" can only be used for a tag
as gmail does not perceive these properties in other tags, if you go to the mail using the browser Safari.
You should not use CSS properties for background blending, they will be ignored by some email clients:
For indentation, you can use empty table cells with a prescribed height or width, but this method is already obsolete, as it entails the clutter of the code. Indents can be made using CSS padding properties. This property can be used for all tags, but please note that if you apply it to the span tag, then desktop Outlook 2007/10/13 + will not apply indents.
The margin property also works, but is not fully supported in the web version of the Outlook.com mail server.
I advise you to apply padding to the table cell:
Or use indenting empty table cells.
For any HTML document you must use the DOCTYPE. It shows the browser how to interpret the HTML markup. There are different versions of HTML and XHTML, which have different syntax.
For letters, the most appropriate doctype is:
To emphasize the phrase or word in the text, we can visually highlight this part of the text. For this we can use font-weight styles : bold; font-style: italic; or tags:
Bold text, similar to the font-weight style: bold;
Oblique text in italics, analogue font-style: italic;
Line translation.
All colors in letters are specified as three pairs of hexadecimal digits (HEX) #dddddd . We also know that in the layout of sites apply an abbreviated entry. For example, #ffffff can be abbreviated #fff . But this is not necessary in the layout of letters; some email clients do not understand this record. You also do not need to write a hexadecimal color code in all large letters. Not all email clients will appreciate this. For example, # D4D4D4 should be written in this form: # d4d4d4 .
RGB color recording is also not perceived properly. For example, such an rgb color record (240,248,250 ) will not work.
There are email clients that by default do not show pictures and only after clicking on a certain button, pictures begin to be displayed. This causes some problems in the layout of letters. If the pictures are not displayed and its width and height are not specified together, then the mail client does not know how large this picture is and how to render the free space. Thus, the picture occupies all free space. It looks awful. Always write the width and height of the image to get rid of such problems. If this is not possible, specify the width of the image and then the letter will not be torn to the side.
In the work with mailing lists there are not quite standard bugs. This is due to the nuances of displaying letters by various email clients. Consider the most common:
1. If you use a span or another string tag, then the phone numbers and e-mail addresses of Gmail wraps you in a link and assigns a class in blue:
To solve this problem, you need to wrap the email and phone initially in a link. You also need to specify the necessary styles for the links.
For phone:
For email:
2. In order for the background outside the letter to be the full width and height, you need to add width = "100%" to the main table and set height = "100%" for td . Example:
There is no need to set the table height = "100%", there are problems with aligning the cells vertically inside the main table.
3. In the web version of the Outlook email client, it is not advisable to use string elements, since by default the email client adds its own line-height value.
display: block; "- solves the problem of displaying the line-height property in the Outlook email client. If you do not use it, the email client ignores the line-height value and adds its line-height value to it: 141% ;.
In mailing lists, only standard font sets are allowed that are present on all devices. I present to your attention a list of secure fonts that are on all devices.
Thus, these fonts can be used in mailings without fear and risk. If you still want to use completely non-standard fonts through the @ font-face rule, then be careful, this rule only works in IOS, Google mail and Android 4 (Gmail).
At the moment there are a huge number of methods of layout of adaptive letters, but we will focus on one of them.
The essence of this method is as follows: when you change the screen width of the device, the size of our letter automatically adjusts. Internal blocks, which are placed horizontally, with a lack of space, jump under each other, so that all the elements of the letter that are missing will go down.
The system of adjusting the letter to the screen size is implemented using styles and the center tag, which is located immediately after the main letter table. It turns out that all content is wrapped around the center tag:
If there is more than one block horizontally and these blocks have to be under each other when the width is changed, they must be wrapped in a span tag with styles:
The overall markup structure will look like this:
Thus, we have a common table with a size of 600px and inside two blocks of 300px (300px + 300px = 600px). When the size of the main page becomes even less than one pixel, the blocks do not have enough space and block number 2 becomes number 1 under the block.
Our entire structure will not work on the desktop in MS Outlook, so we’ll do a check for it and replace the center and span tags with ordinary tables:
You can use the rule (a) media for adaptive layout, but we have so far refused this method due to the low support of email clients of this property.
The next article will be devoted to the use of CSS 3 properties in the layout of letters. Also I will tell about CSS animation in mailings.
1. The main provisions
For the layout of letters used table layout. We use only inline-styles, that is, apply directly to the tags. Writing CSS in the head and body tags is prohibited, as some clients will delete everything that is in these tags.
Such constructions will not work in the head and body:
<link rel="stylesheet" type="text/css" href="/base.css"> <style type="text/css"></style> If you are typing for all devices, including mobile phones and tablets, the width of the letter should not exceed 600px. If you use a width larger than this value, then the letter in width will not fit into your email client.
')
2. Required properties for HTML tags
For html-tags tabular layout there are properties that reset the extra padding, boarders, as well as save us from some bugs in the future. They should always be used in all html tags of the letter.
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"> border = "0" - the thickness of the frame in pixels;
cellpadding = "0" - indent from the frame to the contents of the cell;
cellspacing = "0" - the distance between the cells;
style = "margin: 0; padding: 0 " - reset the internal and external padding that some email clients add:
<a href="#" style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;" target="_blank"></a> <span style="color: #333333; font: 10px Arial, sans-serif; line-height: 30px; -webkit-text-size-adjust:none; display: block;"></span> color: # 333333; font: 10px Arial, sans-serif - always use these properties for all links and reps, otherwise email clients will add their values ​​to these properties;
line-height: 30px - also used for all links and spans, otherwise email clients will set their value. Also with this property we can indent above and below between lowercase and block elements;
-webkit-text-size-adjust: none - a mandatory property for all line elements, used to fix a problem with the font size on iPhone iOS 6-7 / iPad devices. By default, these devices have a minimum font size of 13px, this property solves this problem;
display: block - makes a line element block:
<img src="#" alt="" border="0" width="100" style="display:block;"/> alt = " " is a required property, should always be used, can be left empty;
border = "0" - frame thickness in pixels (px);
width = "100 " - the width of the image, if the picture is static and its real size is used, then we can also set its height height = "100" . If we need to make the size of the image smaller than it actually is, we control its size using the property width = "30" and it will proportionally change both the height and width;
display: block; - hack for Outlook, if you do not set display: block, then Outlook will add indents to the image.
3. HTML tags that we can use in the layout
<table> <tr> <td><a href="#"></a></td> <td><span></span></td> <td><img src="" alt=""></td> </tr> </table> 4. Background overlays
Properties background = "" bgcolor = "" can only be used for a tag
<table> as gmail does not perceive these properties in other tags, if you go to the mail using the browser Safari.
You should not use CSS properties for background blending, they will be ignored by some email clients:
background: background-image: background-position: background-size: 5. Indenting
For indentation, you can use empty table cells with a prescribed height or width, but this method is already obsolete, as it entails the clutter of the code. Indents can be made using CSS padding properties. This property can be used for all tags, but please note that if you apply it to the span tag, then desktop Outlook 2007/10/13 + will not apply indents.
The margin property also works, but is not fully supported in the web version of the Outlook.com mail server.
I advise you to apply padding to the table cell:
<td style="padding: 10px;"></td> Or use indenting empty table cells.
7. Doctype (DOCTYPE)
For any HTML document you must use the DOCTYPE. It shows the browser how to interpret the HTML markup. There are different versions of HTML and XHTML, which have different syntax.
For letters, the most appropriate doctype is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 8. Work with text
To emphasize the phrase or word in the text, we can visually highlight this part of the text. For this we can use font-weight styles : bold; font-style: italic; or tags:
<b></b> Bold text, similar to the font-weight style: bold;
<i></i> Oblique text in italics, analogue font-style: italic;
<br /> Line translation.
9. Color
All colors in letters are specified as three pairs of hexadecimal digits (HEX) #dddddd . We also know that in the layout of sites apply an abbreviated entry. For example, #ffffff can be abbreviated #fff . But this is not necessary in the layout of letters; some email clients do not understand this record. You also do not need to write a hexadecimal color code in all large letters. Not all email clients will appreciate this. For example, # D4D4D4 should be written in this form: # d4d4d4 .
RGB color recording is also not perceived properly. For example, such an rgb color record (240,248,250 ) will not work.
10. Pictures
There are email clients that by default do not show pictures and only after clicking on a certain button, pictures begin to be displayed. This causes some problems in the layout of letters. If the pictures are not displayed and its width and height are not specified together, then the mail client does not know how large this picture is and how to render the free space. Thus, the picture occupies all free space. It looks awful. Always write the width and height of the image to get rid of such problems. If this is not possible, specify the width of the image and then the letter will not be torn to the side.
<img src="#" alt="" border="0" width="150" height="150" style="display:block;"/> 11. Problem solving
In the work with mailing lists there are not quite standard bugs. This is due to the nuances of displaying letters by various email clients. Consider the most common:
1. If you use a span or another string tag, then the phone numbers and e-mail addresses of Gmail wraps you in a link and assigns a class in blue:
To solve this problem, you need to wrap the email and phone initially in a link. You also need to specify the necessary styles for the links.
For phone:
<a href="tel:0 800 303 505" value="+380800303505" target="_blank" style="">0 800 303 505</a> For email:
<a href="mailto:exemple@gmail.com" target="_blank" style="">exemple@gmail.com</a> 2. In order for the background outside the letter to be the full width and height, you need to add width = "100%" to the main table and set height = "100%" for td . Example:
<table bgcolor="#000000" border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td height="100%"> There is no need to set the table height = "100%", there are problems with aligning the cells vertically inside the main table.
3. In the web version of the Outlook email client, it is not advisable to use string elements, since by default the email client adds its own line-height value.
display: block; "- solves the problem of displaying the line-height property in the Outlook email client. If you do not use it, the email client ignores the line-height value and adds its line-height value to it: 141% ;.
12. Fonts
In mailing lists, only standard font sets are allowed that are present on all devices. I present to your attention a list of secure fonts that are on all devices.
font-family: Arial, Helvetica, sans-serif; font-family: 'Arial Black', Gadget, sans-serif; font-family: Georgia, serif; font-family: 'MS Sans Serif', Geneva, sans-serif; font-family: 'MS Serif', 'New York', sans-serif; font-family: Tahoma, Geneva, sans-serif; font-family: 'Times New Roman', Times, serif; font-family: 'Trebuchet MS', Helvetica, sans-serif; font-family: Verdana, Geneva, sans-serif; Thus, these fonts can be used in mailings without fear and risk. If you still want to use completely non-standard fonts through the @ font-face rule, then be careful, this rule only works in IOS, Google mail and Android 4 (Gmail).
13. Adaptive layout
At the moment there are a huge number of methods of layout of adaptive letters, but we will focus on one of them.
The essence of this method is as follows: when you change the screen width of the device, the size of our letter automatically adjusts. Internal blocks, which are placed horizontally, with a lack of space, jump under each other, so that all the elements of the letter that are missing will go down.
The system of adjusting the letter to the screen size is implemented using styles and the center tag, which is located immediately after the main letter table. It turns out that all content is wrapped around the center tag:
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"> <tr> <td> <center style="max-width: 600px; width: 100%;"> </center> </td> </tr> </table> If there is more than one block horizontally and these blocks have to be under each other when the width is changed, they must be wrapped in a span tag with styles:
<span style="display:inline-block; width:260px;"> </span> The overall markup structure will look like this:
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <center style="max-width: 600px; width: 100%;"> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <!-- 1 --> <span style="display:inline-block; width:300px;"> </span> <!-- 1 --> <!-- 2 --> <span style="display:inline-block; width:300px;"> </span> <!-- 2 → </td> </tr> </table> </center> </td> </tr> </table> Thus, we have a common table with a size of 600px and inside two blocks of 300px (300px + 300px = 600px). When the size of the main page becomes even less than one pixel, the blocks do not have enough space and block number 2 becomes number 1 under the block.
Our entire structure will not work on the desktop in MS Outlook, so we’ll do a check for it and replace the center and span tags with ordinary tables:
<table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td align="center"> <center style="max-width: 600px; width: 100%;"> <!--[if gte mso 9]> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0"><tr><td> <![endif]--> <table border="0" cellpadding="0" cellspacing="0" style="margin:0; padding:0" width="100%"> <tr> <td> <!--[if gte mso 9]> <table border="0" cellpadding="0" cellspacing="0"> <tr><td align="center"> <table border="0" cellpadding="0" cellspacing="0" width="300" align="center"><tr><td> <![endif]--> <!-- 1 --> <span style="display:inline-block; width:300px;"> </span> <!-- 1 --> <!--[if gte mso 9]> </td></tr></table> </td> <td align="center"> <table border="0" cellpadding="0" cellspacing="0" align="center"><tr><td> <![endif]--> <!-- 2 --> <span style="display:inline-block; width:300px;"> </span> <!-- 2 --> <!--[if gte mso 9]> </td></tr></table> </td> </tr></table> <![endif]--> </td> </tr> </table> <!--[if gte mso 9]> </td></tr></table> <![endif]--> </center> </td> </tr> </table> You can use the rule (a) media for adaptive layout, but we have so far refused this method due to the low support of email clients of this property.
The next article will be devoted to the use of CSS 3 properties in the layout of letters. Also I will tell about CSS animation in mailings.
Source: https://habr.com/ru/post/252279/
All Articles