HTML Newsletter

jason500 · #1 (**permalink**) Jan 4th, 2007, 19:42

Hello,

I work for a small company as the marketing assistant and would like to make HTML newsletters to send out monthly to our client database.

I know a little about web design from tutorials.

I have made a quick test which I have been sending to myself, but does not work, it displays just the code.

Here is what it should look like:
http://www.3dbuzz.com/vbforum/attach...chmentid=54990

Here is the code:
Made in Adobe Golive. Images obviously need to be linked to an actual source on the internet.

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=utf-8" />
  <meta name="generator" content="Adobe GoLive" />
  <title>Newsletter test</title>
  <link href="SAP%20Newsletter/web-content/css/basic.css" rel="stylesheet" type="text/css" media="all" />
 </head>
 <body>
  <table width="748" border="0" cellspacing="0" cellpadding="1" bgcolor="#b00f14">
   <tr>
    <td>
     <table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="white">
      <tr>
       <td>
        <table width="100%" border="0" cellspacing="0" cellpadding="5">
         <tr>
          <td>
           <table width="100%" border="0" cellspacing="0" cellpadding="0">
            <tr>
             <td width="736"><img src="SAP%20Newsletter/web-content/Newsletter-test_03.gif" alt="" width="736" height="34" border="0" /></td>
            </tr>
            <tr height="3">
             <td width="736" height="3"></td>
            </tr>
            <tr>
             <td width="736"><img src="SAP%20Newsletter/web-content/Newsletter-test_06.jpg" alt="" width="736" height="102" border="0" /></td>
            </tr>
            <tr>
             <td width="736">
              <p>This is a test.</p>
              <p></p>
             </td>
            </tr>
            <tr>
             <td width="736"><img src="SAP%20Newsletter/web-content/Newsletter-test_03.gif" alt="" width="736" height="34" border="0" /></td>
            </tr>
           </table>
          </td>
         </tr>
        </table>
       </td>
      </tr>
     </table>
    </td>
   </tr>
  </table>
  <p></p>
 </body>
</html>

I know emails only accept the <body> section of the code, but do I need anything from the rest of the code inside the body?

Also, I have been told to use inline CSS, not sure what this is exactly as I'm not really that familiar with HTML. Could someone please guide me in the right direction in relation to this code?

How can I make this display right in an email?
Would really appreciate someone's help. Thanks!

BGarner · #2 (**permalink**) Jan 4th, 2007, 21:43

Certainly,
Inline css will clear up all of these tables you have. Here is a tutorial...
http://www.w3schools.com/css/css_howto.asp
http://www.tizag.com/cssT/inline.php

I'm not an expert at html in emails, but I would google it and start with these tutorials and the xhtml tutorial at www.w3schools.com

Hope this helps!

BGarner · #3 (**permalink**) Jan 4th, 2007, 21:47

This page says to use tables...
http://www.sitepoint.com/article/cod...il-newsletters
Look at that too. I'm not entirely sure which is better.

moojoo · #4 (**permalink**) Jan 5th, 2007, 00:09

To do HTML e-mails you HAVE to use tables and inline styles. Keep in mind toot hat all the web based e-mail things not to mention Outlook, Mail.app etc all render things differently. So you need to really dumb down your code and use very out dated methods.

For example gmail does not read background-repeat so you have to cut your graphics the height of the table row to avoid tiling etc... And this is only a fix assuming they don't boost their font sizes..

ukgeoff · #5 (**permalink**) Jan 5th, 2007, 15:18

You might want to consider using a tool like GroupMail. It includes a WYSIWYG ish editor and sorts the coding for you. It also allows you to do lots of other thing associated with email marketing, etc.

Comes in various flavours depending on your requirements including a free version.

http://www.group-mail.com/asp/common/default.asp

jason500 · #6 (**permalink**) Jan 6th, 2007, 13:50

Thanks everyone for replying

I have just noticed that my css link is linked to a file on my computer. This may be one of the problems.

As I don't plan to publish this as a website, just want to send it by email. I think I would need to find the actual CSS code to replace the link?, I will see if I can find it when I get home tomorrow.

I will be sending this newsletter using outlook. I have been pasting the HTML code where you type a message, is this right?. I have tried with hotmail and gmail also. No joy.

Oh, This Doctype should have gone above the code I posted, not sure if it makes much difference:

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<A href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/CODE">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

The newsletter displays fine on my local web broser, so I think the code is ok.

moojoo · #7 (**permalink**) Jan 8th, 2007, 15:21

remove the doc type in HTML e-mails and you HAVE TO use inline styles and tables unfortunately. Browsers render differently and are much more advanced than E-Mail clients. You also need to test in Hotmail, gmail, yahoo!, netscape mail, Outlook, Mail.app, Entourage. Each one handles it differently. Here is a page with some info on what each webmail client reads and does not read.

Web clients:
http://www.campaignmonitor.com/blog/...css_1.html#web

Windows clients:
http://www.campaignmonitor.com/blog/..._css_1.html#pc

Mac clients:
http://www.campaignmonitor.com/blog/...css_1.html#mac

The easiest thing would be to send out a very simple HTML mail or even a text one with a link to an online version. Then you only need to build the page.

ukgeoff · #8 (**permalink**) Jan 8th, 2007, 15:54

Also consider that if you build an html only version, those people that block html emails incase of onboard nasties won' see anything.

The GroupMail software I refered you to before lets you create both.

Also in consideration of a persons bandwidth capabilities you might be best to follow what moojoo said and produce a text only version with a link to the online version. The best of all worlds.

jason500 · #9 (**permalink**) Jan 8th, 2007, 18:04

Thank you everyone for all the help and tips.

I have found the answer :cool: .

For all who were following this thread and future users who will search for this, here is how to send an HTML Newsletter in Outlook:

1. After you have designed the newsletter using whatever method you choose and you have an html file saved,
2. In Outlook, go to tools > options > 'mail format' tab
3. Send in this message format: HTML
4. Click the Stationery picker and create a new one. Name it and pick your html file as a template.
5. Then send by going to actions > New mail message using...(your created stationery).

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Newsletter	magiccupcake	Webforumz Cafe	2	May 16th, 2008 14:29
How to send a HTML newsletter?	sing2trees	Web Page Design	6	Jan 25th, 2008 17:03

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
HTML Newsletter