LOL @ Google

Why does Google send SNAILMAIL for promotions?? Overseas?? LOL!!!

They um, have my email address...

The future is now

Shopping Cart Options - Small Business / Indie Labels - Part 2

And the winner is...
Big Cartel http://www.bigcartel.com/
For a new startup indie jewellery label.

Why:

• Low entry level cost $9.99p/m
• Simplicity; of options, of admin, and conveyed through thoughtful interface design throughout their offering
• I don't have to host it 
• Has a 'store directory' for promotion within the community
• Has a sizable community / forums
• Allows a custom domain
• No commissions, just flat store fee, paid monthly no contacts
• Paypal only, no mucking about with merchant stuff, eg. no liasing to make this happen
• The client had already signed up for a free store and seemed comfortable with the admin section, so this was a good sign it would be pain free for them (me).

Result?
I'm pleased with this shop solution, it was up and running at signup, and customising the 'Sexy' theme with basic CSS to personalise it and match the clients website was done and browser tested in under a day. I havn't tried more intense theme customisations / filters as there is no budget, and no need I can see for now.

The non-technical client was able to use the BigCartel admin without instructions to add images and pages, colour options, descriptions, prices, categories etc etc.
The only caveats was explaining how to crop / resize photos in Photoshop properly... as there is no inbuilt crop / resize app in the CMS. (Photoshops better anyway).

It check it here: (Still under construction in terms of content)
http://www.yinjoux.bigcartel.com/
or here when the domains been setup
http://www.shop.yinjoux.com/

Not sure how it goes with SEO etc, but for this sort of client main traffic will come from design blog referrers, online mags and the like, so its no biggie at this stage, and they have a Wordpress main site which can be customised for the SEO goodness.

Shopify's affiliate options are enticing though, I'll keep them in mind for future, larger volume shop clients with a larger budget.

Publish to HTML5 from Illustrator using plugin

This is cool, HTML5 canvas support for Illustrator:

http://rwillustrator.blogspot.com/2010/10/web-designers-rejoice-again-new-html5.html?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+RealWorldIllustrator+%28Real+World+Illustrator%29

The content displays and animates flawlessly. What’s totally cool about this plugin is that it almost turns Adobe Illustrator into Adobe Flash Professional—only it publishes to HTML5 instead of SWF. It kind of blows your mind.

Wonder if this HTML5 stuff is going to be around for the long haul or if its just a fad... already seen a few job ads for specifically HTML5 developers even though its only just been released far as I know.

Browser testing - new stuff

This is a really good rundown of browser testing and resources associated
http://harrikauhanen.posterous.com/an-ultimate-guide-to-browser-testing

Good point, has testsuite of legacy browsers, modern browsers, and future browsers, for the latest beta of next browser version. Id only go so far for IE though, other just get better really.

Heres a nice list of browser specific hacks
http://paulirish.com/2009/browser-specific-css-hacks/

Heres where I found a standalone Safari 3.2 and safari 4 beta(?useful)
http://tripledoubleyou.subtlegradient.com/stuff/Standalone%20Safari/
sadly the 2.0 versions link not working anymore.

Couldnt install IE9 beta on the windows vista virtual image, maybe it needs to go on my windows 10 machine.

By the way - the newest Macbook Pro has Bootcamp - really simple way to boot into Windows on your mac, no extra vm hardware required...

Drupal latest Zen theme css browser fixes for a sub theme

The latest Zen theme for Drupal 6 has been redone it seems, and I've had very little trouble with x-browser stuff this time, except for being due to trying to make a tricky liquid header with lots of floated blocks, causing the usual problems in IE7 and below with float bugs galore.

Not used nicemenus dropdowns this time, so thats probably saved some testing time.

Added into the zen themes 'html-reset.css' (v 1.6.2.2 2010/06/26) a few YUI2reset or Eric Meyer Reset styles, these were:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0; /*YUI2Reset*/
padding:0; /*YUI2Reset*/
}


table {
border-spacing:0;/*EMReset*/
}


td {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}


caption {
text-align:left;/*EMReset*/
font-weight:normal;/*EMReset*/
}

acronym {
border:0; /*YUI2Reset*/
}



fieldset {
border: 0;/*YUI2Reset*/
}


address, cite, code, dfn, var { /*YUI2Reset*/
font-style:normal;
font-weight:normal;
}

Then here are some other fixes I added to html-reset.css:

#content th, #content thead th, #content tbody th, #content thead{
word-wrap:normal;/*For benefit of Opera (10), not giving table headers proper width automatically, figure theres rarely going to be a long unbroken url or something that needs breaking in a table header...*/
}

/*Fixes for squashed body text tables in safari and opera when occur after floated image*/
#content .section #content-area .node .content table {
clear:both;
}

And some to ie.css

legend { 
color:#666666;/*IE makes it blue...*/
*margin-left:-9px; /*for IE7, Legend is indented otherwise, IE8 fine*/
}

And a zoom:1 to something containing floats

And for ie6.css
The usual double float margin bug fixes (display:inline) and transparency fixes, some zoom:1 for HasLayout, and this one I havn't come across before:

#block-menu-primary-links ul li a { 
display:inline-block; /*List white space bug [5]*/
}


#block-menu-primary-links ul li a { 
display:block; /*List white space bug [5]*/
}

And for print.css
In addition to zens pre setup print stylesheet I added these changes or additions


/* Un-float the content */
#content,
#content .section,
#content-area {
float: none;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

/* Hide sidebars and nav elements */

#header,

#skip-link,

#navigation,

.region-sidebar-first,

.region-sidebar-second,

#footer,

.breadcrumb,

div.tabs,

.links,

.taxonomy,

.book-navigation,

.forum-topic-navigation,

.pager,

.feed-icons,

.warning,

.sticky-header {

  visibility: hidden;

  display: none;

}

/* Otherwise, Firefox clips the content after the first page. */
#page-wrapper, #page, #main-wrapper, #main, #content, #content .section, #content-area, .node, .node .content
{
overflow-y: visible;
display: inline; /*Important for Ffox content clipping after first page, and makes content full width of page*/
*display: inline-block;/*Fixes text clipping on right side in IE6, IE7*/
}

#page

{

font-size:12pt;

}

#content{

_textalign:left; /*Ie6 is centering text...*/

}

Clearing Floats... modern methods and explanations

Probably the best explanation of using clearfix by Suzy I have seen, including explaining errors and now obselete parts.
http://www.sitepoint.com/forums/showthread.php?t=567147&page=2

There is such confusion between 'clearing floats' and 'containing floats' and 'triggering HasLayout'. They are all called clear fixes but are different things really.
eg this comment from http://stackoverflow.com/questions/2467745/ie7-float-and-clear-on-the-same-element

That is for pushing down the bottom edge of a container to wholly contain its floated children, which is a different problem altogether.

Totally! So much focus on 'containing floats' methods.

I've come across a situation where I actually need a float to just clear the one before it for layout purposes, because IE7 cant handle float and clear on the same element, it's actually not a float containment/hasLayout problem, but a serious limitation as it just cant do this layout it seems, its a real bug, no type of clearfixing/HasLayout is helping. It dont care if the float parent contains the children or not, I just need it to clear!
See demo, it is situation #3:
http://www.brunildo.org/test/IEWfc3.html

I actually think I need to use an empty clearing element in the markup... the author of that demo says elsewhere that there is no solution.
Cant even use the :after pseudo class for this weird purpose since IE7 dosn't read that...
only solution that keeps coming up
http://stackoverflow.com/questions/2614566/ie7-and-ie8-float-clearing-without-adding-empty-elements

Other good resources on modern clearfix use:
Good post explaining block formatting context, more indepth use of clearfix and how it can cause more problems if your not thinking about it.
http://thinkvitamin.com/design/everything-you-know-about-clearfix-is-wrong/

This is an evolved clearfix hack, using a space instead of a period. (see comments for using a unicode space, and line height etc to make it even more invisible.
http://perishablepress.com/press/2009/12/06/new-clearfix-hack/

eg see the hack at the end for clearfix on the 960 grid css. uses a unicode space  and zoom:1 for IEs. I prefer zoom:1, its simple, dosnt mess with overflow, and is clearly just for older IE, and goes just in IEs stylesheet. I like it since I always rememebr what its there for, whereas an overflow property might be there for a different reason and if you forget to comment it, you might not realise its a haslayout trigger.
http://960.gs/css/uncompressed/960.css

A nice roundup of IE6 specific fixes for HasLayout and a few specific things
http://www.onderhond.com/blog/work/ie6-core-bug-fixing

A JQuery plugin that shows you when your floats aren't cleared!!!! this is cool!
http://code.google.com/p/samaxesjs/wiki/CSSFloatPlugin

IE7 CSS float bug, Never put float and clear on same element

A day of IE hell worse than any I can remember... 

Nasty encounter with a bug that happens when float and clear is on the same element, which is floated in an opposite direction from a preceding float, nothing you can do will clear the preceding float, it seems, except adding an empty div or similar to clear, in between the 2... yuk...

Mental note: Never put float and clear on same element

I did, with the floats in opposite directions, and I got this bug, situation 3
http://www.brunildo.org/test/IEWfc3.html

So I restructured the PAGE TEMPLATE, so my elements could have the floats going in the same direction. But no dice, what I got then was this bug

http://www.brunildo.org/test/IEWfc.html

The culprit being that I still had float and clear on same element. IE7 just dosn't like this. The solution luckily for me, was to remove the clear:both from the 2nd last floated element. I realised I could do this by using firebug and checking out what I could do without, and low and behold, removing the clear didn't make any difference, because of the elements length, it was longer than the space available that I was trying to clear it from.

Thats not really a fix, but it works in this layout, it self clears because it simply wont fit alongside the previous floats, lucky me.

The only other option would have been to add an extra clearing wrapper and wrap the floats above in that, or put an empty clearer div preceding the floats I wanted cleared.

Shopping Cart Options - Small Business / Indie Labels - Part 1

Compiling some for a friends jewellery label online store... low / no budget option required

Heres a quick article overviewing some of the major options, including just throwing in some paypal buttons on your existing site. (My instinct tells me it wont be half as easy as it sounds... and what about inventory etc...)
http://www.askingfortrouble.org/crafts/2008/04/23/guide-to-setting-up-shop-online/

Hosted solutions:

Shopify

Seriously considering, although the product limit is stingey.

Cons: Takes a 2% swipe at your sales.

Pros: I can be an affiliate and get some kickbacks from my friends sales... nice. This is enticing... But doubt it'll be a huge amount. 

Big Cartel

Seriously considering, product limit of 300 is pretty decent for $30p/m. And I like the word Cartel. And it has AUD currency, and it seems nice and indie, and has free trial. 

Cons: its limited to Paypal payments it seems.

Does it have an affiliate program...?? No, dosnt look like it, otherwise id be sold. Actually im over this im sold right now. 

Local company love...
Amazing Price for custom design shop, under $1K (initial cost):
http://www.magicdust.com.au/shopping-cart/shopping-cart-prices.html
http://www.magicdust.com.au/shopping-cart/shopping-cart-features.html
Although, the hosting / ongoing cost is expensive, $49.50p/m, its a good option for a small initial outlay AND a custom design.
Heres an example:
https://beatpoet.net/store/

Actually... the above is a pretty good deal IF you have the initial $895+GST, Id say this is the best deal out there... because for that price your getting a custom design AND a hosted solution. No fucking around templating / server troubleshooting.  The software feature list is impressive too, including email newsletters etc... the space, 100MB and the bandwidth, 2GB im not sure if thats enough, probably would need to upgrade to larger hosting plan, so cost might increase.

Actually when you compare other hosted solutions, eg big cartel, and shopify, this is a pretty good deal, because there is no limit on how many products you can have... just the hosting size restriction. eg. Big Cartel is $30p/m, for 300 products, and shopify is $24 for 100 products. If my client had $895 to spend Id probably go there and be done with it...

More local people:
Not sure of cost but does local designers shops
http://www.nichefashion.com.au/pages/niche_web.php

Wordpress
Theres some nice templates out there, but im wary because of WPs security stuff, do i really want to be patching updates for my friends shop for free for the rest of my life... no.

Magento: 
Never used magento, maybe because it is $2995 per year, theres a community option but not sure if it would be just for people that know what they are doing. Im guessing Magento is for serious stores, rather than smaller / hobby stores. I wonder how it compares to wordpress e-commerce? There seems to be lots of templates for it.

ZenCart:
Im thinking of going with zencart, since its free and dedicated for e-commerce, its bound to have way better features than wp shops. one things ive not considered is the actual usability for the store owner, eg printing invoices, packing slips, sales reports, inventory, etc etc, eg the back end rather than the pretty front end. this is what really counts. handling of tax etc etc. AND security. WP is so insecure and fuck all those updates.

Actually, on further inspection fuck that. I dont want to host this thing for free on my hosting, monitor security, update it, and get some SSL certificates and all that, its just a whole lot of faffing around for a no budget favour job.

Prestashop:
This looks cool, reckons has large community, here a setup tutorial
http://www.1stwebdesigner.com/tutorials/beginners-guide-prestashop/

Paypal
User needs to sign up with a merch account, heres some info
https://merchant.paypal.com/us/cgi-bin/?cmd=_render-content&content_ID=merchant/compare_wp_products
(aside, the paypal site is kinda confusing to use... just like amazon and facebook, why is this so?)


Random reviews from round web:

Wordpress
I’ve had the same problem with WP-Ecommerce and I’ve had it fail on PCI scan for cross-scripting vulnerabilities. They simply don’t comment back on their forums. Its quite frustrating. I’ve had a problem where the tax was not being send to Google Checkout. Without support resolve issues like that. Its pretty much useless to my clients.

http://www.websitetemplatereviews.com/my-list-of-the-best-e-commerce-website-templates-a-big-chart
Disadvantages include having to integrate shopping cart functionality and perhaps having to upgrade your hosting to an SSL certificate level.

http://wordpress.org/support/topic/plugin-wp-e-commerce-problems-that-must-be-addressed-before-this-plugin-can-be-taken-seriously

http://www.tyroneshum.com/wp-e-commerce-review-for-wordpress/
 review of the plugins features...

Shopify
http://www.ashwebstudio.com/reviews/shopify-great-for-simple-e-commerce
Cost – As always, the cost is always an important factor when determining which e-commerce solution to use. Shopify has multiple plan levels each with their specific cost, but in general the average website will be paying a monthly fee of $24 and 2% per transaction. Many other (decent) shopping cart systems can cost around $500 just for the software. Shopify is a hosted solution meaning you don’t need to pay for web hosting and they have their own SSL certificate. With hosting being $10-15/month and SSL certificates about $10/month, that basically covers the monthly Shopify cost meaning the only thing you really pay them is the 2% per transaction fee. For smaller shops with few transactions or small transactions, this 2% is not very much and can easily be overcome with a slight shipping cost increase.
@Adrian We are upfront with our clients about Shopify, we do not try to “hide” it in any way. You can’t hide it anyway since they see Shopify’s logo every time they login! We have our clients setup an account on Shopify (using our referral link, of course) and then we get admin access and go from there. Trying to inflate the monthly cost is not possible as they will quickly find out they can get the same thing for less. Just passing the cost on to the client, through you, is a waste of everyone’s time since the client can simply pay Shopify automatically each month.

http://forums.shopify.com/categories/1/posts/39087

From my former free-lancing experience, I can tell you that Shopify is much easier and fun to theme and customize. It also has a wonderful Restful XML API that lets you do anything you want, except 1) create orders (but you can capture payments, fulfil items, close, and re-open orders with that API) and 2) generate discount codes. Everything else goes. It also has an AJAX API that returns JSON. Shopify integrates with FEDEX, UPS, USPS, Amazon, etc. It integrates with all these payment gateways, using open-source ActiveMerchant which is also used by other e-commerce platforms. Shopify contributed Liquid and ActiveMerchant as open-source projects. Liquid was inspired by Django, and is currently the best templating engine in the world (yeah, me saying).

Shopify scales very well. You have to pay more with BigCommerce to be able to sustain high traffic. With Shopify, you don't have to. Also, we use a Content Delivery Network, this means that pages load as fast anywhere in the world - and that for me is a must.
Shopify has a great theme store with lots of great free themes, its own app store (very reasonably priced apps and many free apps, by Shopify and independent developers like yourself).
I think that it is best for any independent designer / developer to know 2 solutions well in whatever field he/she specializes in. Try and make those 2 favorites not solutions that are too smilar. For example: Shopify and Spree could be a good killer match in an e-commerce-oriented toolset.

IE9 and CSS3 What can we start using?

http://www.impressivewebs.com/css3-support-ie9/

Exciting things new in IE9, CSS3:
Means Im going to use these by default, provide degraded versions to older IEs, such as no curved corners.

Opacity (no more little trans pngs)
Border Radius (woo!)
Box shadow (nice)
RGBA colours, another neat way to get transparency.

It dosn't support CSS gradients yet.

sooo... opacity best practice??
from: w3c http://w3schools.com/Css/css_image_transparency.asp

  /* for IE >9*/

  filter:alpha(opacity=60);

  /* CSS3 standard, works in IE9*/

  opacity:0.6;

but here is a note about IE8 in compatibility mode from http://www.quirksmode.org/css/opacity.html

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!

filter: alpha(opacity=50); // second!

If you don’t use this order, IE8-as-IE7 doesn’t apply the opacity, although IE8 and a pure IE7 do.

Which I just tested, and its not true? IE8-as-IE7(compatibility mode) still shows transp. even without the first line, maybe because doctype is strict? (read somewhere)
also random note, for IE6, 7, they need the element getting transparency to "have layout".

**BACKPEDAL**
The children of the opacity element inherit the opacity settings. Just tried it on a menu and makes my menu list items pink rather than white because some of them are over some red graphic. Not ideal. The fix here involves messing with the markup structure, not ideal for CMS skinning, especially just to use a tricky CSS3 property. Back to transparent pngs for now... sigh. Heres the 'fix' for the situation that might come in handy in certain situations if you're set on using the opacity property.
http://www.impressivewebs.com/demo-files/css-opacity/css-opacity-demo.html

Learning Resources

HTML generally
http://webdesign.about.com/od/htmlxhtmltutorials/p/learnhtml.htm

HTML forms
free class
http://webdesign.about.com/c/ec/1.htm
overview of forms
http://webdesign.about.com/od/forms/a/aa031599.htm

Learning PHP
http://php.about.com/od/learnphp/p/learn_php_free.htm

W3C schools
HTML quiz, and do these certifications, and certificates
http://www.w3schools.com/html/html_quiz.asp
http://www.w3schools.com/cert/default.asp

HTML 5
http://www.html5rocks.com/
http://html5gallery.com/
http://html5demos.com/

Security malware etc, free virus scanners, external drives

http://blog.trendmicro.com/new-autorun-worms-utilize-action-key/
Roland Dela Paz Says:
May 26th, 2010 at 2:37 am
@Mpu-elcom
Thanks for sharing us these procedures.
After successfully disabling Autoplay in your machine, it is also a good practice to first open your removable drive via command prompt and look for suspicious files using the command "attrib". Usually, malware files have the following attributes, or any combination of the following:
System
Hidden
Read-only
You may also check hidden folders using the command "dir /ah". I personally practice this since worm malware like the one described above will automatically execute by just merely opening the drive via Windows Explorer (even w/o Autoplay).

Try avast and avg
free for windows - use to check exe files etc
http://www.avast.com/en-au/free-antivirus-download#tab2

http://www.avira.com/

http://housecall.trendmicro.com/au/

os x security, and network security

http://www.obdev.at/products/littlesnitch/order.html

good discuss of how to get rid of a rat
http://forums.macrumors.com/archive/index.php/t-658685.html

microsoft
http://technet.microsoft.com/en-us/library/dd632947.aspx

viruses and precautions etc
 http://www.webologist.co.uk/internet-news/gumblar-virus-threat-to-the-internet-how-to-remove

encryption of files
http://trac.filezilla-project.org/ticket/5530
http://blog.unmaskparasites.com/2009/09/01/beware-filezilla-doesnt-protect-your-ftp-passwords/
http://www.codefuzion.com/applications.html
http://josephbales.com/2009/01/05/encrypted-text-files-on-mac-os-x/

ftp/ ssh
http://en.wikipedia.org/wiki/SSH_File_Transfer_Protocol
http://www.panic.com/transmit/

wifi
http://stopdesign.com/archive/2005/02/07/secure-email.html

also searh corsaire whitepapers securing mac os x - good walkthrough of alot of stuff
http://research.corsaire.com/whitepapers/technical.html

Things you can do with HTML but not XHTML

News to me...
http://www.sitepoint.com/forums/showthread.php?t=393445
Create parts of the page dynamically with JavaScript while the document is still loading (e.g., using document.write()).

but in XHTML you get CDATA, which is handy...

read this when time... kinda wtf I thought XHTML was just better... maybe its just too late at night and I've forgotten.

more from that article...

Is XHTML supported by all browsers?
No. Only a few mainstream browsers support XHTML, like Opera, Firefox and Safari.

Most importantly, Internet Explorer does not support XHTML at all.

If you follow certain guidelines you can serve XHTML documents as text/html (see below). That means the document will be seen as HTML, which all browsers can handle. Virtually all browsers have a parser bug that ignores the slash in self-closing tags.


Should I use XHTML or HTML?
That depends on who you ask. There are a number of technical issues with this question, which preclude a simple and short answer. In reality, the latest W3C recommendation with widespread support is HTML 4.01. Unless you actually need any of the features that XHTML offers over HTML, there is no technical reason to use XHTML.

In order to actually benefit from using XHTML, you really need to understand the fundamental differences between XHTML and HTML. Such a site will only be available to a small minority of the surfing population, however.

Some web designers and developers prefer XHTML's syntax rules over HTML's. By following certain guidelines, you can use this syntax without technically using XHTML at all (see below). There are a number of potential pitfalls with this approach, but it is a possible way forward for those who absolutely want to type
instead of
.

Cool HTML coding quality checklist / reminder

Good to read through before you start a job if its been awile or check through before you launch a template etc.
http://sweatte.wordpress.com/usability/html-tips/

Make Illustrator cs3 pixel perfect for web design and slicing

Ok every time I get to slicing there is some trouble with Illustrator slices being off and I forget what I did last time to make it right. Here it is.

In General:
Illustrator is more like a drafting program, and can definitely achieve pixel perfection if you set it up right.

When your drawing boxes, think in pixels from the start, and key in the values of your box dimensions as you go. If you resize then, don't randomly free transform, but key in the dimensions, or, free transform using snap to grid/pixel. Its less to clean up later on.

Page grid:
For designing and rough draft stage I like to have my page grid set to:
Preferences > Guides and Grid > Gridline every 60px, subdivisions 6, which gives a 10px grid and works well for the 960grid designs. Snap to grid and 'try' and draw your boxes using whole numbers as you go.

For slicing stage I change it to Gridline every 60px, subdivisions 60. So it is now a 1px x 1px grid.

Before slicing I go through the boxes and make sure all heights and widths and x,y,-co-ordinates are whole numbers, and zoom right in to affirm they are on the pixel boundaries. Sounds laborious but usually there aren't that many things to slice with CSS3 and favouring a minimalist aesthetic.

For boxes with old school drop-shadows of say precisely 3px, it is really important to get pixel perfection,  or drop-shadows will be cut off and boxes misaligned.

Also for your setup, View > Check 'Snap to grid' and View > 'Pixel Preview'. Toggling pixel preview makes the 'snap to grid' item change to 'Snap to pixel'. If you cant find 'Snap to pixel' then try toggling 'Pixel Preview' on and off.

Slice tool caveats:
CS3 slice tool is unwieldy and annoying. It is easier to control the slice tool by first dragging near where you want the slice, then adjusting the slice using the x,y co-ordinates and the width and height (in toolbar across the top). This way you place the slice in exactly the right location to the pixel.

Knowing intimately what size your slices are will help anyway when it comes time to code the layout. I find slice stage a good time to write down the dimensions of the boxes, padding, hex values and the like on a paper printout of the layout, so all the values are right there to glance at when  you want to code it up (find glancing at paper faster than switching between windows)

Don't expect to batch slice your entire page in Illy and have it be perfect, my version definitely has a 1px shift buggy thing that crops up.

Save each slice one by one by going File > Save for web and in the web previews, zoom in to 400-800%, and check the slice boundaries are on the correct artwork boundaries.

I found the slice boundaries were sometimes shifted exactly 1px to the left when saving for web.
Not the width, just the location of the slice moves.
Don't ask why, simply go back to the artwork, and shift the x-coordinate of the slice box 1px to the right (eg add 1px to the x-co-ordinate value). Then, when you go 'Save for Web' zoom in again,  the slice will be aligned magically on the artwork boundaries.
So the x-co-ordinate of the slice is technically incorrect now, but if it slices in the location you want it to, that's all that matters.

This is the artwork and slice on the artboard, both have their left edges located at x=660px

But this is what the (bottom of the) slice looks like in Save for web preview window at 400%, it is actually slicing exactly 1px to the left of the artwork box.

So change the actual x-co-ordinate of the slice to be 661px, which, as you can see here is NOT aligned with the artworks left edge in reality...

But in the save for web preview window - it is now aligned with the artworks left edge! Go figure!

Time to buy CS5, apparently CS5 does great pixel prefect slicing and artworking.

More tips:
Set stroke alignment to be 'Inside' or 'outside' not center.

For 1px lines, make the stroke 0.999px or something, otherwise it gets blurry.

Also it is easier to align 1px rectangles to a pixel grid than 1px lines, which naturally sit on the centre of the gridline.
So try and draw filled rectangles rather than using the line tool with a stroke.

css3 buttons

The technique described here is is my favourite its benefits are:
http://papermashup.com/pretty-css3-buttons/

Newer CSS3 browsers get rounded corners, text shadow and box shadow and gradient.

Non CSS3 capable browsers get a square coloured gradient button, which looks styled enough to suffice as a button.

I prefer not to have the gradient in CSS3 for two reasons
1/ I want non css3 browsers to get some love
2/ I want the button code to be adaptable to different coloured buttons easily, and simply use the background property for changing the button colour.

Uses a transparent .png for the gradient, which means it is adaptable for any colour button, AND can be seen in IE7, IE8, and IE6 with alpha image loader filter if you care.

see also:
http://www.zurb.com/article/266/super-awesome-buttons-with-css3-and-rgba
http://www.webdesignerwall.com/tutorials/css3-gradient-buttons/
http://somadesign.ca/2010/realistic-looking-css3-buttons/

http://www.smashingmagazine.com/2010/04/28/css3-solutions-for-internet-explorer/
http://blog.anomalyinnovations.com/2010/03/creating-a-realistic-looking-button-with-css3/

Drupal Zen theme IE fixes

IE7

When using a background image as a bullet for a custom bullet list, IE7 was showing the default bullet AND the background image. Solution:

On ul:

list-style-image:none;

list-style-position:outside;

list-style-type:none;

and on li:

list-style-image:none;/*Benefit IE7 else double bullet*/

list-style-position:outside;/*Benefit IE7 else double bullet*/

list-style-type:none;/*Benefit IE7 else double bullet*/

this made the default bullet go away.

Background image bullet 'centering' vertically, a bit off on IE when text size is set to 'larger'.

....

floated block links like for navbar etc, if they show up in IE6 as stretching to the full width.

/*Fixes from above as suggested for .primary and .secondary used here for .nicemenus*/

ul.nice-menu-down li a

{

_display: inline; /* Otherwise the blocks mistakenly get 100% width in IE5 */

_di\splay: inline-block; /* Otherwise the blocks mistakenly get 100% width in IE6 */

}

ul.nice-menu-down

{

_width: 100%; /* Otherwise IE5 treats the ul as floated */

_w\idth: auto; /* Reset to auto width for IE6 */

}

possible bugs

weird, ie6, 7, 8 all display the same...

http://social.msdn.microsoft.com/Forums/en/iewebdevelopment/thread/d03ccc6e-bd74-4ce1-af96-b4e496704d85

As you can see, div.floatleft should have a bottom margin of 10px but it doesn't appear in any of the IE versions. It only happens to left-floated items, and the margin is correctly applied to right-floated items in the "clearfixed" container. There are work-arounds like using padding instead of margins but this is a bug and I was disappointed that it didn't get fixed in IE8.

this seems to be happening to me, using padding on the bottom altered layout across IEs which seemed to be ignoring the margin., except im using 1.0 strict doctype... all validates fine.

a- doctype isnt written correctly

b- IE8 is in quirks mode or emulating IE7

test with padding that will show it up. also might mean the doctype is not correctly written.

wtf ex http://www.webmasterworld.com/css/4041519.htm

Which makes me wonder if your site isn't listed in the blacklist MSFT keeps of sites that get IE7 mode forced onto them, and hence IE8 will continue to act up like IE7 does till you manage to get out of that list.
IE8 shows that list on this pseudo URL: res://iecompat.dll/iecompatdata.xml
Or if you managed to turn on the "display all sites in compatibility mode switch".
Brings us to establishing you do to have IE8 in that dreaded compatibility mode.

Equal Height Search Forms

I have long thought it was impossible to have equal height search forms cross browser.
Equal heights for form text and from submit button are really important when the search field is embeded within a banner design with a specific position, margin etc. The header instantly looks messy if this form element isn't styled to be equal heights and pixel perfect.

The search form in Drupal is a common header element block, I'm hoping to come up with generic styling for it that is cross browser, using some nice css3 properties. Ideally, to adapt it to each site, one only needs to change the background and border colours of the form elements.

Anyway this solution looks promising:
Example text page
http://www.onderhond.com/testpages/search-form.html

Write up and code:
http://www.onderhond.com/blog/work/equal-height-search-form

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.