DESIGN TIP: 4 designers wanting 2 use black backgrounds on the emails

This is a warning really, we just discovered why black backgrounds for the entire page can be a bad idea. If your email includes a 'forward to a friend' link that uses the Campaign Monitor system, the email that gets forwarded includes a short bit of intro copy (your sender's note) above the HTML email that you created. This copy is black. If your email's background is also black, recipients won't be able to read it and it will look like a huge block of empty black space before they start scrolling.

We have not figured out a work around to this since you can't apply styles to the forward text.

So, either keep black relegated to table cells or use another color so the text shows up and folks don't have to scroll a mile before seeing the email.

If anyone knows a workaround, PLEASE post.


rockyshark, 7 years ago

Even if you can find a workaround for this issue - that won't help if people manually forward the email on using the normal Forward button in their email client. Most tend to have black or dark text, and so in many cases anything they manually type will be virtually invisible too, forcing those who know how to select what they have typed and change the colour. It's a bit of a usability headache.

I guess, like everything, it's a compromise. On the one hand, you have the impact of a totally back background. On the other, you have benefits of easier forwarding. Which choice to make? You'll need to weigh it up based upon your particular campaign, who the recipients are, and what the goals are.

MondoVox, 7 years ago

RockyShark Rocks!

fyredefyre fyredefyre, 7 years ago

I often will build extra cells outside of the email itself to act as a table. While it's not traditionally a background it works well with all browsers & can be configured to be a wide or as narrow as you wish.

The downside obviously is the extra coding required for each table to incorporate, but worth the effort personally. - Everything Email.
Email: Skype: fyredefyre
russellgreenwood, 7 years ago

I just put a style tag for "div" at the top of my CSS and style that with !importants how I want the Campaign Monitor forwarded styles to look, eg:

div {
                display: block !important;
                width:520px !important;
                background: #666666 !important;
                margin:10px auto !important;
                padding:20px 40px !important;
                color:#fff !important;
                text-align: left;
                -moz-border-radius: 10px;
                -webkit-border-radius: 10px;
                border-radius: 10px;

Works for a few clients, not all - but enough to be useful. Then if you put your own DIVs in afterwards, just style over the top.

Join 200,000 companies around the world that use Campaign Monitor to run email marketing campaigns that deliver results for their business.

Get started for free