Add inline CSS to your web version, unsubscribe and forward to a friend links

May 22, 2007

If you're used to coding your email newsletters for Gmail, you're probably an expert on inline CSS by now. As our recent CSS research highlighted, Gmail doesn't support the <style> or <link> element. This means if you want your links to be in a size 11 font and a light blue color, you'll need to code something like...

<a href="http://www.campaignmonitor.com" style="font-size:11px;color:#4fb5e9;">Visit the web site</a> to find out more

OK, kind of annoying but it works. But what about our automatically generated links for unsubscribing, linking to a web-based version and adding a forward to a friend link. As you know, these are generated after you import your design from the tags present in your HTML, such as <unsubscribe> and <webversion> and up until now you couldn't add your own inline CSS to them. Well, not until today anyway.

Introducing the style="" attribute

By adding a style="" attribute to the unsubscribe, webversion and forward a friend tags, we'll automatically add that inline CSS to the personalized links we create for each recipient.

Using our example above, let's say we want to make our unsubscribe link at the bottom of the email blue and in size 11 font.

<unsubscribe style="font-size:11px;color:#4fb5e9;">Unsubscribe</unsubscribe> from our monthly newsletter list

We'd get <a href="http://www.unsubscribeaddress.com" style="font-size:11px; color:#4fb5e9;">Unsubscribe</a> from our monthly newsletter list

You can use exactly the same technique for the web version and forward to a friend tags too, such as <forwardtoafriend style=""></forwardtoafriend> and <webversion style=""></webversion>.

Posted in: New Features & Updates

17 Comments

James
May 22, 2007 9:22pm

Funnily enough our designer discovered this was working last week ;)
Dave Greiner
May 23, 2007 12:12am

Nice spotting James, at least that proves the syntax we went for made sense ;)
Mark Wyner
May 23, 2007 4:17am

It’s amazing how Campaign Monitor constantly evolves to improve the lives of web designers. How did we get along without you?
hcabbos
May 27, 2007 12:01pm

This isn’t working for me. I keep getting an error when trying to upload a template with this article’s suggestion.
Dave Greiner
May 28, 2007 11:34am

hcabbos, just to clarify, are you trying this with Campaign Monitor or MailBuild? This functionality is available in CM right now, but isn’t be in MailBuild just yet.
Tracy Floyd
June 21, 2007 4:52am

Awesome feature! Any idea when this wil be available in MailBuild?!?
Dave Greiner
June 21, 2007 11:12am

Cheers Tracy, it’s in our schedule and should make its way in there in the next month or so. We’ll post it in the MailBuild blog when that’s the case.
Alex
July 23, 2007 6:24am

Would it be possible to off load even more of the work on CM? If there was a way to define styles in the head (or body) and have them automatically convert into inline style declarations it would be incredible.

Even if the styles didn’t cascade, just copying classes into inline declarations would make coding mailout templates so much easier.
Abby
September 5, 2007 8:15am

Automatic inline CSS would be the answer to my prayers, too. Right now I use a different service for a non-profit client who once a year over a week and a half has to send a unique newsletter to 50,000 emails every day - Campaign Monitor costs, even with the bulk rate, are prohibitive at that scale. However, if Campaign Monitor implemented something like this it might just save me enough time in development to offset the cost difference. I love Campaign Monitor and wish I could use it for every client - you guys are the Rolls Royce of email campaigns. :)
Abby
September 19, 2007 4:17am

Instead of whining to Campaign Monitor, I decided to go to the source. I don’t really want easier creation of inline styles, I want Google to support style declarations in the head of HTML emails! Turns out their is a form to request it as a feature! Maybe if we get loads of designers requesting it, it will actually happen. I don’t know about you, but I have more problems supporting Gmail than any other email service.

https://services.google.com/inquiry/gmail_suggest/

Here is what I wrote under “I have a better idea:”

SUPPORT CSS STYLE DECLARATIONS IN THE HEAD OF HTML EMAILS!

I have to add significant extra hours to every email design project in order to take all my nicely separated styles in my nicely standards-compliant HTML prototype and then bloat my code by stuffing all those styles inline—just so that my gmail subscribers can see the same thing the rest of the standards compliant world sees. Not only is this bandwidth wasting for the world and more expensive (in terms of hours spent) to me and my clients, it makes me think very poorly of Google as I go through this soul sucking, professionally demeaning exercise.

Please support css style declarations in the head of HTML emails. Why can’t gmail support an email with style and content elegantly separated? Why is this standard of the web dismissed?

PLEASE PLEASE PLEASE.
Alex
October 2, 2007 5:26am

I took my own advice and created a script to make styles inline - see <a href=“http://code.dunae.ca/premailer.web/” rel=“nofollow”>http://code.dunae.ca/premailer.web/</a>.

The script takes any HTML document, reads all of its external styles and merges them into style=”” attributes.

It also converts relative links (/images/img.jpg) into absolute paths (http://example.com/images/img.jpg).

I can now, finally, design a newsletter without pulling out my hair.
Dave Greiner
October 2, 2007 5:07pm

Awesome move Alex, great work. We’ll make sure we post about this in the blog real soon.
Jonathan
October 12, 2007 6:23pm

Is this feature already available in MailBuild. I got an error uploading a template with these settings.

The month has already passed! ;-)
Chris
November 10, 2007 11:00am

I also can’t wait for this feature to be implemented in MailBuild. That will truly make it the perfect HTML e-mail builder.
Kev
February 2, 2008 3:30am

Yeah, i need it in Mailbuild! i hate Gmail!
counterstr
February 4, 2008 8:16pm

http://index1.yourgunter.com >sensual female nudes
Thomas
August 29, 2008 1:22am

Hello,

Any update about an implementation of this feature into MailBuild?

It is a must for me. Without that, unsubscribe/forward/webversion links are awfully displayed into Gmail.

Best,
Thomas.

Blog