What is the best practice of styling an Email body?

Asked

Viewed 861 times

13

I’m at the stage of developing a welcome email. I would like to know the most correct and used practice of adding the style in my email.

My question is: should I use CSS inline, embedded or external?

I analyzed that many sites use the inline form, but I’m worried about maintenance in the future.

css emailing
  • 1

    @Renan Yes, but kind as that CSS is used, inline, embedded or external?

  • I would like to know what the best practice is, but I do not know why you have already denied the question...

  • 1

    Many email services do not carry external and embedded sheets. You may use them, but it is at your own risk.

  • @So I will stylize inline even, thank you.

2 answers

14


Using linked CSS is easier to change colors and background if you keep the same extrusion.

Linked CSS is the recommended model, because in this template all the code CSS is in a separate file and can be linked to several pages website. This is the best model to promote the reuse of code.

However in the case of email avoid using external CSS.

  1. Some email clients do not accept. Both in HEAD, and in BODY.** Use CSS inline (right in the element), but do not abuse Properties like position, float and etc...
  2. All images should have display:block, so it prevents Gmail and Hotmail from adding a spacing between them.
  3. Do not use style="color: #fff"; Use style="color: #ffffff";
  4. CSS3 / HTML5: Feature a very low compatibility rate, so they are not recommended.
  5. Finally remember to avoid using Divs if your template has multiple columns, in this case tables are the most reliable tool.
  6. You should not build your entire template on images because some email programs block the viewing of these images.

inserir a descrição da imagem aqui

Source

Note the following table that shows what is most advised to use in the various email clients

inserir a descrição da imagem aqui

See also this website will show the tags you should or should not use on the various email clients

On the google page you can also find this useful information about the operation of gmail

There are tools that convert the linked CSS code into inline CSS giving the following example

10

Browser other questions tagged css emailing

You are not signed in. Login or sign up in order to post.