Merge CSS and HTML in Newsletter v3

Posted on 14/04/2011 15:41:58

When viewing newsletters sent from Newsletter v3 in Gmail (just an example) the styling often is lost. It seems that Gmail ignores stylesheets and style-tags included in the HTML.

It would be very nice to implement a function that merges CSS and HTML in page-based newsletters.

What I mean is that when the newsletter module collects the HTML from the selected page, Dynamicweb should parse the CSS files attached to that page, and apply these styles directly to the HTML elements.

Example:

You have a page with a h2-tag that looks like this:

Headline

Attached to that page is a CSS file containing the following:

h2 {font-size:12px;margin-top:10px}

When the user has selected the page to send as a newsletter, Dynamicweb parses the CSS file and merges it with the HTML. Then the h2-tags looks like this:

Headline

I have build a custom newsletter system in PHP that does this, and our newsletter looks perfect in Gmail :-)
It would be a very nice feature to have en Dynamicweb.

In fact, Via Biler (viabiler.dk) is asking for this feature!

Replies

Posted on 14/04/2011 15:44:45

My HTML tags where not converted to HTML entities, so my example is not very readable :-)

I have attached an image with the example.

Posted on 14/04/2011 15:46:53

Is it just me, or is the image not attached?

Well, it should be available here: http://convincesolutions.dk/css_html_merge.png

Nicolai Høeg Pedersen

Posted on 14/04/2011 16:08:27

We could do that, but there are so many other things to consider before it is good.

try having a search:
http://www.google.com/search?sourceid=navclient&ie=UTF-8&rlz=1T4GGLL_daDK400DK400&q=designing+newsletter+html

It also contains some links to ready e-mail templates that you can start out with.

Posted on 14/04/2011 16:31:21

Thank you for the Google link.

Still, to my opinion, what is needed is that styles are applied directly to the HTML elements, to ensure the best possible view in different e-mail clients.

But this would require the user to handcode the newsletter pages, or apply the right styles to every single HTML element by using styles added to /Files/System/styles.xml. Neither of those options are user friendly.

Nicolai Høeg Pedersen

Posted on 14/04/2011 16:46:30

I do not agree. It would help - but only a little.

Problem is that everything before the body is stripped in hotmail and gmail. End it is easy to move your css inline into your body tag.

But there are so many other "rules" you have to follow if you want your mails to look good. And the best way to do that is downloading some of the templates like http://www.mailchimp.com/resources/html-email-templates/.

If you take a look at the source code of these great templates, you will find solutions to all kind of e-mail client problems.

Posted on 14/04/2011 18:02:04

You are right - moving the style tag inside the body tag is easy. But it is still stripped in Gmail.
This is what I experience, which is backed by this guide: http://www.campaignmonitor.com/css/

Also, it is my experience that when you apply styles directly to the HTML elements, the elements are displayed correctly in Gmail.

And considering how many people use Gmail, I think it would be a good idea to take Gmail into account.

Your link to MailChimp looks very useful! But as they state: "Inline CSS is safer" (http://kb.mailchimp.com/article/how-to-code-html-emails/)
They seem to have taken this into account by making MailChimp apply CSS styles directly to HTML-elements: http://blog.mailchimp.com/css-fixer-for-html-email/

And right now, in Dynamicweb, when building page-based newsletters, the only way to apply CSS directly to HTML elements is by switching to "Source view" in the editor or to apply styles to every single element by using styles in "/Files/System/styles.xml". And I don't like to ask users to do this. It is not very user friendly.

As you may have noticed, I think it would be very cool if Dynamicweb could do the work for us! ;-)

Nicolai Høeg Pedersen

Posted on 15/04/2011 00:08:39

Point taken - will take it into consideration.

Jacob Bertelsen

Posted on 05/01/2012 13:08:13

Ah, nice to see that you have already discussed this.
Bump :)

Developer forum