Rhetorik Email campaign - Guidelines

Rhetorik Email campaign - Guidelines 18/06/2013 Version: 1.1

Table of contents 1. INTRODUCTION... 2 2. THE PROCESS... 2 3. WHAT WE NEED TO SET UP THE EMAIL BROADCAST... 2 3.1 Email campaign set up brief... 2 3.2 Final email creative... 3 4. TIMINGS... 4 5. GUIDELINES FOR CREATING THE HTML TEMPLATE... 4 5.1 KISS (Keep It Simple, Stupid)... 4 5.2 Observe Established Digital Visual Standards... 5 5.3 Choosing an email width... 5 5.3.1. Designing flexibly for desktop and mobile... 5 5.4 The Fold... 6 5.5 Use Clear Unsubscribe Links... 6 6. CODE... 6 6.1 Code to the XHTML 1.0 Strict DOCTYPE... 6 6.2 Table structure method... 7 6.3 CSS and Inline Styles... 7 6.4 Header CSS... 7 6.5 @media queries... 8 6.6 Avoid Background Images on Tables and Cells... 8 6.7 Adding a Background Image... 8 6.7.1. Table Attribute Technique... 8 6.7.2. The CSS Technique... 9 6.8 Avoid Scripts, iframes, and Advanced Features... 9 6.9 Use Height and Width Image Attributes... 9 6.10 Spacer Gifs... 9 6.11 Alt Tags and Image Blockers... 9 6.12 Special Characters... 10 6.13 Special Characters in Text Only Emails... 10 7. TEXT ONLY AND ONLINE VERSIONS... 10 8. MULTILINGUAL CONSIDERATIONS... 11 9. SUGGESTED WORDS TO AVOID IN SUBJECT LINE... 11 Date: 18/06/2013 Version: 1.1 Page 1 / 11

1. Introduction Thank you choosing the Rhetorik Marketer email broadcast service. We use the Traction email platform for broadcasting of HTML and text-based emails. Email design can be finicky given the variety of email software clients available both on the web and installed as desktop software. This guide outlines a number of key requirements and recommendations for designing HTML that are client friendly in today s modern browsers. Following this guide will ensure that your email has a greater chance to appear correctly in the majority of online email reader, software and mobile devices. 2. The Process 3. What we need to set up the Email Broadcast To enable us to set up the email broadcast, we will need you to provide us the following information: A completed email campaign set-up sheet FINAL creative to be used for the email broadcast 3.1 Email campaign set up brief Email Campaign Set up Sheet Date: 18/06/2013 Version: 1.1 Page 2 / 11

Clicking the above link will download a blank email campaign set up brief. Your completed email campaign set-up sheet will help to plan and control all elements of this email campaign. It will also provide a framework for campaign planning and execution and ensure that members involved understand the objectives and their responsibilities. This brief will provide help us by providing the following details: Campaign name From name this is the name you want to communicate in the From field. The From information can be as important as the subject line. As a best practice, the From and Subject line should work in tandem. Reply email address the email address if the recipient hits the reply button Subject line - General rule of thumb in email marketing is to keep your subject line to 50 characters or less. Preferred salutation (i.e. Dear Mr/Ms) Default salutation Volume of emails to be sent out Desired deployment date of email broadcast Seed list for testing - this is the list where we will send test messages for your approval. To ensure the email displays correctly across different email clients, it is best to provide a variety of addresses, e.g. work, hotmail, google etc) Seed list for live broadcast this is the list of emails you would like to be included in the LIVE broadcast Any special instructions 3.2 Final email creative You have a few options to send across the final creative which we can use for this email campaign: 1. A link to the online version where the final HTML creative has been hosted online 2. HTML file of the creative (please refer to guidelines below) o o All images contained within the email will need to be sent separately. Any links to be contained within the email will also need to be provided 3. Text-version of the email, delivered in word or in a text-based file. If links are tracked to individual respondents we will need an.xls file clearly indicating the user ID etc. in order to set this up. Date: 18/06/2013 Version: 1.1 Page 3 / 11

4. Timings Once we have received all the necessary files and images, up to 48 hours are required to produce the broadcast. We will aim to have a test email sent to the seed list 24 hours before the desired dispatch date. Once this had been approved the live email broadcast can be broadcast. Between 24 and 48 hours after the live email broadcast has been dispatched you will be sent a delivery report showing a breakdown of how many people have opened the email and clicked on any links. The delivery report is sent out at this time to allow people to have a chance to look through their emails and read the ones of interest. If you wish to have a second delivery report sent a week after the live broadcast, this is also possible. PS: We do not guarantee a particular open rate as recipients may not wish to open the email, or may be out of the office when the email lands in their inbox. 5. Guidelines for creating the HTML template 5.1 KISS (Keep It Simple, Stupid) Emails are not like complex like website designs; they should be nicely designed, but the most important rule of thumb is to keep things simple. A tried and tested method is to use a header image to attract the reader s attention with clean text following. The simple the design, the easier it will be to code into HTML, and the less chance of any abnormalities happening between various browsers and email clients. With the advent of handheld devices, single-column email design is making a strong come-back, being more suitable for viewing on a device with smaller (less than 480px wide) screens, and being easier to code responsively using media queries. Date: 18/06/2013 Version: 1.1 Page 4 / 11

5.2 Observe Established Digital Visual Standards Whilst you want to look original and stand out from the crowd, it is important to observe standards that recipients are comfortable with, and that are usable, no matter the device they are reading the email on. Neatly lay out content, use consistent link colours, incorporate clear calls to action, and choose images are appropriate to content. Remember that email is designed for screen, and not for print. This means limiting your use of fonts to system fonts for copy (a good reference for these can be found here: http://www.ampsoft.net/webdesign-l/windowsmacfonts.html), and sizes of 10px and up. If you need to use a non-standard font, this will have to be in an image. 5.3 Choosing an email width Given that a fair bit of screen real estate is often already being used by email clients for inbox tools, navigation menus and sometimes ads, a width of 500-600 pixels is recommended. This should ensure your emails fit in the majority of email client viewing panes. The email dimensions will ultimately depend on the email s target market. If your target market is specifically mobile, designing to a smaller pixel width may be more suitable. 5.3.1. Designing flexibly for desktop and mobile For the savvy email designer there are tools available right now that can enable you to build your 600px wide email for desktop clients, and 300px wide email for mobile display, in the one HTML file. This can be done using @media queries, the technical side of which is discussed in point 6.5 of the Code section of this document. This of course means that the email would need to be designed to be flexible, eg: Uses browser text that is free to flow as its container changes size, and that is not reliant on a fixed width layout to look good. Date: 18/06/2013 Version: 1.1 Page 5 / 11

Uses images in such a way that they do not constrain the size of the email, ie: doesn t use a lot of images that are reliant on a fixed width design. Has room to enlarge body text for legibility on small screens, and to enlarge buttons for usability on smart phones. One of the great examples of a good flexible design is this Starbucks Card Rewards email: http://preview.smartfocusdigital.com/go.asp?/mpjsb64f/best001 Resize the browser to see it in action. As soon as the browser dips under 600px wide the email s larger decorative elements are minimised to ensure everything can fit and remain legible on a smaller screen. 5.4 The Fold Keep the message above the fold is a commonly used phrase in newspaper marketing, and now in web and email marketing. The problem is, it s becoming more difficult to establish what the fold is. Depending on the users email client, browser or mobile device, or whether or not they have a preview panel enabled or not these are all factors that affect the so-called fold, and so there is no hard and fast rule. It is advisable that the design s header image or main title sit within about 250pixels of the top of your design. This is the average size that most users have their preview panel set to by default. If you wish to design the header imager larger than this, we recommended that you ensure the design is engaging enough for users to want to scroll to see the rest of the image. 5.5 Use Clear Unsubscribe Links If a subscriber wishes to opt out of an email communication and cannot immediately see the unsubscribe link, it is safe to say they will flag the email as Spam as their next best choice. It also reflects negatively on a business if it appears they are trying to hide the unsubscribe link. Therefore, it is good practice to have a clear and easy to find unsubscribe link, which is offered in the footer of the email as a standard. 6. Code 6.1 Code to the XHTML 1.0 Strict DOCTYPE Many email clients strip out or ignore email DOCTYPES, and some even replace them with their own (see here for more detail on which clients do what: http://www.emailonacid.com/blog/details/c18/doctype_-_the_black_sheep_of_html_email_design). For the broadest compatibility, HTML emails should conform to the XHTML 1.0 Strict DOCTYPE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> This DOCTYPE is used by Gmail and Hotmail, making it great for building (and testing) with. Date: 18/06/2013 Version: 1.1 Page 6 / 11

6.2 Table structure method Most email clients have been left far behind the progression of browsers and modern web standards. For this reason it is important to design emails using the traditional <TABLE> structure and not <DIV> method favoured by modern web design. 6.3 CSS and Inline Styles Old school coding also applies to styling. Modern conveniences such as using CSS (cascading style sheets) to separate appearance from content are far from perfect in email clients. Most will strip out your style sheets, and some even add their own. To combat poor acceptance of these modern web standards, all email styles are written inline. This especially applies to font styles, eg: <span style= font-family:arial,verdana,sans-serif; font-size:11px; color:#000000; > Dear Customer,<br /> Here is a <a href= # style= font-family:arial,verdana,sans-serif; font-size:11px; color:#0099ff; text-decoration:underline; ><span style= color:#0099ff; >link</span></a> to an article. </span> HINT: Wrap an extra span inside anchor tags <a> and re-specify the link colour. This overwrites custom link colours in Gmail and Yahoo! For a comprehensive guide of what CSS is accepted across the major email clients, see here: http://www.campaignmonitor.com/css/ 6.4 Header CSS There is a certain amount of header CSS that can be used to reset, hack, and improve email design using media queries, however some email clients (including Traction) only interpret code between the <body> tags, excluding the <body> tags themselves, so it is advised any styling information and/or CSS is moved after the opening <body> tag to avoid it being completely removed upon upload. eg: <body> <style type= text-css > /* Hotmail: fix backgrounds to show full width */.ExternalClass {width:100%;} </style> <table width= 100% border= 0 cellspacing= 0... Date: 18/06/2013 Version: 1.1 Page 7 / 11

6.5 @media queries Media queries (http://www.w3.org/tr/css3-mediaqueries/) can determine what CSS is served depending on the screen size of a device, making it perfect for implementing mobile-specific styles in an email. Media queries are placed immediately after your normal CSS, and can look a bit like the following: @media only screen and (max-device-width:480px) { } table[class="wrapper"] { padding:15px!important; } td[class="cell"] { padding:20px 30px!important; } span[class="heading"] { font-size:16px!important; } #img { width:300px; height:200px; } As you can see, our mobile-specific styles are wrapped in a media query that says if the device s screen is anywhere up to and including 480 pixels wide, serve this CSS. @media only screen and (max-device-width:480px) {... } 480 pixels is the preferred option for our email platform, as iphone screen have the dimensions 320 x 480 pixels, and it makes sense to make the maximum width that of an iphone flipped horizontally. Anything larger, like an ipad, would handle a 600px email quite comfortably. Inside the query are our mobile-specific styles. We re decreasing the wrapper and cell padding to make the most of our mobile screen space, decreasing the heading size which is much bigger in the desktop version at 24px, and resizing an image so it better fits the narrower design. Note we are using the!important declaration to overwrite any inline styles. In more good news, the @media only screen query is widely supported by Webkit devices, which include iphone, Android and Palm, so this technique has solid support. 6.6 Avoid Background Images on Tables and Cells Background images can be applied to many elements, such as tables and table cells, however some email clients will not display these images regardless of where they are. It is highly recommended that emails are designed in such a way that they can be built without requiring the use of background images, utilising inline images and background colours instead. 6.7 Adding a Background Image This can be achieved across all popular email clients (Outlook 07/10, Hotmail, Gmail, Yahoo!, AOL) using a combination of two background image techniques: 6.7.1. Table Attribute Technique Wrap the entire email in a containing table at 100% width, and apply the background image attribute, like so: Date: 18/06/2013 Version: 1.1 Page 8 / 11

<table width= 100% border= 0 cellspacing= 0 cellpadding= 0 background= img.gif > <tr> <td align= center > Email design and content here. </td> </tr> </table> This will sort out Gmail and Hotmail, but not Outlook 2007 and 2010. 6.7.2. The CSS Technique To cater for the Outlook, add this CSS to the header: body { background-image:url('img.gif'); background-repeat:repeat-y no-repeat; /*Outlook specific bugfix*/ margin:0; padding:0; width:100%!important; } 6.8 Avoid Scripts, iframes, and Advanced Features Many email clients will reject scripts (such as JavaScript), iframes, and advanced features such as Flash files, DHTML, or Java applets. It is best to avoid all features of this kind instead, rely on compelling hyperlinks to your website where you can host this kind of content. 6.9 Use Height and Width Image Attributes Always provide explicit Height and Width attributes for <IMG> elements in HTML emails. This ensures that if a customer views your email but does not download images, the image dimensions are shown correctly. It also prevents Outlook from randomly distorting images. 6.10 Spacer Gifs 1 x 1 pixel spacer gifs are often used for creating custom-sized spacing in emails, although specifying cell widths (which take priority over table widths) is generally considered better practise. Remember to apply display:block; to ensure Outlook and AOL do not enlarge spacer gifs whose dimensions are smaller than 11 pixels. <img src= spacer.gif width= 5 height= 5 style= display:block; alt= /> 6.11 Alt Tags and Image Blockers Alt tags are an oft forgotten important step. Many email clients turn images off by default, so to ensure your email degrades gracefully when images are absent it is important to give all your images alt-tags, eg: Date: 18/06/2013 Version: 1.1 Page 9 / 11

<img src= http://example.com/images/cat.gif alt= Image of cat border= 0 /> If you would like to ensure your reader will receive future emails with images turned on, it is good practice to recommend the reader to add the email sender to the safe senders list. This can be done in the first of text above the header, where you put the link to an online version. 6.12 Special Characters Characters such as and & should be written as their HTML entities, ie: = & = & Any special characters copied from Microsoft Word will come out garbled in at HTML email. There is an online Character Conversion tool here: http://www.emailology.org/#4 6.13 Special Characters in Text Only Emails Text-based emails should not contain special characters at all, such as bullets, fractions (e.g. ½ ), or en and em dashes ( and ). If a text email has been crafted in a word processor, it is preferable to paste the text into a basic editor such as Notepad, and then save as MS-DOS text format. This will strip out all invalid characters however the content will need review to ensure that it still makes sense without them. 7. Text Only and Online Versions Offering a text only version of your email is mandatory for most spam filters. Make sure all of your text is included in the text version, and formatted clearly so readers can scan it just as easily as they could scan the full version of the email, eg: ============================================ HEADING ONE ============================================ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam molestie tristique massa, quis placerat. Sub heading -------------------------------------------- Duis vulputate, dolor vel fringilla hendrerit, metus ante rhoncus enim, et placerat orci quam sit amet orci. Aenean dapibus condimentum. Read more >> Sub heading -------------------------------------------- Nullam dapibus, augue sed placerat eleifend, lacus ipsum iaculis felis, vitae placerat justo felis vel quam. Quisque rutrum luctus lacinia. Mauris gravida eros nec lacus. erat volutpat. Vestibulum porta dui pulvinar ante aliquam placerat. Ut lorem nisl, auctor nec placerat vitae, ultricies Rhetorik Solutions eu nibh. Maecenas molestie lorem et felis Released by: Sales Rhetorik Email commodo campaign consectetur. - Guidelines Author: Bhavesh Negandhi Date: 18/06/2013 Version: 1.1 Page 10 / 11

HINT: Don t forget to add any text included in images into your text only version. It is also industry standard to offer and online version of the email. In the event that the email does not appear correctly (hopefully by following this guide, it will) having a text link that will load a browser version of the email will ensure the recipient can load the email correctly. 8. Multilingual Considerations For languages outside of the Western European character sets (e.g. Asian languages, Russian), it is recommended that all content be encoded in UTF-8 format. 9. Suggested words to avoid in Subject line In order to give your email the best possible chance of arriving in the inbox rather than being assigned to junk mail, there are some words which could be avoided in the subject line of your email. This is by no means a comprehensive list or suggestion but just a guideline. Rhetorik Solutions are not responsible for and cannot guarantee a particular open rate based on any of the content mentioned in this guide. Act now Dear Friend Amazing Discount Anything that looks like you are YELLING Don t delete Apply now Earn As seen Excessive use of exclamation marks (!) Avoid For Only Buy Free Call now Friend Click here Guarantee Collect Loan Compare Offer Contains Opportunity Credit Sale Date: 18/06/2013 Version: 1.1 Page 11 / 11