How to set up an email template for broadcast
1. Email build checklist
Technical Stuff
"Keep the markup clean and valid"
Moobiz broadcast is built to use best practice in the way that it deals with imported template code and requires that imported code is valid markup.
Email template building tips:
- As with modern web pages, use XHTML for the DOCTYPE
- Validate your HTML and make sure it doesn't contain any markup errors (other than XHTML errors concerning background and height attributes for table cells which are unavoidable)
- As with modern web pages, use UTF-8 for the Content-Type Meta tag
- UTF-8 means using character symbols such as © instead of their entities such as ©
- Don't rely on entities or "spacer GIF's" to hold your design together
- Don't include any JavaScript (can cause security warnings)
- Keep the width of the email to around 500 pixels
Styles & Colours
Even with error free code there are many ways to build the page! Here are some tips to help you get your email template looking the way you want it in as many email clients as possible, as quickly as possible.
Email design styling tips:
- Only use inline CSS, don't put it in the <head> (either embedded or linked)
- Shorthand CSS rules are normally best avoided ("background-color: red" works in Hotmail but "background: red" doesn't)
- Check text / background contrast, with and without images loaded
Images, tables and practical considerations
"Try to get the best compromise across email clients"
Email clients are a difficult bunch of customers to build a consistent design with, when you get into the nitty gritty of building the email. Here are some tips to keep you on the straight and narrow.
Email design build tips:
- Specify useful text alternatives for images
- Mix images and text, don't just include one big image
- Use tables for the layout and specify heights on cells
- Slice horizontally to avoid line breaks between adjacent images
- If slicing vertically, make sure cell widths add up correctly
- Use style="display: block;" on images for maximum compatibility
- Specify background images using background="image.jpg" on the table cell, combined with style="background-repeat: no-repeat;" (using background-image CSS won't work in Hotmail or Google Mail)
Don't forget! Some good practice & Etiquette
- Include an unsubscribe link or instructions (see email personalisation section to automate this!)
- UK legal requirement - put your company registration in the footer
- A plain text version of your email is automatically created
Spam filter avoidance
"Avoiding the spam folder at all costs!"
Even after you have carefully crafted your email masterpiece, unless you pay attention to the content, it can easily wind up in the spam folder! Here are some common mistakes to avoid:
Take care to avoid the following in your email subjects:
- USING LOTS OF CAPITAL LETTERS
- Getting carried away with exclamation marks!!!
- Using "free", "offer", "deals" keywords etc.
Size Matters!
- Make sure not too big, some mail servers block based on size
- We automatically help keep the size down by hosting images on our servers rather than sending them as attachments
Test on a range of email clients
"Test test test and test again!"
We recommend thorough testing in a range of email programs and web mail sites. Generally, the top four below cover a high percentage of most mailing lists though bear in mind a B2B list will likely have a lower percentage of Hotmail users than a B2C one for example.
Top email clients for testing on:
- Outlook 2003 / Outlook Express (use same rendering engine)
- Hotmail / Windows Live Mail
- Google GMail
- Thunderbird
- Yahoo! Mail
- Outlook 2007
- Roundcube web mail
- AOL web mail
- Tiscali web mail
