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
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
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.
Posts
