Written by:
10/11/2011 4:47 PM 

MailChimp is one of the leading email and newsletter campaign management sites and is used by over 1 millions businesses in the world at present.

It has a wide array of forms and emails, which have been professionally designed and look good and work very well but what happens if you want to stamp your own identity onto your email campaigns?

Well fortunately, there is a way to do this with MailChimp as it has the facility to allow you to design your own html templates, which you can then upload.

The problem with doing this is that HTML email and newsletter design is not as easy as just producing a pretty design in PhotoShop or indeed modern XHTML. Due to constraints in the way GMail, Hotmail, Yahoo and Outlook render CSS and HTML, you have to go back to good old-fashioned tables and inline CSS. Yes we groaned too but its worth persevering with.

In addition, if you have a graphically heavy design, which uses many images, this can be disastrous, as not all users will opt to download the pretty images you have produced and you end up with a load of white boxes with red crosses in them, look at this one for instance, not pretty:

By using clever design and taking into account the quirks of different email systems, a template can be produced which looks good in all of them.

For instance, here is one of ours:

This looks in all the mail programs as it was first designed because it has no images, uses tables and inline CSS. Note the inline CSS is very important as most email programs strip out external CSS and replace it with the styles of the website or program you are using.

So how do we go about producing an html email? Well to start with there are some important points to consider:

• Width: Ensure the width of the email or newsletter is less than 600px to prevent side scrolling and because most email sites have a maximum width.
• Cell Width: Set the widths in the table cells not in the tables
• CSS: Use old inline styles and repeat them for every cell in the table.
• Images: Minimise image use, you can use one for a logo but ensure it doesn’t impact too much on the overall design. Always add the image sizes in your html don’t assume the email program will guess the sizes. Don’t forget to load the images from your host, don’t embed them in the email.
• HTML: Use tables like sites were built back in the 90’s as most email systems use a stripped out set of tags
• Nesting: Use nested tables for layout
• Clean Code: Get rid of all those whitespaces
• CSS Shorthand: Don’t use any CSS shorthand
• Spacers: Don’t use spacer gifs.
• Alt Tags: Always use alt tags.
• Floats: Steer clear of using floats, try using align instead although this may not work in Hotmail.
• Scripts: Don’t use any scripts, they will be stripped out and therefore useless
• Test: Test the finished email in as many programs as you can get your hands on, don’t assume it will look good in every system
• Text Only: Always have a text only email to fall back on.
• Research: Read as much as you can about design of html emails, as it is a minefield and there are so many little quirks. Remember Google is your friend.
• Unsubscribe: Ensure your email reader can unsubscribe easily and quickly. Readers do not want to feel spammed.
• Content: Keep your content, clear concise and engaging so people actually want to read it. Make sure it loads nice and quickly.
• View in Browser: Ensure you have a link so the reader can view the email in the browser. Put a copy of your email on your server.
• Stuck: Don’t be scared to use a template if you don’t feel up to making your own. There are many free ones out there that you could alter if you want a more custom look.
• Special Tokens: MailChimp requires specific tokens in the template to work correctly, these are automatically inserted if you use a readymade template, but we have to add them to custom html designs.

o   *|UNSUB|*  -  Unsubscribe token so you have an unsubscribe link that works with MailChimp's server

o   *|EMAIL|*  -  To show the address in the footer the email was sent to

o   *|ABOUT_LIST|*  -  Adds a link to a MailChimp page so the reader can see why they are on the email list

o   *|UPDATE_PROFILE|* -  Allows a link to a MailChimp page to allow a user to update their details

o   *|REWARDS|*  -  Adds the MailChimp Logo and Rewards Link which is require for free accounts.

o   *|LIST:ADDRESSLINE|*  -  Adds the business address details as required by Spam laws.

So you have taken onboard all the tips and researched how to build an html email and want to take the plunge. What does a MailChimp email template look like in html? Download it here to look through it on your own machine. Its html so will open in Notepad or the html editor you are using.

When you have built your custom email or newsletter template, you can log into MailChimp and there is an option to upload your own HTML and a preview tool to ensure it all looks and works OK.

Download the html file for this blog post

Copyright ©2011

Trackback Print

Tags: MailChimp , HTML Email , Email Design , Email Template

Categories: CSS, Graphic Design, Tutorials

Location: Blogs AnodisedBlue Blog

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel