Rhetorik campaign - Guidelines

Transcription

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

2 Table of contents 1. INTRODUCTION THE PROCESS WHAT WE NEED TO SET UP THE BROADCAST campaign set up brief Final creative TIMINGS GUIDELINES FOR CREATING THE HTML TEMPLATE KISS (Keep It Simple, Stupid) Observe Established Digital Visual Standards Choosing an width Designing flexibly for desktop and mobile The Fold Use Clear Unsubscribe Links CODE Code to the XHTML 1.0 Strict DOCTYPE Table structure method CSS and Inline Styles Header CSS... 7 queries Avoid Background Images on Tables and Cells Adding a Background Image Table Attribute Technique The CSS Technique Avoid Scripts, iframes, and Advanced Features Use Height and Width Image Attributes Spacer Gifs Alt Tags and Image Blockers Special Characters Special Characters in Text Only s TEXT ONLY AND ONLINE VERSIONS MULTILINGUAL CONSIDERATIONS SUGGESTED WORDS TO AVOID IN SUBJECT LINE Date: 18/06/2013 Version: 1.1 Page 1 / 11

3 1. Introduction Thank you choosing the Rhetorik Marketer broadcast service. We use the Traction platform for broadcasting of HTML and text-based s. design can be finicky given the variety of 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 has a greater chance to appear correctly in the majority of online reader, software and mobile devices. 2. The Process 3. What we need to set up the Broadcast To enable us to set up the broadcast, we will need you to provide us the following information: A completed campaign set-up sheet FINAL creative to be used for the broadcast 3.1 campaign set up brief Campaign Set up Sheet Date: 18/06/2013 Version: 1.1 Page 2 / 11

4 Clicking the above link will download a blank campaign set up brief. Your completed campaign set-up sheet will help to plan and control all elements of this 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 address the address if the recipient hits the reply button Subject line - General rule of thumb in marketing is to keep your subject line to 50 characters or less. Preferred salutation (i.e. Dear Mr/Ms) Default salutation Volume of s to be sent out Desired deployment date of broadcast Seed list for testing - this is the list where we will send test messages for your approval. To ensure the displays correctly across different 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 s you would like to be included in the LIVE broadcast Any special instructions 3.2 Final creative You have a few options to send across the final creative which we can use for this 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 will need to be sent separately. Any links to be contained within the will also need to be provided 3. Text-version of the , 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

5 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 sent to the seed list 24 hours before the desired dispatch date. Once this had been approved the live broadcast can be broadcast. Between 24 and 48 hours after the live broadcast has been dispatched you will be sent a delivery report showing a breakdown of how many people have opened the 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 s 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 , or may be out of the office when the lands in their inbox. 5. Guidelines for creating the HTML template 5.1 KISS (Keep It Simple, Stupid) s 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 clients. With the advent of handheld devices, single-column 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

6 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 on. Neatly lay out content, use consistent link colours, incorporate clear calls to action, and choose images are appropriate to content. Remember that 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: 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 width Given that a fair bit of screen real estate is often already being used by clients for inbox tools, navigation menus and sometimes ads, a width of pixels is recommended. This should ensure your s fit in the majority of client viewing panes. The dimensions will ultimately depend on the s target market. If your target market is specifically mobile, designing to a smaller pixel width may be more suitable Designing flexibly for desktop and mobile For the savvy designer there are tools available right now that can enable you to build your 600px wide for desktop clients, and 300px wide for mobile display, in the one HTML file. This can be done 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 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

7 Uses images in such a way that they do not constrain the size of the , 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 Resize the browser to see it in action. As soon as the browser dips under 600px wide the 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 marketing. The problem is, it s becoming more difficult to establish what the fold is. Depending on the users 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 communication and cannot immediately see the unsubscribe link, it is safe to say they will flag the 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 as a standard. 6. Code 6.1 Code to the XHTML 1.0 Strict DOCTYPE Many clients strip out or ignore DOCTYPES, and some even replace them with their own (see here for more detail on which clients do what: For the broadest compatibility, HTML s should conform to the XHTML 1.0 Strict DOCTYPE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " 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

8 6.2 Table structure method Most clients have been left far behind the progression of browsers and modern web standards. For this reason it is important to design s 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 clients. Most will strip out your style sheets, and some even add their own. To combat poor acceptance of these modern web standards, all 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 clients, see here: Header CSS There is a certain amount of header CSS that can be used to reset, hack, and improve design using media queries, however some 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

9 queries Media queries ( can determine what CSS is served depending on the screen size of a device, making it perfect for implementing mobile-specific styles in an . Media queries are placed immediately after your normal CSS, and can look a bit like the 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 only screen and (max-device-width:480px) {... } 480 pixels is the preferred option for our 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 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, 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 clients will not display these images regardless of where they are. It is highly recommended that s 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 clients (Outlook 07/10, Hotmail, Gmail, Yahoo!, AOL) using a combination of two background image techniques: Table Attribute Technique Wrap the entire 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

10 <table width= 100% border= 0 cellspacing= 0 cellpadding= 0 background= img.gif > <tr> <td align= center > design and content here. </td> </tr> </table> This will sort out Gmail and Hotmail, but not Outlook 2007 and 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 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 s. This ensures that if a customer views your but does not download images, the image dimensions are shown correctly. It also prevents Outlook from randomly distorting images Spacer Gifs 1 x 1 pixel spacer gifs are often used for creating custom-sized spacing in s, 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 clients turn images off by default, so to ensure your 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

11 <img src= alt= Image of cat border= 0 /> If you would like to ensure your reader will receive future s with images turned on, it is good practice to recommend the reader to add the 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 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 . There is an online Character Conversion tool here: Special Characters in Text Only s Text-based s should not contain special characters at all, such as bullets, fractions (e.g. ½ ), or en and em dashes ( and ). If a text 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 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 , 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 commodo campaign consectetur. - Guidelines Author: Bhavesh Negandhi Date: 18/06/2013 Version: 1.1 Page 10 / 11

12 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 . In the event that the does not appear correctly (hopefully by following this guide, it will) having a text link that will load a browser version of the will ensure the recipient can load the 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 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 . 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