I've run into an issue where HTML emails sent through Campaign Monitor are generally looking good in most clients, but for some reason in Gmail and OWA the background is turning bright green, see below.
My developer has looked at the code and believes that some extra <div> code wrappers are being added that are the cause of this.
Any ideas? The original newsletter is here.
Thanks in advance for any insights.
Hi Barnaby, the skinny here is this newsletter is a bit of a example of the troubles that can happen when email newsletters are created using a CMS, or some software that isn't really cut out to create HTML email code. The issues with it go beyond simply this green background color - for example, this is what I'm seeing in my inbox: http://cl.ly/image/0m3Y0v0J3c0v
If I were to see a [Message Clipped] message like this, I'd likely just trash the message.
Why is this happening? [Message Clipped] tends to appear when the message size has exceeded a certain threshold. Essentially, the CMS (or similar) has generated an excessive amount of code, to the point where it's a) blowing out the message size, and b) impossible to determine which CSS classes and HTML code are actually making a difference to the design.
There's also a lot of invalid code, for example:
In addition, the use of <div> instead of a table-based layout will ultimately cause layout issues in Outlook.
My advice at this point is to rebuild the layout outside of your CMS - it may even be desirable to code this design from scratch. I understand that no-one wants to hear this, but from the moment I viewed the source, it was evident that the tools you are using have taken far from an elegant approach to creating email newsletters. For more tips and advice, you may want to take a look at our Email Design Guidelines.
Thank you for your response. We're adjusting things on our end with the CMS to make them work better and are making good progress, so we're going to keep at it for a bit since generating things manually outside of Drupal isn't really an option for us - way too much work each week!
One thing we'd like to be able to do via the API is to deactivate the option to move our CSS inline, since we've already taken care of that. Is there a way to do this via the API?
We're also finding that the standard website CSS aggregation and compression we are employing on our production server are messing with the final output. (Tests sent from our development server, where these are turned off, are fine.) Any advice on dealing with this problem?
Thanks for your help,
Hi there Barnaby, thank you for being so understanding, following my feedback here. It's not possible to turn off the inlining when creating from a template, I'm sorry to say. Hopefully there's a way to turn off the inlining on your end!
We're also finding that the standard website CSS aggregation and compression we are employing on our production server are messing with the final output.
This is so tricky, as we can't see really what's going on with the code generation on your end. In a perfect world scenario, I'd recommend creating an email template, then using our API to create campaigns from this template, as this would give you much greater control over the look and code cleanliness of the final email newsletter. You then won't have to worry about the CSS styles that Drupal is needlessly adding.
Thanks, Barnaby - if there's anything we can assist with on our end, don't hesitate to let us know.