有关HTML电子邮件时事通讯的CSS编码标准的困惑

Question

i am coding Email newsletters. i have seen some guidelines regarding Good email coding.. i want to ask about css code for Email newsletters for example its preffered to code inline css but for some free templates i found code like this

       <style type="text/css">

       body { color:#000; background-color:#fff; font-family:Arial, Helvetica, sansserif; text-align:center; }
       h2 { color:#2255DB; font-size:16px; margin-top:15px; margin-bottom:0px; }        
       h2 a:link { text-decoration:none; }
      .footer { fontsize:11px; text-align:center; color:#2255DB; }// and son on 

       </style>

in body code for fotter is like

    <p class="footer" style="color:#2255DB;"> footer...</footer>//again style  tag

and sometimes i found like this total inline styling ..

    <span style="font-weight: bold; width: 525px;">
    Lorem ipsum dolo
    </span><br><br>// and son on  ,,  

Both the above mentioned codes are working fine in Email clients i have also seen standards from Campaign monitor etc, so i am confused which style is better .. should we use style in as in above mentioned code and or total inline coding , Please if someone can clear me about this ..it would be great favor

EDIT : once coded is there any free service that can help to check if its valid code for mail clients ?

Answer 1

Many mail clients will remove embedded stylesheets. It's best to use inline styles for everything.

In your example, you're styling the BODY tag - but if I read your email in Gmail - the page already has its OWN body tag - so yours will be stripped out.

I've found the campaign monitor guide to be an excellent resource to follow.

Here's a good test: save your email at a static HTML page, then open it on MS Word. It's a pretty good "worst-case scenario".

If you are going to be doing any serious email marketing work, Exact Target has an excellent tool that will actually render-out your email in different clients and give you a PDF of screen shots from those platforms to review.

Answer 2

From the HTML emails I have done, as well as following the advice from http://24ways.org/2009/rock-solid-html-emails/ , I would recommend always putting styles inline.

You mentioned http://www.campaignmonitor.com/css/ , which does show that Gmail would be the client where styles would have issues not being inline.

Edit: If there is any interest on why Gmail is the black sheep in this scenario, check out Section 1194.22, http://mail.google.com/mail/help/accessibility.html

Answer 3

To make sure that the HTML newsletter looks as close as the designs I would definitely use inline styling.

Unfortunately you have to be very specific with your styling, otherwise some software (Gmail for instance) will override your style declarations. It is a real pain sometimes, but it's worth doing it that way IMO.

Same thing goes for HTML email signatures.

So definitely go for the inline styling :)

Oh, and one more thing. I know that it's 2012 and loads of designers/front-enders advice to use html tags (even html5 elements) in HTML emails and signatures, but I'd try to stick to the old-school way and use tables to make sure there is no unnecessary artefacts with the code.

Answer 4

For email newsletter formats, as different email clients renders the layouts differently, I would strongly suggest you use inline css and primarily font tag and its attributes to styling the texts. Also use Table structure instead of div layouts to keep the layout consistent across most of the email clients.

Answer 5

Creating HTML templates for email is a real hassle. Testing is also often extremely difficult and unreliable, even from services which say they test everything. Older mail clients are known to ignore CSS and newer HTML elements. Additionally, a mail client may override some of your CSS with its own, mangling the layout.

My advice:

1) Use inline styles, as other people mentioned. Apply them to EVERYTHING. For example, don't expect adding a font-size to a div to apply to a <p> inside the div (as it should!). Add the style to both, or at least the immediate parent.

2) Use tables for any layout (ugh!), rather than margins and paddings. Some older mail clients could care less about CSS, and may strip all of yours out, or only apply snippets of it.

3) Design the email in a way that it is still readable even if the email client discards all your CSS (which is a distinct possibility). This is why you often receive email newsletters that are mostly images.

Answer 6

Use inline styles for everything to ensure that your HTML email displays the same on all clients.

There is a good tool you can use for inlining your HTML content. It is provided by mail-chimp (who i guess know a thing or two about emails) http://beaker.mailchimp.com/inline-css

Answer 7

It is always better to use inline styles rather then embedded css because some major email clients (such as Outlook 2007) do not support CSS in emails.

Gmail doesn't support embedded CSS.

One way to get around this issue is to convert your embedded CSS into inline using our CSS conversion tool in the "Developer Tools" dropdown in each test result.

There is another way of getting around the issue for things like font, font color and font size: Gmail converts your Body tag to a DIV. That can actually work to your advantage because you can use any inline CSS properties within your BODY that would otherwise be supported by a DIV. It is important to know, however, that some clients do not support the BODY tag so you should also include the same declarations within your embedded CSS. Also, keep in mind, you cant rely on BODY attributes like "bgcolor" because it is not supported within a DIV