31 Jan Email Marketing Template Design Guidelines
Email marketing is one of the best and most effective ways to promote your brand and clients. In order to create a successful email marketing campaign there has to be the right amount of permission, relevance, timeliness, engagement, and of course, design that translates universal.
Before we dive into the details, it is imperative to understand that building an email is not like building for the web. Email, unlike the web, does not always move forward in technology standards. However, if you focus on simplicity, basic coding skills, and implement regular tests you can have a successful email marketing campaign.
First, use table as the frameworks for your emails. Clients like Gmail and Outlook 2007 have poor support for float, margin, and padding and nested tables are widely supported and have consistent treatment of width. By setting the width of your table in each cell and not the table itself, you are essentially creating the most universal email layout. Using percentages based widths can cause issues with your email clients, so stick with pixels to prevent this. Table nesting is far more dependable then setting left and right margins or padding for table cells. Table nesting will always give you the best results across a variety of email clients. To work order background colors, wrap your email with a 100% width table and give the table a background color. Finally when using table as the framework, avoid unnecessary whitespace in table cells.
Secondly, CSS and general font formatting are good tools to use because it is well supported by most email clients. Stripping the CSS from the <head> and <body> of any email, you have no alternative but to move all CSS inline. Luckily, free services (Premailer is one) allow you to move all CSS inline with just the click of a button. Avoiding shorthand for fonts and hex notation is crucial because a good number of email clients reject CSS shorthand for the font property. It is a safe bet to stick with longhand approach. Paragraph spacing can be tricky to get a consistent look. If you feel it necessary to use paragraphs, the best approach is to set the margin inline via CSS for every paragraph in the email. When using links, set a default color to each link and add a repetitive span inside the tag.
Thirdly, when designing your email is it important to remember that images in HTML emails will not be visible by default for many of your clients. Most email clients replace images with an empty placeholder in the same dimensions and have image blocking on by default, implement fixed cell widths to keep the formatting in place without relying on images. Always remember to include the dimensions of your images. If this step is missed, a number of clients will invent their own sizes and essentially break your layout. Avoid PNGs all together. Stick with the GIF or JPG formats for images. If you choose to use a background image in your email design, provide a fallback color. Specific to your Outlook.com email clients, use the display hacks to remove the padding in Outlook.com and do not use floats.
Fourthly, HTML5 video can work in some email clients (Apple Mail, Entourage 2008, MobileMe, and the iPhone) and the real benefit is if the video isn’t supported, you can provide reliable fallback content. Animated GIF or clickable images linking to the video are safe bets.
Fifthly, when designing your email there are a few extra steps to keep in mind when coding your emails to get a decent result for the mobile subscribers. Remember to keep the width less than 600 pixels. This ensures the design will still be readable when scaled down. Also, since most mobile automatically adjust font sizes, it is important to be aware of this programmed adjustment.
Lastly, test, test, and test! Retesting your email designs on a regular basis avoids you falling out of support standards with your email clients.
Although designing HTML can be rigorous and detail-orientated the hard work pays off. Undoubtedly, email is the most successful and targeted marketing channels available.