Nearly every one in the world has received an email in their lifetime and Email Direct Marking Campaigns ( or EDM’s for short) are increasingly becoming a more popular method of communication. Today post will focus on 12 tips and tricks that you need to be aware of before you start designing and coding an HTML email.
1. Scrap <div>’s use <table>’s instead.
Most web designers are used to design websites using div’s and really don’t worry about using tables because they are the devil but when you start to coding a HTML email you will need to use tables and even sometimes tables within tables to accomplish the desired design.
2. Limited CSS support
Unluckily a lot of CSS elements aren’t widely supported through by the popular email clients so using -moz-border-radius won’t be accepted on most email clients. Thanks to Campaign Monitor they have created a list of which email clients do and don’t support. Guide Here
3. Use Inline CSS.
Yes, sorry you can’t link or import your CSS files to your newly designed email. As this is quite annoying since you have to resort by using the old school method of inline css that mean every ‘p’, ‘header’ tags need they own individual font-size, line-height, color and so on.
4. Avoid using shorthand for fonts and hex notation
A quite few of email clients reject CSS shorthand for the font property. In the following example you will see what you don’t want to set your font styles.
p {font:bold 1em/1.2em georgia,times,serif;}
but instead declare the properties individually like this
p {
font-family:georgia,times,serif;
font-size:1em;
font-weight:bold;
line-height:1.2em;
}
When declaring color property in your CSS, some email clients don’t support the shorthand hexadecimal colors like color:#000; instead of color:#000000;. Simple Tip: Stick to the longhand approach for the best results.
5. Remove white gaps between images
If you see that your images have white gap between them just insert in your inline style css ‘display:block’ this will close the gap if you wanted to display border to border. If you still have white gaps make sure you defined the width and height of both your images and your cells. Where the cell height may vary, such as cells containing text, height=”auto”
6. Provide fallbacks on background images.
If you want to use a background image in your design, always provide a background color the email client can fall back on because you could run into trouble if you delete the image, rename the file or its fail rendering.
7. Keep the width less than 600 pixels
Think about the people who will be viewing your email. Once you account for the pixels used by email clients and their menus panes you will find that you don’t actually have a lot real estate left, so the width you use in your design need to have a maximum of 600px especially for users with a small size screen.
8. Don’t rely on all images
With all of these coding and design considerations it may be tempting just to make the whole email a single image. But that is a bad way, actual text should be where possible as it quicker to load. It is also important to use text because many email clients block images by default and if you did create purely image based email it could just render as grey boxes.
9. Consider your content carefully
The key here is to remember quality over quantity, no one will read a thousand word marketing email. You have at least 3 to 5 seconds to grab the average readers attention before they go away or even worse clicking delete. Accomplish this with fast loading, attractive visuals, concise copy and clear descriptive headers.
10. Video’s in your emails.
Since they isn’t no support for JavaScript or the object tag. Adding playable video in email has long been limited to just creating animated gif’s files. However adding HTML5 video tag in email showed some promising results. Turns out HTML5 video does work in a few email clients such as Apple Mail, Entourage 2008, MobileMe and the iPhone. But if the HTML5 video tag isn’t supported, providing reliable fallback such as animated GIF or an click-able image linking to the video in the web browser.
11. Allow Simple Unsubscribing
Unsubscribing should be a painless process that virtually anyone viewing your email should be able to figure out. To accomplish this, include an easy unsubscribe link and make sure it’s easy to spot. Designers and marketers who attempt to hide this link lack integrity and respect for their audience as it will give you a fatal blow by giving your company a bad name.
12. Test Thoroughly
When we design web pages one of the major processes we have to go through is cross browser testing this process involes testing in Safari, Mozilla, IE etc. But just imagine designs for 30 and more email clients is just even worse.
Talking about 30 emails clients each of them has their own standards and varying support for different commands. To begin, test in the email clients that you have handy. Sign up for accounts with popular webmail clients like Gmail, AOL and Yahoo.
Also make sure to test out the default apps for both Mac’s and PC’s. Obviously, you can’t test every single clients out there. I would suggest that you sign up for a of a service like Litmus during the testing phase as this will allow you to quickly get a preview of the finished product on 32 different email clients and is one of the best ways to ensure that everyone is covered.
Sites & Resources
- Premailer – this tool will move all CSS inline with the click of a button. Personally i would leave this step to the end of your build process so you can utilise all the benefits of CSS.
- Tableizer – A quick tool for creating HTML tables out of spreadsheet data
- Inline Styler – A site which converts CSS rules into inline style attributes
- Email Design Gallery – An site stack full of email design inspirations
- HTML Email Gallery – another site stack full of inspirations
- Litmus – A service that allows you to test your newly design emails on multiple email clients
