Creating s that really work. A guide to creating s compatible with all clients

Transcription

1 A guide to creating s compatible with all clients

2 Contents Introduction... 3 Basic principles when designing s... 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 s... 6 Different 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 s Tips on designing an template Tips on content for s & microsite pages Newsletter real estate Want more return on your investment? - Five ideas for follow up s Hot tips for Avoiding Spam Filters... 14

3 Introduction Creating s 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 s. The smartmarketer echannel editor is designed for use by non-technical people to create s without having to know any HTML code. However designing s 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 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 clients. If you are having issues with deliverability or display in a particular client then please refer to FAQ index on compatibility issues available by clicking here Page 3 of 15

4 Basic principles when designing s There are some basic considerations to make when you are designing content for an . It is often not possible to take your paper based marketing materials and transpose them for . It may also not be possible to use the same code used on your website in an due to the way HTML is supported by 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 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 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 . You have got about three seconds to grab the recipient s interest with an . Spend those three seconds wisely. Due to the way clients display s (in preview panes, for example) the top left of an is by far the most important area, this also means 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 is via the preview pane of their client. The size of a preview pane will vary, but we would recommend focusing on the top pixels of your and setting it to 600 pixels wide at a maximum. The alternative is to design your to be fluid where it will resize depending on the size of the preview pane. Above the fold This is the section of the 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 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 is to use linked rather than embedded images. Page 4 of 15

5 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? Page 5 of 15

6 Tips when designing HTML s Different Clients There are a number of issues to bear in mind when designing s in HTML. As with different web browsers, clients can vary in how they treat HTML. The following offers some guidelines to using HTML in s. We strongly recommend that you test your s in the major clients before sending an ing. If required, smartfocus DIGITAL can provide this service for you. For information on what is supported by different clients use our index of FAQ s available by clicking here smartmarketer echannel created forms can be used within s, but are not supported by the majority of clients. We recommend that if you wish to use forms, place a link within the and host the form on an echannel microsite page. Displaying Images Within echannel you can link or embed the images in your . 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 . 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 s at less than 100Kb. s of less than 100Kb are perfectly acceptable for Business 2 Consumer s and usually give much better response rates. Below is an example of an newsletter and the difference embedded images can make. However, beware some clients will not show embedded images either. Different clients and settings within an client will effect what a recipient sees by default. It is worthwhile testing your in a variety of clients to see what your displays best with, linked or embedded images. Linked images Embedded images Page 6 of 15

7 smarttip: Some older 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 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 ing lists with a majority of corporate addresses, the balance can suggest going for linked images, for smaller B2B 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 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 webbased clients such as Hotmail. The way to avoid these issues is to create your in a table and set background colours in table properties or table cell properties. Use hexadecimal or web safe colour codes, older browsers and clients don t recognise named colours. Page 7 of 15

8 Scripting Do not use scripting; a simple button effect script can cause your 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 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 so that the recipient can download them from the web, this way the itself should be delivered and the client can still get the material. Layout Tables If the layout of your 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/ 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 clients. If the layout is simpler, you can consider using a percentage width to give the maximum compatibility across different clients (e.g. think about handheld devices with small screens). Set the width of your . 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 . ASCII Some clients will not be able to use 8-bit characters, so you ll need to encode them using ASCII characters. If you re sending s 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. Page 8 of 15

9 Tags Remember to include all matching pairs of tags i.e. both opening and closing tags. Some 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 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 rather than 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. Page 9 of 15

10 Tips for Text s A text 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 client to display incoming s. The only formatting you can give it is to use e.g.. ****, to make rules, and set line breaks. Lines in your text may be up to 76 characters long without being broken by up to 95% of the 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 s will be managed for you (including the reduction to 70 characters where the is delivered to a Yahoo address). Long URLs often break in text s. If you have a long URL, make sure it starts on a new line to avoid it breaking. Page 10 of 15

11 Tips on designing an template If you ve been asked to set up a template for an , 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. Page 11 of 15

12 Tips on content for s & microsite pages When you are thinking about the content for s and microsites, the first thing we recommend is having a fulsome discussion internally about who you plan to send the to. Discuss if the 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 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 and decide what it is you want the recipient to do. Is the purpose of the 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? Page 12 of 15

13 Want more return on your investment? - Five ideas for follow up s Purchase journey s 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 required an action ask them why didn t they act? The tone of this should be inviting not accusing. Clickthrough where did they go from your ? Build your next around that landing page. Opinion what do they think of the 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. Page 13 of 15

14 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 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 will deliver to the inbox for popular ISP s Page 14 of 15

15 Contact Details smartfocus Digital Kenneth Dibben House Southampton SO16 7NS UK Tel: +44 (0) Fax: +44 (0) smartfocus Headquarters One Redcliff Street Bristol BS1 6NP UK Tel: +44 (0) Fax: +44 (0) Page 15 of 15