Email signatures / Outlook Stationary / HTML email

Having branded email stationary is great but you need to do it right or it will look screwy. If your only emailing from Outlook users to other Outlook users, much of this can be disregarded, just make your signature etc in Outlook.

Email signatures generally

Really nice email signature designs, inspirational gallery, good prices. they use images for main signature, and then html text above for customisations, it seems. i imagine this is more reliable than trying to get html formatting to work.
http://www.stationerycentral.com/sitesamples/signature-ss2.html
instruction for use
http://www.stationerycentral.com/pages-signatures/TryIt-09.html

adding a signature for Outlook, Gmail and Mac Mail
http://brassblogs.com/lab/creating-an-html-signature-file-for-just-about-anything

adding sig to appdata and hoe to show hidden folders (must be .htm not .html)
http://help.lockergnome.com/office/Outlook-2007-signature-issues-images--ftopict944451.html


Stationary Generally
Loading the signatures
http://www.dakno.com/blog/loading-email-stationery-in-outlook-2007/

Good FAQ on capabilities of supplied stationary/sigs
http://www.website-factory.com/FAQ.htm

add stationary to App Data instructions
http://www.office-outlook.com/outlook-forum/index.php/m/578302/

Outlook 2007 related
Basically Outlook writes over your HTML, in signatures or stationary files. It uses its own, and is very unreliable and wacky when replying multiple times to a different mail client, even to and from Thunderbird. Don't bother coding HTML carefully if your planning to use it as an Outlook stationary or signature, because Outlook will mangle it anyway. Its probably easier to half design it in Outlook if that is what your client will be using. DO NOT think you can send pixel perfect HTML email from Outlook. Use Campaign Monitor or Mailchimp, as they don't mangle your code.

There is a known problem with Gmail and Outlook where Gmail adds double spaces. This is a gmail thing. Combined with an Outlook thing of people typing hard returns ENTER when they want soft returns (SHIFT+ENTER). Either set your
margin styles in outlook to something, and press hard return only once not twice. Press soft return when simple wanting a line break.

This is a really useful write up on how to code FOR Outlook, with a simple and more complicated example. recommends not to use div, p or table tags, as MS OL inserts a hard return after these. ??
http://oomoo.wordpress.com/2008/08/19/outlook-and-the-double-spaced-signature/
He puts the line break self closing tag inside the span tag and Before the text of each line.
also makes a span for just containing line breaks which are a smaller font size.
also, can use the outlook hard returns to your advantage in design.

Tutorials for clients screencasts from MS on how to create and switch email sigs and the like
http://office.microsoft.com/en-us/outlook-help/multiple-signatures-for-your-multiple-roles-RZ001189227.aspx?section=17

This is how to add signature file as a htm into the App Data folder, using Run command....
http://how-to-solutions.com/html-signature-outlook-2007.html
ditto sortof
http://lilypie.com/help.php?s=answer&id=320

how ot get body background image in outlook
http://www.campaignmonitor.com/blog/post/1777/body-background-images-outlook/

Outlook 2007 double spacing problem
fix permanently for all messages, from:
http://thebackroomtech.com/2008/04/23/howto-fix-the-outlook-2007-double-spacing-problem/

Follow these steps in order one by one…
Open a new message.
Click ‘Format Text’ in the tabs at the top.
Left click on ‘Quick Styles’ so that it drops down.
Right click on ‘Normal’ and choose modify.
Where it says ‘Style for following paragraph’ choose ‘No Spacing’.
Then select the radio button below that says ‘New documents based on this
template’.
Click the little format button near the bottom of the dialog window and
select ‘Paragraph’ from the drop down.
On that new window, make sure line spacing is set to single.
Make sure the Spacing -> After value is set to 0pt.
Ensure that there is a check in the box that says ‘Don’t ass space
between……’
Say OK to that window.
Say OK to the window under it.
Close that new message.
Start a new message and try some typing …

there are other optional fixes here, few different methods.
http://www.slipstick.com/problems/dblspace_html.htm


HTML in email Generally

Quote from: http://www.epigroove.com/posts/66/html_emails_vs_gmail_yahoo__hotmail

When I say every single element has to have its own inline style, I mean every single element. Unless you want to leave the styling up to the web mail client, you have to set the style of each element yourself. You couldn't just set the font family and size of a tag wrapped around a tag, you had to set the font styles in the tag.

* You can't have hover and visited states for links. Since you can't set the link colors and states globally, each link has to have its style set manually, and there's no way to set the hover and visited states this way (that I know of).

Great HTML email template and advice with rounded corners and 2 columns, here: http://commadot.com/cross-client-html-email-v2/

Losts of info listed here on what you can and cant do
http://www.reachcustomersonline.com/2010/01/23/09.27.00/

Design Guidelines
http://www.campaignmonitor.com/design-guidelines/

Primer on HTML in email and Outlook
http://mailformat.dan.info/body/html.html

Flightchecking HTML email code
Great table of what CSS properties you can use in what Mail clients
http://www.campaignmonitor.com/css/
Great table of what is supported by Outlook 2007
Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007 (Part 1 of 2)
http://msdn.microsoft.com/en-us/library/aa338201.aspx#Word2007MailHTMLandCSS_SupportedHTMLElementsAttributesandCSSProperties
Or use this validator that probably checks for you
http://www.microsoft.com/downloads/details.aspx?FamilyId=0B764C08-0F86-431E-8BD5-EF0E9CE26A3A&displaylang=en
This is also a good list of thing
http://www.reachcustomersonline.com/2010/01/23/09.27.00/

List of things to check in your code and things to avoid:

Some good ones here (June 2010): http://www.slideshare.net/stevehong/coding-html-email-4240061
Use of:
Padding: Outlook 2007 dosn't support on a p or span tags but does support on h1, h2, h3 etc, a tag.
Margin: Hotmail apparently dosnt support CSS margin. This will make for messy paragraph spacing....
Display: eg put display block on an a tag so it can have padding top. Outlook 2007 supports display on an a tag.
background-color: to be safe, also put bgcolor= in html on the td tag or table tag you want a background color for.
Style the alt text for images: Put styles onto the containing td or a tag that contains an img. If the image is turned off, the alt text will usually be nicely styled. Good for logos etc in banners.
background-repeat: gmail dosn't like, use html  to stretch the image to full table height

Havn't personally encountered yet but good to be warned:

font-family: Gmail doesn’t like quotes in font names. Don’t use “font-family:’Lucida Grande’,” but rather “font-family:Lucida Grande”.
Line-height: Gmail doesn’t like percentage values for CSS line-height. Outlook 2007 creates too much line-height when em sizes are used. Use pixel sizes.
background-image: Gmail and Hotmail don’t display background images declared with CSS, so use the background attribute of the table and td tags. STAY AWAY FROM BACKGROUND IMAGES IF POSSIBLE THEY ARE BUGGY / HARD.
img: Hotmail sometimes adds extra space in cells with images. Try a line height of 70% of the font size like this: 12px font, 8px line-heights.
Also, no need to have self closing image tags (it aint XHTML). And image tags don't have an end closing tag, neither do break tags.
td: Yahoo uses non-standard align and valign default values on table cells, so set them explicitly.
cellspacing: Yahoo has styles that make cellspacing ineffective on tables. Use cellpadding instead.

Gotyas
Dont use test in the subject line for your emailing testing, it might get flagged as spam, use something else like lorem ipsum.

More tips here, very useful ones
http://blog.michaelfasani.com/2008/07/12-tips-to-help-you-build-robust-emails/
of the most poignant:
list of browsers and  clients to test on... (24 in total, drag...)

AOL Email (IE6, IE7, Firefox, Safari, Opera)
GMail / Google Mail (IE6, IE7, Firefox, Safari, Opera)
Yahoo Mail (IE6, IE7, Firefox, Safari, Opera)
Windows Live / Hotmail (IE6, IE7, Firefox, Safari, Opera)
Lotus Notes
Mac OS X Mail
Outlook 2003
Outlook 2007

Tables: Recommends not using ANY table cellpadding, cellspacing, border, and I think also margin, padding on tables. This is a bit purist I've found a bit of cellpadding is ok and some non essential td padding works most of the time. But good point, use td tags with widths on them to make the padding etc, like columns rather than padding.

This is the most important point

RULE 4: AVOID TAGS WHICH MAY HAVE LINE-HEIGHT APPLIED TO THEM BY THE CLIENT
Avoid using the P and the BR tags as differences in line-height will cause your email to brake and appear differently from client to client. Instead use tables and cells with fix widths and height to pad out your content and create paragraphs and margins.
Use spans if you can, spans seem neutral to this effect. 


Also, I've found SPANS ARE YOUR FRIEND. Wrap them around misbehaving things and they work some magic, especially for Outlook 2007.

Recommends a very specific link tag html and css - check the site to get the example.
Remember add Display:block for hotmail on img tags

Found this relevant today, also important for a tags inside tds. Best to avoid ANY blank space in TD tags. Careful when using DWs autoformat code, youll have to remove the spaces by hand afterwards. 

RULE 9: ENCAPSULATE IMAGES INSIDE THE TD TAG
If you have images inside TD tags, make sure you delete the white-space around them. Some clients will turn this whitespace into a new-line or a   and just generally do weird things which can break your design.



Email Ettiquite and Disclaimers
http://www.emailreplies.com/#disclaimers
http://www.emaildisclaimers.com/Sample_disclaimers.htm

HTML Emails and email marketing resources

Brushing up on HTML email design, it's been a while...
Testing
This lets you screenshot your email on different clients and highlights wrong code
http://www.emailonacid.com/

So does this - also on phones
http://litmusapp.com/email-previews

Mailchimps does too...
http://www.mailchimp.com/features/power_features/inbox_inspector/

Guide to css support in email clients:
Great quick reference table
http://www.campaignmonitor.com/css/

Design Helpers and Templates
Convert regular CSS to inline after designing using this app
http://premailer.dialect.ca/

Templates
http://www.campaignmonitor.com/templates/

Design Tips
really good general article
http://www.reachcustomersonline.com/2010/01/23/09.27.00/

Basic points summary from my research

• Make it under 600px wide
• Use tables not divs
• Images should be hosted on a fast public server, not embedded
• Some clients eg outlook 2007 don't support background images (is there any other way to get a background image?)
• Use inline, unabbreviated CSS
• Use nested tables rather than borders and padding
• Assume images will not be shown in preview, dont rely on images for critital info, make layout still be solid without images eg by providing a background colour for the area where the image would go and specifying a height and width of each image. (unless you want them to disappear from view when not shown... this could be useful.)
• Dont use one big image it is considered spammy
• Keep image to text ratio weighted on the side of text
• Keep it simple 
• Add a link to view the email as a webpage or as plain text
• Add a forward to a friend link in the footer
• Test it using an online testing tool, and also test its spam rating
• Comply with spam act
• Do double subscribe action to keep list only with people who really want to be there
• Unsubscribe people after 3 failed deliveries
• A professional email sender service eg Mailchimp is less likely to be considered spammy than BCCing to hundreds of people. 
• Keep images small and well optimised, dont make people wait of clutter their inbox
• Offer unsubscribe link and physical postal address clearly visible and readable in the footer, and a link to privacy policy. 
• Use jpgs rather than pngs
• Permission reminder - to reind people why they are gettings your emails
• Always include a plaintext version (and if you can, format that for easier readability)
• Get receiptients to add you to their address book / whitelist ... need more info on this
• Use alt attribute for images esp for gmailers
• explicitly set margins for each paragraph
• Create a background colour using a 100% width table, nest fixed width table inside this (600px wide max... narrower if targeting mainly iphone etc. 
• Put your  logo in top left corner, near edge, never right as it might not get seen. Brand recognition is very important, if they don't know who you are they might flag you as spam. 
• Style links explicitly otherwise they may be styled by email client
• DONT use borders on tables, they render inconsistently, use extra tds around the td you want a border for
• DONT nest tables unless you need to, it gets complicated... (other say nesting is more reliable though for margins and padding replacement. 
• Hotmail adds random padding to images, to remove this add a style = display:block to all your img tags
• Character encoding - this is where a wsiwug email designer app comes in handy for clients making their own emials. changing " to " - I dont thinnk this is really that important, but its most bulletproof. 
• You cant reliably use background images...
• New hotmail removes background colour and table centering... using div though... in hotmail viewed in other than IE? http://blog.exacttarget.com/blog/features/0/0/design-tip-of-the-week-email-rendering-in-hotmail-recent-changes

Really good article from 2009 with code examples of common pitfalls and workarounds
http://24ways.org/2009/rock-solid-html-emails

Excerpt from Mailchimp its a great service, this is a good primer article and lots of good links and info about spam laws etc:
http://www.mailchimp.com/articles/stupid-html-email-design-mistakes/

Tips for image-to-weight ratio:

Lots of small thumbnails seem to work better than lots of big graphics. Even if you have lots of text to balance things out.

Just can't include tons of text? If your content is just one or two lines of text, don't insert more than one or two graphics into the email.

We've seen emails with very little text, and one giant graphic get past spam filters. But the image was very well compressed, and the HTML code was spotless.

and:
http://mailchimp.blogs.com/blog/2007/04/how_your_email_.html

So here are a few tips for anybody that designs or writes email marketing campaigns:

1) Assume your recipients will have images turned off by default. How does your email look?

2) Assume your recipients will only read your emails in their preview pane. Does enough content display in that limited slice of real estate? Here's an email in AOL9's preview pane.

3) Assume that your email will be reviewed by an IT person who will take all of 3 seconds to judge whether you are a trusted sender, or a spammer. Are you trustworthy in the blink of an eye?

Technique to get background image working
http://www.campaignmonitor.com/blog/post/3170/adding-background-images-to-your-email-in-two-simple-steps/
other experiements with text over image... looks hard...
http://www.campaignmonitor.com/forums/viewtopic.php?id=3862

Other interesting info
From:
http://www.smashingmagazine.com/2007/10/16/best-practices-for-bulletproof-e-mail-delivery/ 
This article also contains useful links to spam testing software

Sending email Tuesday / Wednesday 2-3pm = Increased Response. Source

Slow down your newsletter delivery.

Instead of using tools which boost your newsletter through mail servers to achieve “instant delivery” prefer “slow” delivery tools. Avoid sending mails to multiple (dozens or even hundreds) recipients using CC:-attribute. Use professional newsletter software or professional e-mail-delivery services. “When ISPs detect a flood of email, it looks like the work of a virus or a spammer.” Source

HTML is OK, but only if MIME-Multipart is used.

When sending newsletters as HTML make sure that also the plain text version is attached. Messages sent in MIME-Multipart-Format are automatically sent in a way that subscribers without active HTML-Viewer still get a decently formatted e-mail. It is important that both plain text and the HTML-version have the same or very similar content. The percentage of text should be higher than the percentage of HTML or images. Keep your message size between 20 and 40 Kb.

Content Tips
Offer value, dont piss people off. Send good relevant content and good special offers.
From: http://designshack.co.uk/articles/css/10-tips-for-designing-html-emails

As a designer, help them resist this urge by designing a template that showcases a little information extremely well rather than a lot of information very poorly.

The key here is quality over quantity. No on will read a thousand word marketing email. You have, at the very best, 3-5 seconds to grab the average reader’s attention before they hit delete. Accomplish this with fast loading, attractive visuals, concise copy and clear descriptive headers.

Include Permission reminders in the copy or footer. "You are receiving this email because.... It can be part of your unsubscribe link text

http://www.mailchimp.com/blog/what-makes-a-good-permission-reminder/

Funny quote from this:

But the permission reminder isn’t just for your recipients’ sake. You see, sometimes email gets reported as spam, even if it’s not. ReturnPath did a survey where 14% of people said they always hit the “report spam” button, even if they signed up for the email. People forget. People are lazy. People are mean.

Really good tip from this. Theres detailed info about why lists should be segmented and ideas of what to write in the permission reminder if you have actually bought the list or are sending to another organisations list:

Setup differnet lists, and send very different welcome emails to them, each with different permission reminders.

Instead of writing, “You’re receiving this email because you’re a customer” try something more like, “You’re receiving this email because you’re a customer who opted-in for emails when you purchased something from our online store.” Or, “You’re receiving this email because you signed up for email specials while making a purchase at one of our stores.”

CAN SPAM Act
http://www.ftc.gov/bcp/edu/pubs/business/ecommerce/bus61.shtm
All advertisements must be identified as an advetisment.

The actual process of email marketing and things to consider...
http://www.digital-web.com/articles/ten_tips_for_email_campaigns/
segment lists planning, set up a newletter from account, clean emails from the account

Design Inspiration
Here is some pretty darn good looking email designs.
http://www.smashingmagazine.com/2010/01/19/design-and-build-an-email-newsletter-without-losing-your-mind/

Wow here is a whole archive of html email newsletters, including commercial ones from some big companies, you can browse through and look at their coding techniques to get ideas...
http://www.newsletterarchive.org/

Money
Campaign manager lets you mark up the clients email delivery costs invisibly, so that every time they send email you profit. This is a pretty good feature.
http://www.campaignmonitor.com/features/powerful-templates/

But I don't want to use that monkey website I don't have time to learn a new software just to email...
So Mailchimp campaign manager etc makes it really easy to send emails, but what if the client dosn't  want to use this? What if they want to send their emails from Outlook?? / Thunderbird / Seamonkey or whatever...

Why not to use outlook:
Not outlook related, but people using outlook probably also want to send from their OWN email address from their own email host provider... 
you can do it by adding it in as a signature or stationary, but from this really good article why this is a bad idea http://www.reachcustomersonline.com/2010/01/23/09.27.00/

People usually ask this question because they want to send html email from their internet account. Don’t. Unless you know every person on your email list, too many bad things can happen if someone tags your email as spam. If you send email through your business domain name, for example, all your email will be tagged as spam. And you will be left to figure out how to get off any blacklists. Even if you know everyone on your list, your internet provider may have a limit to how many messages can be sent and may boot you off their service. It’s far less hassle to pay an email service provider to deliver your email and worry about spam blacklists.

http://www.mailchimp.com/articles/top-html-email-coding-mistakes/
from mailchimp but they have a vested interest...

Trying To Send HTML Email Campaigns With Outlook Or Outlook Express

Lots of people try sending their HTML email newsletters with Microsoft Outlook, or Outlook Express. This is a big mistake. For starters, Outlook won't send your email in "multipart-alternative" format. Multipart format means that an HTML email is sent with a plain-text alternative embedded along with it. That way, if someone's email application can't read HTML email, the plain-text version displays instead. Also, Outlook will send all your images along as attachments, which won't always work. Images in HTML email must be hosted on a web server, and your HTML code should point to them with absolute paths. Add to all that the fact that Outlook won't help you track email clicks and opens, manage unsubscribes, or process and clean bouncebacks from your list. Finally, using your desktop email application to send email marketing campaigns is a bad idea because your ISP may suspend your account after a certain amount of bandwidth has been reached (and some ISPs limit outgoing email to 500 per hour).

Outlook generally and Outlook Stationary

Site describes how to make an email in HTML format in Outlook, but what I want is how to use a template. I think this is called 'Stationary'
http://www.emailaddressmanager.com/tips/html-email.html

Tutorial in screenshots of how to load a HTML stationary theme in Outlook 2007.
http://www.distinctionhq.com/Blog/January-2010/Microsoft-Office-Outlook-2007-Email-Stationery

More instructions for loading the theme
http://www.bigpromoting.com/index.php?page=adding-stationery

Where else can put the outlook stationary template
http://www.eggheadcafe.com/software/aspnet/35073696/alternation-file-location-for-stationary.aspx

Stationary templates must be .htm rather than .html
General discussion of email signatures, different metods in different versions of Outlook
http://merill.net/2008/03/creating-html-signatures-on-outlook-2007/

@apwalsh this recommendation was for setting up a personal signature. For your scenario I would recommend using a batch file to create the signature when users login to the domain. The batch file can pull the image from a central location and update it on the user's profile.

This is how our corporate signatures are created at my workplace.

Drawbacks of sending ghetto HTML emails made in Outlook / Mail / whatever.

You're right, stationary is essentially HTML, but it sounds to me like the big difference here is that Apple Mail is embedding the images in the email itself (Which I believe is also true of Outlook stationary). This works fine for casual mailing but has major drawbacks for bulk mail (eg: massive increase in bandwidth, higher chance of being caught in spamfilters, etc...).

Outlook bulk email marketing add -on
http://download.cnet.com/Send-Bulk-Email-Marketing-using-Outlook/3000-18483_4-10972627.html

Helps with email personalisation and putting correct 'to' field details to help avoid spam...

Politemail
integrates some marketing and subscribe features into outlook, and email sending etc. can host the software/server on your own server. seems pretty expensive, the main thing is the outlook integration, its what people want really.
http://www.politemail.com/screens/

Thunderbird
stationary add-ons - stationary works like outlook.
https://addons.mozilla.org/en-US/thunderbird/addon/4394/

Summary
So heres some questions that need to be asked before doing the email newsletter job.

• How many emails / how often are you sending emails? Big difference between 4000 and 100. With 100 and a small personal, inter organisation or member newsletter, you can probably get away with using clients business email server, if they are confident that all the mailing list is 'clean' and people wont report it as spam, and they have enough bandwidth to allow the sending volume. It is still good to host images externally I think, at least the graphical elements of the email. 
• Are they random 'news' emails or pitch like sales & marketing emails, and are they aggressively building the list with people who may not really know they have opted in, if so then DONT use the businesses own email server, use a mail service like Mailchimp. Getting blacklisted sucks. 
• Who's doing the email newsletter? What are their skills? Do they understand image optimisation, do they know HTML, do they understand the fundamentals of good typography? If the answer is no, then they should use a well designed template which is locked down for most fields and a WSIWUG type editor, like Mailchimp provides. They should never be given freedom to move around the layout tables unless they will spend time testing the design before sending it. They should probably also be given a 'brand guidelines' manual and electrocuted or hit with a big stick every time they try and emphasise their 9 point Times new roman body copy text by making it bold red. Or change the font and type weights randomly throughout the document disregarding the template or stylesheet. Sigh groan to people that think word processing, graphic design or powerpoint is 'creative'. It isn't, it is a science, that makes use of colours and shapes to achieve a defined communications goal, such as "make a trustworthy, professional impression whilst making the text easy to skim and read, and ultimately leading user to buy a product." 
• Does the person responsible for the email newsletter know how to write and proofread? If they don't it will be seriously embarrassing rather than promotional. Don't assume employees know how to write or proofread, most kids these days don't. And don't assume typing is writing. Writing for web is a skill they need to learn. User will give your email less than 5 seconds, so don't let employees spend a week writing the email in a verbose flowery style unless this suits your purposes.
• Also what is the POINT or PURPOSE of the email? This should guide the design. If theres no point to it then it shouldn't be done. 
• My personal opinion is that HTML email is a waste of time, money, effort. I think our society can (and needs to) use its time (and bandwidth) more wisely than this if it want's to stay competitive with other countries and actually achieve useful progress. If you have a good offer, a really good offer, just write it in  text, one sentence with a link to the website... If i'm interested in your products I'll open your emails, if not I delete without opening. I have a feeling most tech oriented people feel the same way, eg. the more hi fi your skills are, the more you appreciate getting lo-fi communication and no-frills simplicity. 

Cool social services email signatures - Wisestamp

http://wisestamp.com/goodies/category/signature-examples/page/4/

With this you can now have cool email signatures in gmail, or many other web based email systems.