Html email question

I’m designing my first html email.

In my body tag on top I indicated a background color, plus some other colors.

<body bgcolor=“#D7D7D7” LINK=“#0066CC” VLINK=“#0066CC” ALINK=“#0066CC”>

Now I am testing my html emails. In the web-based email clients, hotmail and gmail (I haven’t checked yahoo) the background color is not appearing. In outlook, applemail and thunderbird everything is appearing correctly. Is this normal? Is there something that can be done to get the background color to appear?

Thanks,
Meryl

emailonacid.com is a great way to test your code in the top 18 email clients.

We send numerous emails every month to various readers and have come across many ‘bug’ and ‘features’ alike.

The latest is that Yahoo’s new email system will AUTOMATICALLY add a class called .yshortcuts to your emails.

They will choose which words appear as key words and make them links. Terrible.

What’s worse, they then also add a span tag to apply the class to your links.

When you care about the integrity of the design, this just isn’t acceptable.

However, though using anything besides font color/family and size is not good practice for wide audience range in HTML emails, you can over ride their class by including your own styles (embedded of course) using their class of .yshortcuts with your declarations.

The labor is that you will have to check your email first as you’ll have no idea what words they (their algorithms) will choose to highlight.

So, test, see where they are styling and write css rules to style them as appropriate.

We had emails where there were four different colors being used in the body, sidebar and legal so I had to write rules that targeted each, apply text-decoration:none and the appropriate color.

Technically, the words still link but at least visually, there won’t be distracting random links.

google can’t handle styles in the head. They must be inline. See Ralph’s link for what is supported.

You could also include a .css file in the <head> of your HTML.

Try to keep it simple, email clients can block all sorts of things.

Also, if you want to include an image, you can embed it in the email message it self. Attaching or hot-linking will cause images to be blocked by email clients.

Thanks,
Matt

You can apply here:
http://www.sitepoint.com/about/writeforus?source=products

SitePoint recently published a book on HTML email which is worth reading:
http://www.sitepoint.com/books/htmlemail1/

@bluellipse
Thanks for your feedback!

OK, thanks, got your PM. :wink:

I must admit, I haven’t tested in hotmail for a while, but going on this guide to CSS support for email clients (which you should have a look at), changing your <body> tag like this might help:

<body style="margin:0px; padding:0px; [COLOR="Red"]background-color: #D7D7D7[/COLOR]">

Let us know if that’s no use.

A few people have joined after the deadline. Articles need to be in by October.

Thank you for your reply Ralph and welcoming me to Sitepoint.

I did your exact suggestion. I still have two issues.

  1. The color is stopping at the exact top and bottom edges of the tables. Therefore when I send the file there is a white area on the top and bottom.
  2. Your solution worked in gmail but not hotmail.

I welcome any other suggestions. Thank you in advance.

Meryl

Hi Meryl, welcome to SitePoint! :slight_smile:

I find this setup works in every email client for me:

<body style="margin:0px; padding:0px;">
  <table border="0" cellspacing="0" cellpadding="0" width="100&#37;" bgcolor="#847787">
    <tr>
      <td>
        <table width="600" border="0" cellspacing="0" cellpadding="0" align="center" bgcolor="#847787">
          <tr>
            <td>
            </td>
          </tr>
	 </table>
        </td>
    </tr>
  </table>
</body>

So, have a full width container table with the background on that, then a table within that for the content.

Hope that helps! :slight_smile:

Ralph

I will give it a go. Thanks.

You might also be interested in the community book project:

It sounded very interesting, but the deadline was July 9th. With a quick read, it looked like it was team of writers. That could be a whole series; would’ve loved to participate in that.

If you think they would be interested in having more, I’ll post to it.

Thanks.

Chris

I already sent in a request to write a blog. The book would be interesting as I have used CSS, but not video. That sounde interesting.

Also sent in a request for a book. Hopefully they will be intrigued. Quick draft idea was:
1. Widgets For Help Now; Widgets For Content Later
2. Setup, Comment, Document, and Maintain
3. King Content – The Strictest Web Page You Will Ever Know
4. Don’t Look Now, You’ve Got Style – External CSS
5. Style Override of .NET objects, Slap it with SKIN; .skin file, the other style
6. JavaScript Libraries – Something You will Want to Check Out
7. Hello World! We Are Talking About The Planet This Time
Thanks.

Chris

Again Ralph thank you. Your suggestion worked in gmail.

I figured it out how to get the background to work in gmail, hotmail and yahoo.

For those who may be following this thread here it is:

<body leftmargin=“0” marginwidth=“0” topmargin=“0” marginheight=“0” offset=“0” bgcolor=‘#D7D7D7’ >

<table width=“100%” cellpadding=“10” cellspacing=“0” bgcolor=‘#D7D7D7’ >
<tr>
<td valign=“top” align=“center”>

<table width=“600” bgcolor=“#ffffff” cellspacing=“0” cellpadding=“0” align=“center” border=“0”>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

In essence, you can’t reliably get an HTML email to render consistently across different email and webmail clients. They are too buggy or lacking support for essential features - particularly Outlook and particularly the newest versions of Outlook :mad:

Your best bet is to check through the Campaign Monitor link that Ralph gave, and work out which elements you can use - sometimes you can accept that they just won’t have the effect you wanted (like a background colour), but other times they might break the layout completely so you would want to avoid them.

Then recreate the page as you want it to look in proper HTML, post it on your server, and add a prominent link to it at the top of the email with words along the lines of “If you can’t read this email properly, open it in a web browser”.

Could you post the code you are using? Or, if you want to send me the email, just PM me and I’ll send you my address. :wink:

That was an issue that I had to deal with en masse at one time and had a great deal of difficulty finding the right answer for help.

To that end, I am hoping that SitePoint will let me write a blog for them. I want to write one that demonstrates how to send an e-mail using CSS and HTML “the right way” in VBA from MS Access and sending it through MS Outlook 2010 in MS Office 2010.

If they do let me, it could provide a point of reference to other programmers using e-mail. I also want to post on how to automate customized e-mails for a list that exist in the database simplifying the writing of them using form based parameters. It is very cool, and very powerful code. I used similar code to send reports out when I worked for a state agency; over 100 counties with custom reports sent to their regions and county offices with custom self-naming pdf’s attached to them. I did it in GroupWise and MS Access 97 originally.

Guess that could be another blog post in itself.

But I see e-mail questions constantly and would love to be able to post to a location like SitePoint to share valid code that works.

So much automation, so little time. The more data you have, the better I can make you look. :cool:

Simply put, I want to answer your question and then some, to help you and others that will have the same question later. :slight_smile:

Chris

Chris