Loading...

All project content is available for reading, but you need to be a member of the project for Subversion checkout of source code, or to create/modify any information.
Login if you are a member. Apply here to request membership (open to all).

Creating Good Newsletter Markup

The SendMail module sends pages in EPiServer by email, but you need to be aware that the markup of your email content must play by different rules than ordinary web pages. The content and markup will determine how the different email clients will render the email, and also the chances of getting through the spam killers.

Do

How to create good html newsletters.

  1. Start by reading this excellent article: http://www.sitepoint.com/article/code-html-email-newsletters
  2. Don't rely on css only. Use style attributes and normal attributes as fallback. Some clients will strip out the styles (online browsers especially), and having a "fallback" plan will help you maintain the design.
  3. Add language code to your page, to tell hotmail and other online readers to know how to encode it.
    <meta http-equiv="content-language" content="en">
    I have not verified that this actually works, but can't hurt.
  4. Have an eye of on markup sixe, extensive markup will bloat size, and indicates spam.
  5. Test, test and test. Get hold of as many email clients you can, and test the design.

Don't

Tips on what not to do when you create your newsletter markup.

  1. If you're using the aspnetEmail to include images, make sure the image names (and paths) do not contain spaces or special characters.
  2. Long urls indicate tracking software. Keep the urls short.

Notes about email clients

Research and findings about the different clients.

Outlook

  • Outlook 2003 (and Express?) do not show images unless the user selects to do so. If the images do not have height and width attributes, the design of your newsletter is out the window. The alt text of the images are set to "Right click here to download this image" (more or less) and the image placeholder will be very wide unless width has been specified.
  • Outlook 2003 is the client that is easiest to accomodate (style wise)

Outlook 2003 and embedded styles

Outlook 2003 will strip leading periods from classes in an embedded stylesheet if the styles are not indented. Go figure!

This is how the source looks in Internet Explorer:

    <style type="text/css">
    <!--
    .topMenuLink {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
}

.topMenuLink:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
...

This is how the source looks in Outlook 2003:

    <style type="text/css">
    <!--.topMenuLink {
    color: #FFFFFF;
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana, Arial, sans-serif;
    text-decoration: none;
}

topMenuLink:hover {
    color: #FFFFFF;
    text-decoration: underline;
}
...

Note the missing period in front of "topMenuLink".

If we indent the style:

    <style type="text/css">
    <!--
    .topMenuLink {
        color: #FFFFFF;
        font-weight: bold;
        font-size: 11px;
        font-family: Verdana, Arial, sans-serif;
        text-decoration: none;
    }

    .topMenuLink:hover {
        color: #FFFFFF;
        text-decoration: underline;
    }
    ...

it just works! Outlook will not remove any leading periods.

Lotus Notes

From http://archivist.incutio.com/viewlist/css-discuss/37970:

I put weeks of research into this last year, and managed to come up with

multipart-MIME CSS emails that worked flawlessly across all the main email clients bar Lotus Notes, which has CSS support that's a complete joke.

Lotus Notes 6 has only partial HTML support, and will render text in its

own colours and line spacings. It does not support background images, paragraph tags and a whole lot more. However, a well coded email should at least readable in Notes.

  • Lotus Notes handles attached inline images, the Lotus Notes web client does not.
  • Lotus Notes on a Mac uses a very small font - it might be unreadable if your font is very small from the start

Telenor Online

  • Telenor Online do not handle attached images (cid:image.gif) will produce errors. They will happily download any images you link to though.

Hotmail

  • Hotmail and encoding is important. The user can select language in Hotmail options, and this will have an impact on how international characters are displayed (even though you use utf-8).

Comments

Add comments about markup and email clients.

Add comment