What is the best practice of styling an Email body?

12

I'm in the development phase of 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 inline, embedded, or external CSS?

I've noticed that many sites use the inline form, but I'm worried about maintenance in the future.

    
asked by anonymous 26.06.2017 / 16:31

2 answers

13

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

  

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

However in case of email avoid using external CSS.

  • Some email clients do not accept. Both in HEAD and in BODY. ** Use inline CSS (direct in element), but do not abuse properties like position, float and etc ...
  • All images should have a display: block, thus preventing Gmail and Hotmail from adding a space between them.
  • Do not use style="color: #fff"; Use style="color: #ffffff";
  • CSS3 / HTML5: They have a very low compatibility rate, so they are not recommended.
  • Finally remember to avoid using divs if your template has multiple columns, in which case the tables are the most reliable tool.
  • You should not build your entire template into images because some email programs block the viewing of those images.
  • Fonte

    Please note the following table that shows what is best for you to use on the various email clients

    Alsocheckoutthis site will show the tags you should and should not use on the various email clients

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

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

        
    26.06.2017 / 16:56
    10

    See this article link .

    Basically, it says that if you use the <style>...</style> tags in the header or body of your email, life's GMail will ignore them.

    In other words, in order for all mailclient to display your email correctly, you must use the tag's built-in style.

        
    26.06.2017 / 16:57