Creating Emails that really work
Contents
Introduction ... 3
Basic principles when designing Emails ... 4
Content ... 4
Location ... 4
Remembering your Audience ... 4
Preview panes ... 4
Above the fold ... 4
File Size ... 4
Driver text box (Johnson box) ... 5
Tips when designing HTML emails ... 6
Different Email Clients ... 6
Displaying Images ... 6
Business 2 Business and Business 2 Consumer ... 7
HTML editors ... 7
Fonts ... 7
Colours ... 7
Scripting ... 8
Executables (Flash, VBScript and ActiveX) ... 8
Layout... 8 Tables ... 8 Pixels ... 8 ASCII ... 8 Tags ... 9 Using IP addresses ... 9 Accessibility ... 9
Tips for Text emails ... 10
Tips on designing an email template ... 11
Tips on content for emails & microsite pages ... 12
Newsletter real estate ... 12
Want more return on your investment? - Five ideas for follow up emails ... 13
Software Version:7.10 Oct 20117.00 Nov 2010
Page 3 of 15
Introduction
Creating emails that really work, sounds like such a simple task and we hope with smartMARKETER eChannel it will be, however there are a few things you should think about to get maximum deliverability and readability for your emails.
The smartMARKETER eChannel editor is designed for use by non-technical people to create emails without having to know any HTML code. However designing emails is not all about the HTML, you need the think about the content, design and always consider the demon in our world, the dreaded Spam filter. In this guide we hope you will find some useful advice on the points to look out for as well as some more specific advice for people who do know HTML code.
If you have a designer putting together an email template for you, we would recommend you forwarding them a copy of this guide to ensure you get a template that will work for a variety of email clients.
If you are having issues with deliverability or display in a particular email client then please refer to FAQ index on compatibility issues available by clicking here
Software Version:7.10 Oct 20117.00 Nov 2010
Page 4 of 15
Basic principles when designing Emails
There are some basic considerations to make when you are designing content for an email. It is often not possible to take your paper based marketing materials and transpose them for email. It may also not be possible to use the same code used on your website in an email due to the way HTML is supported by email clients. However, there are some general principles which when considered can help.
Content
We can‟t stress enough that what you write about in an email is critical. Always view this content from the angle of the proposed recipient, what they want to read and not just what you want to say.
Location
Where you locate content within an email is also important. As with a website, people will scan for content that engages them but this tends to be much more focused within an email. You have got about three seconds to grab the recipient‟s interest with an email. Spend those three seconds wisely. Due to the way email clients display emails (in preview panes, for example) the top left of an email is by far the most important area, this also means email content is generally narrower than web and print layouts.
Remembering your Audience
Preview panes
Remember that the first sight many recipients will have of your email is via the preview pane of their email client. The size of a preview pane will vary, but we would recommend focusing on the top 250-300 pixels of your email and setting it to 600 pixels wide at a maximum. The alternative is to design your email to be fluid where it will resize depending on the size of the preview pane.
Above the fold
This is the section of the email that is visible without scrolling (this will obviously depend on the resolution setting of the recipient‟s monitor). The above the fold area is typically 650x275 pixels.
File Size
Although Broadband connections are now very popular, there are still a large number of people on dial-up internet connections. We would recommend keeping your email file size below 100Kb to ensure that everyone can receive your mailings in a reasonable amount of time. One way to reduce the size of an email is to use linked rather than embedded images.
Software Version:7.10 Oct 20117.00 Nov 2010
Page 5 of 15
Driver text box (Johnson box)
Because the recipients‟ search for content relevant to them is more focused, we recommend the use of driver text or a „Johnson Box‟ (the brainchild of a direct mail copywriter called Frank H. Johnson). This is an area of copy at the top of the newsletter which „tastes‟ content further down and gives people a reason to scroll.
Look at these two newsletters, at first glance very little difference, but which would you click on?
Software Version:7.10 Oct 20117.00 Nov 2010
Page 6 of 15
Tips when designing HTML emails
Different Email Clients
There are a number of issues to bear in mind when designing emails in HTML. As with different web browsers, email clients can vary in how they treat HTML. The following offers some guidelines to using HTML in emails. We strongly recommend that you test your emails in the major email clients before sending an emailing. If required, smartFOCUS DIGITAL can provide this service for you.
For information on what is supported by different email clients‟ use our index of FAQ‟s available by clicking here
smartMARKETER eChannel created forms can be used within emails, but are not supported by the majority of email clients. We recommend that if you wish to use forms, place a link within the email and host the form on an eChannel microsite page.
Displaying Images
Within eChannel you can link or embed the images in your email. By default eChannel will link the images, which means that images are stored on smartFOCUS DIGITAL servers and linked to the file, this has the immediate benefit of reducing the file size of your email.
Embedded images will increase the size of the message, but used with care (i.e. small optimised images) most of our clients benefit from sending out „image-full‟ emails at less than 100Kb. Emails of less than 100Kb are perfectly acceptable for “Business 2 Consumer” emails and usually give much better response rates.
Below is an example of an email newsletter and the difference embedded images can make. However, beware some email clients will not show embedded images either. Different email clients and settings within an email client will effect what a recipient “sees” by default. It is worthwhile testing your email in a variety of email clients to see what your email displays best with, linked or embedded images.
Software Version:7.10 Oct 20117.00 Nov 2010
Page 7 of 15
smartTIP:
Some older email clients (e.g. old versions of Outlook) may block embedded images, either stripping them out altogether or showing them as attachments instead. This is relatively rare, especially as more and more users upgrade to modern email clients. We automatically use linked images for domains known not to support embedded images, such as Hotmail.
Business 2 Business and Business 2 Consumer
Some corporate firewalls block embedded images from being displayed but some also block linked images. When emailing lists with a majority of corporate addresses, the balance can suggest going for linked images, for smaller B2B email addresses embedded is still usually preferred.
For B2C, from our years of experience and testing, embedded images gives better response rates. Conducting testing is always the best route if you want to find out what works for your audience. smartFOCUS DIGITAL can provide consultancy and support should you wish to investigate this further. There are always other factors to take into consideration: Windows XP Service Pack 2 blocks linked images by default. Likewise, many web mail clients will block linked images but will display embedded graphics as standard.
HTML editors
If you‟re using an HTML editor such as Dreamweaver or FrontPage, check your HTML carefully as they can create non-standard HTML which may be acceptable to the latest web browsers but will not necessarily „work‟ in a number of email clients.
Fonts
Only use standard system fonts for body text e.g. Arial, Helvetica (check the list in the eChannel Editor for a more complete list). Don‟t make assumptions on the size of fonts, for example, forcing table cells to be a particular height or width will cause things to break if the font is different to that expected.
Colours
Don‟t set background colours (or any other attributes) in the body tag as this may be over-ridden by web-based clients such as Hotmail. The way to avoid these issues is to create your email in a table and set background colours in table properties or table cell properties. Use hexadecimal or „web safe‟ colour codes, older browsers and email clients don‟t recognise named colours.
Software Version:7.10 Oct 20117.00 Nov 2010
Page 8 of 15
Scripting
Do not use scripting; a simple button effect script can cause your email to be bounced by firewalls. It is possible to get some rollover effects by clever use of in-line stylesheets. Animated GIFs also give a lively appearance without causing firewall problems, but are not supported in Outlook 2007.
Executables (Flash, VBScript and ActiveX)
Don‟t attach executable files as they will be blocked by many firewalls. This includes Flash files, VBS (script) and .exe files. If you want to deliver these items include a link in the email so that the recipient can download them from the web, this way the email itself should be delivered and the client can still get the material.
Layout
Tables
If the layout of your email is critical, use tables and set the exact cell heights and widths to ensure that all recipients see the same thing. <BR> and <P> may be treated differently by different browsers/email clients and add varying amounts of space.
Pixels
As above, if the layout is critical, use pixel measurements rather than percentages for table cell height and width so that it appears consistently across all email clients. If the layout is simpler, you can consider using a percentage width to give the maximum compatibility across different email clients (e.g. think about handheld devices with small screens). Set the width of your email. This should be set to no more than 700 pixels (or to a percentage); otherwise recipients with older machines and low resolution monitors may not be able to see the full width of the email.
ASCII
Some email clients will not be able to use 8-bit characters, so you‟ll need to encode them using ASCII characters. If you‟re sending emails in non-Western languages, such as Arabic, Japanese, Polish, note that eChannel can support these character sets. These need to be specified correctly in the HTML header.
Software Version:7.10 Oct 20117.00 Nov 2010
Page 9 of 15
Tags
Remember to include all matching pairs of tags i.e. both opening and closing tags. Some email clients are less forgiving of missing tags than recent web browsers.
Make sure HTML tags use consistent quote marks. Either use them or don‟t, but make sure there are no mismatched quotes.
Don‟t put class or id attributes on img tags, instead wrap the img tag within a div or span and add the class/id to the div/span tag. This avoids the possibility of the eChannel Editor removing the class/id attribute when replacing images.
Close all HTML tags as leaving out </td> for example, will cause variations in how your HTML is read by different email clients. Don‟t use header tags as web-based clients replace these with their own code.
Using IP addresses
When referencing a URL location in any form (perhaps in a link, or an image) do not use an IP address. For example, if linking to an external web page use http://www.abc.co.uk/news rather than http://1.2.3.4/news. Outlook for example when seeing a link containing the IP address, will disable all links within the message and label it as possible spam.
Accessibility
Be aware of the main accessibility requirements when designing and building pages e.g. use of alt tags, avoiding low-contrast colour combinations and fixed-width fonts.
Software Version:7.10 Oct 20117.00 Nov 2010
Page 10 of 15
Tips for Text emails
A text email may only use the standard keyboard numbers and characters. The way it appears to the recipient (i.e. size, font etc) will depend on how they have set up their email client to display incoming emails. The only „formatting‟ you can give it is to use e.g.. ****, --- to make rules, and set line breaks.
Lines in your text email may be up to 76 characters long without being „broken‟ by up to 95% of the email packages receiving them. The exception is Yahoo whose narrower text viewer only allows for 70 characters. In eChannel the number of characters in a line in your text emails will be managed for you (including the reduction to 70 characters where the email is delivered to a Yahoo address).
Long URLs often break in text emails. If you have a long URL, make sure it starts on a new line to avoid it breaking.
Software Version:7.10 Oct 20117.00 Nov 2010
Page 11 of 15
Tips on designing an email template
If you‟ve been asked to set up a template for an email, a microsite page or other communication for use in eChannel‟s Content Management System, we recommend reading through the following tips.
Once imported into eChannel‟s CMS, your template may be used to generate each new issue of a newsletter or as the basis for each new page in a microsite. If you are not familiar with eChannel‟s content management system and the ways in which it can be set up to protect HTML formatting, for ease of use by marketers who do not have HTML skills, please contact us to arrange you an introduction before you start. If you‟re designing a newsletter template for regular use, think about the changes you expect to make for different editions of the newsletter, for example, you may want the choice of aligning a thumbnail picture within an article either left or right, or removing the image altogether. You may want to have the option to include a standfirst (a brief introduction that sums up an individual article) or pullquote box (where you highlight something said in an article). Ensure that your design and code allows for these variations.
Avoid the use of graphic text for headers and other frequently changing items. They can look good, but you will need someone on hand who knows how to use a graphics package to make the changes for each new issue of the newsletter.
Put yourself in the shoes of those people within your organisation who don‟t have HTML knowledge and who will need to be able to build a new edition of the newsletter using your templates and design with them in mind.
Don‟t use complex text formatting or graphic slices that only a web designer will be able to find their way around on areas of the page that will need updating. Keep any text and graphics that will need updating as simple as possible.
Keep elements such as sub-heads, graphics or body copy in individual cells so that they can easily be „protected‟ in the content management area of the eChannel system to avoid users affecting the formatting when inputting new copy.
Software Version:7.10 Oct 20117.00 Nov 2010
Page 12 of 15
Tips on content for emails & microsite pages
When you are thinking about the content for emails and microsites, the first thing we recommend is having a fulsome discussion internally about who you plan to send the email to. Discuss if the email is for your entire client/customer base, or just a particular segment? Would you benefit from creating different versions of the newsletter for different recipients? Remember that with our system you can reorder the content, remove or add images and add dynamic (personalised content), so having multiple versions may not require the creation of any extra content.
We always recommend having a look at the type of written material, both on and offline, which your target audience are also receiving. Take a critical look and put yourself in your customers‟ shoes. Use that process to inform your own content ideas.
Spend time working on the style and tone of your proposed communication. The most important thing is to get the information across as clearly as possible but you also need to be warm and conversational in style otherwise email content can come across as rather cool and distant.
Then brainstorm what you can write about. It‟s worth drawing up a forward plan so you‟re not just thinking about content on an issue-by-issue basis. Think about future product and services launches, shows and exhibitions you may be attending and what is going on in the wider industry where you do business.
Think about where in the newsletter your proposed item should go before someone writes it. Otherwise items tend to be ordered purely on length. Decide on where something should go and why and then give the author a word count before they begin to write, it helps concentrate the mind wonderfully!
Newsletter real estate
Consider where you plan to use items within your newsletter. Ideally you want a combination of short and long items and a structure that isn‟t just linear, i.e. simply slides down a page in a single long grey column (as „Monthly Mess‟ illustration earlier). Think about how you will follow through on your email and decide what it is you want the recipient to do. Is the purpose of the email to make a purchase, fill out a form, phone a sales rep? Then think about how you intend to respond online if they do act e.g.; „Thank you for your order‟ or „Our sales rep will call on…‟ and what to do if they don‟t react?
Software Version:7.10 Oct 20117.00 Nov 2010
Page 13 of 15
Want more return on your investment? - Five ideas for follow
up emails
Purchase journey – emails that support the customer purchase journey online – e.g. order
acknowledgement and dispatch – should be more than perfunctory. Use them to strengthen the relationship.
Recency – post purchase follow up as soon as possible. The sooner you do this the more likely customers
are to respond positively. Be helpful, not pushy.
Non-responders – if your email required an action ask them why didn‟t they act? The tone of this email
should be inviting not accusing.
Clickthrough – where did they go from your email? Build your next email around that landing page.
Opinion – what do they think of the email you sent previously, of your products, or a planned new service?
People like to be asked. Need some help?
smartFOCUS DIGITAL work with a dedicated online content and language consultancy and can arrange specialist services on devising and writing content including training in content creation. Call our sales team for more information.
Software Version:7.10 Oct 20117.00 Nov 2010
Page 14 of 15
Hot tips for Avoiding Spam Filters
Always remember to set the Sender Profile and To Name
Use an obvious and consistently branded sender profile (From name and address)
Use consistent branding throughout the email and any microsite pages
Ensure you have a clear and efficient subscribe and unsubscribe process
Avoid subject lines that start with the word Free or include the word free in all uppercase letters
Avoid using a coloured background
Test with Spam Probability, this uses Spam assassin rules which is one of the largest Spam software in the industry. Your point score should be 2.5 or less
Send a test campaign and use the inbox delivery confirmation checker to check that you email will deliver to the inbox for popular ISP‟sSoftware Version:7.10 Oct 20117.00 Nov 2010 Page 15 of 15
Contact Details
smartFOCUS DigitalKenneth Dibben House Southampton SO16 7NS UK Tel: +44 (0)2380 119 119 Fax: +44 (0)2380 119 119 Email: [email protected] www.smartfocus.com smartFOCUS Headquarters
One Redcliff Street Bristol BS1 6NP UK Tel: +44 (0)117 943 5800 Fax: +44 (0)117 927 7588 Email: [email protected]