MARKETING CREATIVE BEST PRACTICES AND TECHNIQUES

Transcription

1 SM MARKETING CREATIVE BEST PRACTICES AND TECHNIQUES 29 Broadway New York, NY PH: SM

2 2 Recommedatio Summary...pg. 3 Itroductio...pg. 4 Formattig Recommedatios Techical: JavaScript... pg. 5 Forms... pg. 5 Backgroud Tags ad Colors...pg. 5 Troubleshootig HTML...pg. 5 Header Tags...pg. 6 Rowspas ad Colspas... pg. 6 Alt Tags... pg. 6 Creative: Preview Pae... pg. 7 Above-the-Fold... pg. 7 Call-to-Actio...pg. 7 File Size ad Physical Dimesios... pg. 7 Stylesheets... pg. 8 Navigatio...pg. 8 Image Usage...pg. 8 Cliet Deliverability: Gmail...pg. 9 Yahoo!...pg. 9 Hotmail... pg. 10 Lotus Notes...pg. 10 AOL... pg. 10 Outlook...pg. 11 Deliverability Summary...pg. 11 Text Guidelies: Look ad Feel... pg. 12 Width ad Legth of Text s...pg. 12 URLS...pg. 12 Importig Text Cotet from Microsoft Word...pg Broadway New York, NY PH: ifo@cheetahmail.com SM

3 3 Techical: Creative: Iboxes will accept up to 100k creative should be o wider tha 700 pixels Oly ilie stylesheets, or regular HTML should be used to format text Do ot use JavaScript sice most cliets will ot accept it Forms are ot recommeded, but ca be used if the mailig does t iclude AOL or Hotmail users. Eve the, the form should be very basic ad ot employ JavaScript Creative ca be coded usig colspas, but CheetahMail recommeds usig a stacked table structure sice it is more stable across all cliets Oly Outlook ca except a Flash , so do ot use it across all cliets All featured creative, ad cotet that has a high priority, should appear i MS Outlook s Preview Pae area. The average measuremet for this area is 300 pixels Featured cotet should also appear Above-the-Fold whe usig a web-based cliet like Gmail ad Yahoo!. The average measuremet for this area is 420 pixels i height Cosider creatig a secod versio of your for Gmail users with a text ad or two o the right side of the creative. This will combat the automatically geerated competitor ads that Gmail populates to the right of the iterface If there are ads i the , ru them dow the left side of the with the textual cotet to the right. Due to how the user s eye aturally travels aroud the page, this type of layout has bee prove to maximize iteractio rates Make sure that the featured cotet i your exists i HTML text, ot oly images. With Gmail ad other cliets that do t display images by default, the user wo t be able to iitially see ay cotet that s i a image uless they opt to tur the images o 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

4 4 The creative of your is as importat as the offer you preset to your subscribers. A strog desig will help esure delivery, grab the user s attetio ad ecourage him/her to act. I additio, itegratig the visually with the rest of your olie ad offlie properties will reiforce your brad with the user, which will make them feel more comfortable clickig ad iteractig with it. desig pricipals are sigificatly differet from those of web page or prit desig. Although all may have similar goals, desigers must take ito accout other factors such as cliet ad browser limitatios, optimizig for the preview pae ad call-to-actio placemet - just to ame a few. Testig has show that strictly adherig to these best practices does t guaratee to raise click through ad ope rates. It will oly esure your creative is compliat for ISP/ cliet delivery ad browser rederig. 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

5 5 Techical: JavaScript: Javascript is supported by all web browsers, but ot all cliets. Sice this is the case, it is recommeded that JS is ot used so that the is uiversally accepted. Forms: Forms may be used i s as log as they do t iclude JavaScript fuctioality ad are t mailed to AOL or Hotmail users sice they do t support form fuctioality. CheetahMail ca assist you with segmetig these services. Backgroud Tags ad Colors: Backgroud tags are stripped by some browsers ad cliets, such as AOL ad Netscape. If the creative calls for a backgroud image, CheetahMail recommeds estig it i a table withi the body stretched to 100%. Defie the backgroud color default to white (<BODY BGCOLOR=#FFFFFF>). While most cliets have a white backgroud default, others - such as WebTV- use grey or eve black. For example, failure to use a white backgroud may produce e.g. black text o a black backgroud. Troubleshootig the HTML: Always check your code o both Netscape ad IE, as well as o both the PC ad MAC platforms. Make sure to close all HTML tags as leavig off </td>, </tr>, </table>, </body>, </HTML> tags are the root of most HTML problems. These errors will cause cliets ad browsers to read your differetly. What might look perfect i Iteret Explorer may look vastly differet o Netscape.As a rule of thumb, Netscape is stricter tha IE. Additioally, a missig sectio is usually due to a missig </table> tag. Icorrect aligmet betwee sectios is ofte due to a missig <table> or <tr> tag. CheetahMail recommeds that a closed </TD> tag be brought up to the precedig lie - ot left o its ow. Otherwise, it ca add extra uwated space. Also, be aware of browser limitatios ad use uiversally supported HTML tags rather tha tags that are Iteret Explorer or Netscape Navigator specific. Always iclude both height ad width tags to specify image sizes as well as table cell dimesios. 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

6 6 Header Tags: Avoid the use of ay header tags (ay tag above <body>), as web-based systems, such as Hotmail ad Yahoo!, replace all header tags with their ow HTML code.this icludes usig header stylesheets also. Avoid: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Trasitioal//EN"> <html> <head> <title></title> </head> <body bgcolor="#ffffff"> Istead Use: <html> <body bgcolor="#ffffff"> Rowspas ad Colspas: Avoid the use of rowspas whe codig your HTML . They will ot be displayed correctly i several cliets, icludig: Lotus Notes,AOL, ad Hotmail. Use colspas oly, or ested tables istead. ALT Tags: Addig a ALT tag to your image tags will esure that if, by chace, ay images are broke whe a subscriber receives your , your subscriber will have a idea of what is missig. ALT tags also satisfy accessibility issues, coform to W3C HTML 4.01 specs, ad allow the disabled to read ad receive their s. ALT Tag Example: <IMG SRC=" ALT="This image is of the foototes for this page." border="0"> 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

7 7 Creative: Preview Pae Area: Outlook's preview pae widow is a commoly overlooked elemet i desigs. The desiger oly has, at the most, 300 pixels of height to preset the 's mai cotet ad avigatio to a Outlook user. I this case, sice the user does't have to ope the to preview its cotet, this sectio should commuicate the mai message of the quickly ad efficietly. TECHNICAL NOTE: Whe layig s out usig Photoshop ad Illustrator, it's always useful to set guides at 300 ad 420 pixels to map out where the preview pae ad "Above-the-Fold" areas are. Above-the-Fold Area: The area that appears above the browser's bottom widow bar is called the "Above-the-Fold" area. This is especially importat for browser-based cliets such as Hotmail ad Yahoo!. The "Above-the-Fold" sectio o a 17" moitor with a resolutio of 800 x 600 is 420 pixels i height. I most cases, these extra 120 pixels of space are used for cotet that supports the preview pae area desig. It is importat to ote that this area should be visually egagig as well, sice this is the first thig Hotmail ad Yahoo! users will see whe they ope the . TECHNICAL NOTE: Whe layig out the "Above-the-Fold" sectio, the recommeded guide is set at 420 pixels of vertical space. Calls-to-Actio (CTA): CTA phrases like "Click here to " or Read more... let the user kow what they ca click o ad what cotet will be behid the lik. CTAs aid users i makig cotet ad avigatio decisios ad geerally guide them aroud the desig. Break the phrases out visually usig a heavier fot weight or slightly differet color. Geerally, the more elemets that are apparet to the user, the better off they'll be whe visually scaig the page's cotet. File Size ad Physical Dimesios: CheetahMail recommeds that a HTML s width does ot exceed 700 pixels. This will leave ample room for elemets like Hotmail ad Outlook s avigatio bars. Aythig wider will push some of the s cotet off the user s scree ad force him/her to scroll horizotally to ucover it. s should carry a file size of o more tha 100k. I geeral, it takes 2 secods to dowload 10k o a 56k modem (this is o the safe side). So a 30k will be dowloaded i 6 secods ad a 60k 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

8 8 i 12 secods. Of course, the smaller the file is, the quicker it will load, but aythig uder 100k will be received by the ibox without beig filtered. Stylesheets: CheetahMail recommeds usig ilie stylesheets to format text.you ca also use regular HTML to cotrol how text i the desig looks. Here's a example of a ilie stylesheet: <fot style="fot-family:verdaa,arial,helvetica; fot-color=#000000; fot-size=12pt"> Navigatio: It is very importat to give the user complete cotrol of how they view the s cotet ad iteract with its avigatio. For s that have a lot of cotet, CheetahMail recommeds usig same-page avigatio. This will allow users to jump right to the cotet they wat to read ad will ot make them scroll dow the to ucover it. I additio, provide some alterate avigatio i the for the user who does t fid the cotet iterestig. This avigatio could be i the form of exteral liks to a website or a Flash presetatio. The more optios the user has, the better. Image Usage: Never have importat cotet appear oly i a image. If that image fails to load, the mai message of the will be lost. This is importat sice more ad more cliets, like Gmail, wo t display images i a uless the user takes actio to do so. Also, avoid spaces i your HTML code betwee a <img> tag ad </td> tag. Some browsers will read this space as a actual space i the overall layout which ca lead to cracked graphics. Your code should look like this: <img src="src.gif"></td> ot: <img src="src.gif"> </td> 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

9 9 CheetahMail coducted a test across major cliets to gai a defiitive uderstadig of what costraits each were placig o the creative efforts of permissio-based seders. We developed various s based o differet creative ad codig techiques ragig from Flash, to stylesheets, the deployed them to these major cliets. Below is a detailed accoutig of the results. Gmail Yahoo!: Flash does ot work ad caot be loaded We recommed you speak with your Accout Maager prior to sedig a mailig usig Flash. Backgroud images ca be used as log as user clicks to view images Mailigs usig colspas AND rowspas redered correctly EXCEPT i PC IE Mailigs usig ONLY colspas redered correctly Simple forms like a poll, or ZIP code search submit their values correctly as log as there's a script o the mai site that will parse the iformatio, ad o javascript is used Javascript does't work ad should ot be used s with a file size of 100k will make it to the ibox Stylesheets used i the header area of the HTML documet WON T work Ilie stylesheets reder correctly iside the body of the HTML documet, but a style should be made for the liks i the so that they do't default to Gmail s lik style HTML etities (& for &) work correctly i both their text ad umerical forms HTML desigs ca have a 700 pixel width, ad still be visible o a 17-ich moitor Flash does ot work ad caot be loaded We recommed you speak with your Accout Maager prior to sedig a mailig usig Flash. Mailigs usig colspas AND rowspas redered correctly EXCEPT i PC IE Simple forms like a poll, or ZIP code search submit their values correctly as log as there's a script o the mai site that will parse the iformatio, ad o javascript is used Javascript does't work ad should ot be used s with a file size of 100k will make it to the ibox Stylesheets used i the header area of the HTML documet WILL work Ilie stylesheets reder correctly iside the body of the HTML documet, but a style should be made for the liks i the so that they do't default to Yahoo!'s lik style HTML etities (& for &) work correctly i both their text ad umerical forms HTML desigs ca have a 700 pixel width, ad still be visible o a 17-ich moitor 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

10 10 Hotmail: Flash does ot work ad caot be loaded We recommed you speak with your Accout Maager prior to sedig a mailig usig Flash Backgroud images ca be used as log as user clicks to view images Mailigs usig colspas AND rowspas redered correctly EXCEPT i PC IE Mailigs usig ONLY colspas redered correctly Forms do ot work ad will ot submit their results Javascript does't work ad should ot be used s with a file size of 100k will make it to the ibox Stylesheets used i the header area of the HTML documet wo't work sice Hotmail's stylesheet overwrites the etire head tag Ilie stylesheets reder correctly iside the body of the HTML documet, but a style should be made for the liks i the so that they do't default to Hotmail's lik style HTML etities (& for &) work correctly i both their text ad umerical forms HTML desigs ca have a 700 pixel width, ad still be visible o a 17-ich moitor Lotus Notes: AOL: Flash does ot work ad caot be loaded We recommed you speak with your Accout Maager prior to sedig a mailig usig Flash Usig too may images or images that are too large ca cause them to be miscofigured Lotus Notes does ot support forms Lotus Notes strips out JavaScript (may vary by versio) Lotus Notes strips out stylesheets (may vary by versio) Mailigs usig colspas AND rowspas do ot reder correctly Flash does ot work ad caot be loaded We recommed you speak with your Accout Maager prior to sedig a mailig usig Flash Backgroud images ca be used as log as user clicks to view images, except i MAC IE Mailigs usig colspas AND rowspas reder correctly Mailigs usig ONLY colspas will reder correctly Simple forms like a poll, or ZIP code search submit their values correctly as log as there's a script o the mai site that will parse the iformatio, ad o javascript is used Javascript does't work ad should ot be used s with a file size of 100k will make it to the ibox Stylesheets used i the header area of the HTML documet wo't work Ilie stylesheets reder correctly iside the body of the HTML documet HTML etities (& for &) work correctly i both their text ad umerical forms HTML desigs ca have a 700 pixel width, ad still be visible o a 17-ich moitor except o MAC IE ad PC Netscape 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

11 11 Outlook: Flash will work, but the user will eed to activate their "Active X" cotrols i the optios meu Backgroud images ca be used as log as user clicks to view images Mailigs usig colspas AND rowspas reder correctly Mailigs usig ONLY colspas will reder correctly Javascript does't work ad should ot be used Simple forms like a poll, or ZIP code search submit their values correctly as log as there's a script o the mai site that will parse the iformatio, ad o javascript is used s with a file size of 100k will make it to the ibox Stylesheets used i the header area of the HTML documet work properly Ilie stylesheets reder correctly iside the body of the HTML documet HTML etities (& for &) work correctly i both their text ad umerical forms HTML desigs ca have a 700 pixel width, ad still be visible o a 17-ich moitor Deliverability Summary: Flash oly works i Outlook with the Active X feature tured o s ca ow have a width of 700 pixels ad still be fully visible o a 17-ich moitor Javascript does ot work ad should ot be used withi a HTML ca have a maximum file size of 100k ad still make it to the ibox Ilie stylesheets work across all major ESPs HTML etities (& for &) work correctly i both their text ad umerical forms Mailigs usig oly colspas reder correctly Simple forms like a poll, or ZIP code search submit their values correctly across all ESPs except Hotmail ad Lotus Notes 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

12 12 Look & Feel: With text s, desigers have very little cotrol over the look ad feel of the . This icludes eve the most basic elemets of style such as: fot type, fot color, boldig, italics, ceterig, etc. There are a umber of ways you ca spruce up your text , they iclude utilizig: - Space - Lies - Special characters - Capital letters Width & Legth of Text s: The width of text s should ot exceed a optimal width of 70 characters. There are o restrictios to the legth of text s; however, the loger the , the more likely ay iformatio towards the bottom will be igored. The more importat the message, the higher it should be placed i the . URLs: Log URLs will ofte break i text s. Whe URLs break, they may ot work. It is always a good idea to keep the legth of URLs moderate. Importig Text Cotet from MS Word: Importig text cotet from Microsoft Word ca lead to a few mior problems all stemmig from Microsoft Word's o-ascii characters. While they may appear okay i Iteret Explorer, Netscape users will see strage letters. For example: MS Word & IE: Netscape: "Free" Moey - Just Click Here! 0Free0 Moey 0 Just Click Here0! Be especially careful with apostrophes, double quotes ad dashes! With its default setup, MS Word will replace apostrophes ad double quotes with special characters ot supported by may cliets. Dashes, whe surrouded by spaces, will be replaced by a "m-dash" which is a special character. Be extra careful with dashes/hyphes iside URLs. I some cases you ca avoid the special character 29 Broadway New York, NY PH: ifo@cheetahmail.com SM

13 13 problem by stayig away from the INSERT SYMBOL tool, however there are exceptios. Below is a listig of commoly used o-ascii characters: >Ellipsis: >M-Dash: - >Stylized Double Quotes: " >Stylized Sigle Quotes: ' >Bullets:?,?, etc. Always put hard returs after every lie of your text copy. Failure to use hard returs may cause users to see extremely log lies. This also allows YOU to cotrol formattig, rather tha leavig it up to the recipiets' programs. Lies that do ot exceed 70 characters will display correctly i virtually all text-mode programs. TECHNICAL NOTE: CheetahMail recommeds usig a text editor like otepad or wordpad whe creatig text for Broadway New York, NY PH: ifo@cheetahmail.com SM

14 Questios? CheetahMail strives to keep our cliets well iformed, so if you have ay questios o how to improve your creative, or would like to provide us with feedback, please cotact your accout maager or call us at (212) You ca also us at ifo@cheetahmail.com. SM 29 Broadway New York, NY PH: ifo@cheetahmail.com SM