Using CSS in HTML Email
Sending emails in HTML format has always been a controversial issue. From myself I can only say that if a letter really should look decent, having an original design, then why would it be formatted accordingly. Create letters in HTML format just because everyone is doing it, I think it is not necessary. If you decided to create just such a letter, there are five golden rules for creating letters in HTML format.
* You can send such letters to users who can view it.
* The letter should look the same in all mail programs.
* Do not abuse such letters. Sending such letters even once a week is too much.
* The letter must contain alternative text.
* Do not forget to add an external link to the letter.
Email first then design
Write the letter first in plain text. What it gives is, firstly, a letter that can be read, because in any case you must provide the text equivalent of the letter, secondly, it will facilitate further design, create a clearer picture and understanding of how you will “paint”. Sending HTML and plain-text messages is simultaneously called Multipart / Alternative email format or MIME. Most mailers support it.
')
Couple note on creating plain-text email: Limit the string to 60 characters and use only full URLs.
After creating a text version of the letter, you can think about the design. Since each user acts in his own way with letters in HTML format, you will have to create a design that will look the same in all mail programs. Their list is quite large, do not forget about mobile email clients.
To create a single design it will be easier to list what you can not do .
What not to do
* You
* Add a link to an external style sheet . Not all clients support external style. It is better to forget about him at all.
* Add Background-image / Background-position . Gmail does not support.
* Clear floats . Again Gmail.
* Set boundaries . For the most part, CSS positioning does not work at all.
* Add any font styles . There is a possibility that Eudora will ignore them.
There are a few more things to avoid. A complete list of what online email clients support can be found in this article.
What can i do
Only inline styles can be used, i.e. You can set the style directly in the tags.
* Can use images
* Can and should use tables in the design.
Tables
Look at the code of any HTML letter - most of them are created using tables. Tables are an ideal way to create a letter design that works equally in all mail programs. The width of the window for viewing a letter is very different from program to program. It is best to create a table with a 100% width and align it to the center, in which to attach another table of a fixed width. In the external table, it is possible to additionally set the background color. It is better to forget about using containers (blocks) for centering with auto borders.
Instruments
If you are too lazy to deal with styles, there are ready-made tools for creating email. Of the free ones, this is Premailer, an online service that creates a letter from a ready-made HTML page. Paid - MailChimp
In addition, the network has a huge amount of resources on this topic. You can start with this material Designing, Coding, and Delivering HTML Email: A Beginner's Survival Guide
Some useful tips
* Use only full paths to images (for example, www.yourserver.com/email/images/logo.gif ), not relative
* Before sending thousands of letters, make sure that your provider does not block your list.
* Test, test and test your emails again in various email programs.
* Limit the width of the letter to 600px. Ideal - it's 440px
* When adding styles, be sure to check the resulting design with the styles turned off, and the letter should look accessible, understandable and readable.
* Do not create letters similar to Viagra advertisements, just do not make spam-like idiotic jokes.
* Use the footer for its intended purpose, putting in it all supporting information, such as telephones, formal replies, addresses, etc.
* Always respect the law. Remember the existence of the CAN-SPAM act, which requires you to follow a variety of rules when doing commercial email distribution. You are obliged to indicate the postal address in the letters and a working link to the reply.
Original article
Transfer
* You can send such letters to users who can view it.
* The letter should look the same in all mail programs.
* Do not abuse such letters. Sending such letters even once a week is too much.
* The letter must contain alternative text.
* Do not forget to add an external link to the letter.
Email first then design
Write the letter first in plain text. What it gives is, firstly, a letter that can be read, because in any case you must provide the text equivalent of the letter, secondly, it will facilitate further design, create a clearer picture and understanding of how you will “paint”. Sending HTML and plain-text messages is simultaneously called Multipart / Alternative email format or MIME. Most mailers support it.
')
Couple note on creating plain-text email: Limit the string to 60 characters and use only full URLs.
After creating a text version of the letter, you can think about the design. Since each user acts in his own way with letters in HTML format, you will have to create a design that will look the same in all mail programs. Their list is quite large, do not forget about mobile email clients.
To create a single design it will be easier to list what you can not do .
What not to do
* You
* Add a link to an external style sheet . Not all clients support external style. It is better to forget about him at all.
* Add Background-image / Background-position . Gmail does not support.
* Clear floats . Again Gmail.
* Set boundaries . For the most part, CSS positioning does not work at all.
* Add any font styles . There is a possibility that Eudora will ignore them.
There are a few more things to avoid. A complete list of what online email clients support can be found in this article.
What can i do
Only inline styles can be used, i.e. You can set the style directly in the tags.
* Can use images
* Can and should use tables in the design.
Tables
Look at the code of any HTML letter - most of them are created using tables. Tables are an ideal way to create a letter design that works equally in all mail programs. The width of the window for viewing a letter is very different from program to program. It is best to create a table with a 100% width and align it to the center, in which to attach another table of a fixed width. In the external table, it is possible to additionally set the background color. It is better to forget about using containers (blocks) for centering with auto borders.
Instruments
If you are too lazy to deal with styles, there are ready-made tools for creating email. Of the free ones, this is Premailer, an online service that creates a letter from a ready-made HTML page. Paid - MailChimp
In addition, the network has a huge amount of resources on this topic. You can start with this material Designing, Coding, and Delivering HTML Email: A Beginner's Survival Guide
Some useful tips
* Use only full paths to images (for example, www.yourserver.com/email/images/logo.gif ), not relative
* Before sending thousands of letters, make sure that your provider does not block your list.
* Test, test and test your emails again in various email programs.
* Limit the width of the letter to 600px. Ideal - it's 440px
* When adding styles, be sure to check the resulting design with the styles turned off, and the letter should look accessible, understandable and readable.
* Do not create letters similar to Viagra advertisements, just do not make spam-like idiotic jokes.
* Use the footer for its intended purpose, putting in it all supporting information, such as telephones, formal replies, addresses, etc.
* Always respect the law. Remember the existence of the CAN-SPAM act, which requires you to follow a variety of rules when doing commercial email distribution. You are obliged to indicate the postal address in the letters and a working link to the reply.
Original article
Transfer
Source: https://habr.com/ru/post/22471/
All Articles