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
Posts
