Confusion About Css Coding Standards For Html Email Newsletter

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 cod

Solution 1:

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.

Solution 2:

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.

Solution 3:

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.

Solution 4:

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

Solution 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.