MCH Strategic Data Best Practices Review

Transcription

1 MCH Strategic Data Best Practices Review

2 Presenters Alex Bardoff Manager, Creative Services Lindsey McFadden Manager, Campaign Production Services 2

3 Creative Best Practices

4 Subject Lines 4

5 Subject Lines - Keep your subject line straightforward - Support the content of your - Avoid false promises - Know your audience and make it relevant - Avoid: - FREE! - ALL CAPS TEXT - Sexual Terms - Medical Terms - Financial Terms - $$$ Opportunity - Misspellings - Claims Look Younger Make More $$ etc 5

6 Pre-Header - Support the content of your and your subject line. - Gives users a quick-link to content without downloading images. - Should include a link to view in browser, or view the with images. - Should be positioned in the top left corner of the so it is viewed above the fold on all devices. 6

7 The Z-Curve Readers typically read from left to right, top to bottom. However, in a majority of readers are scanning your communications quickly without reading word-for-word. The Z-Curve helps to ensure that while a user is scanning your their eye is moving down the page in the same manner they would if they were reading, but at the same time picking up key information, calls-to-actions, and content. 7

8 Desktop Fold A vast majority of users do not scroll when viewing an unless they are truly engaged. Fold Stats: - Desktop: 500 x 500px - Main message should be visible above the fold. - Content should be strategically placed close to the fold to encourage users to scroll. (especially important on Android). - Include navigation or other links such as a table of contents (for longer s) to give the user content options and further your chances for engagement. - People often click on images, headers, logos, etc make sure that all items that people expect to be clickable are clickable. 8

9 Calls-To-Action - Bullet proof call-to-action buttons - Be obvious in copy and visual of the calls-to-action - Tell the user what to do and what they should expect next - Include an arrow or icon that is text based instead of image based - People often click on images, headers, logos, etc make sure that all items that people expect to be clickable are clickable. 9

10 Balance of Image & HTML Text - Use HTML Text for text whenever you can (doesn t mean it has to be boring) - Seamlessly integrate text and imagery to enhance the appeal of the - s that are mostly image based will increase your spam score and no one will see your content with images turned off. - Calls-to-action should be bullet-proof and main content should always be rendered in HTML Text. - Use ALT tags on all images 10

11 Desktop Rendering 11

12 Desktop Rendering 12

13 Mobile Rendering iphone OS - Compresses to fit screen width (320x490) - Calls-to-action need to be large enough to press - Images not blocked - One column, simple s - Keep font sizes larger than normal - If width is 600px body copy should be 16px+ - If width is 500px body copy should be 14px+ Android - Does not compress your - Images are not blocked - Shows the first 300x250 of your - Same font & call-to-action guidelines as iphone - Let people know there s more 13

14 Responsive Design template that is designed and coded to react and respond to the device that the communication is being viewed on to create an optimized experience for all users. - There are limitations - It doesn t work on all browsers, devices and operating systems. - Understand the technology fully before moving forward - Plan, Plan, Plan 14

15 Coding Best Practices

16 Working with Images No Background Images they are not supported in Outlook 2007 and above. Don t use images for important content such as headlines, links, or calls-to-action. Use alt text for your images another way to entice subscribers to download images. Use image widths & heights to maintain basic structure when images are turned off. Include border= 0 on all clickable images. Optimize image file sizes. Avoid Image maps. 16

17 Bulletproof Buttons Bulletproof button button designed and coded using HTML and text so it renders even when images are suppressed. A large technology vendor boosted CTR by 67% by changing a link to a button. 1 1 MediaPost,

18 Gmail Glitch Gmail glitch fix fixes white gap between adjacent images. <img src= your image width= 10 height= 10 border= 0 style= display:block /> 18

19 HTML Coding Do s and Don ts Keep it simple Code for lowest common denominator Do code s by hand. Don t use the Save as Webpage feature of Microsoft Word. Hire a designer Become familiar with HTML 19

20 HTML Coding Do s and Don ts Do code with tables. Do use inline CSS (when necessary) never embedded stylesheets. Don t use Javascript or other dynamic scripts. Don t use body attributes many editors and mail clients will strip or ignore the <BODY> tag. Avoid invisible text 20

21 CSS Support Inline styles that are widely supported: Font, font-family, font-size, font-weight, font-style Text-align, line-height, text-decoration, text-indent Color, background-color Border Height, width Inline styles to avoid: Padding Margin Float 21

22 Example Invisible Text Unsubscribe and Add to Address Book links rendering blue on blue background <a href= style= color:#ffffff ><font color= #ffffff >Unsubscribe</font></a> 22

23 Degrade Gracefully Gmail Outlook 2010 If using code that is not universally supported, make sure your design degrades gracefully. 23

24 Testing Test your design Test to multiple clients Try turning images off Create a Quality Assurance checklist Implement Peer Review process 24

25 Takeaways Consider how your is going to look in the users inbox Utilizing best practices doesn t mean it has to be boring Engage your audience from subject line to click-through Invest the time and effort into coding -friendly campaigns to ensure optimal performance Test, test, test Don t neglect your mobile audience 25

26 Questions?