MCH Strategic Data Best Practices Review
Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2
Creative Best Practices
Subject Lines 4
Subject Lines - Keep your subject line straightforward - Support the content of your email - 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
Pre-Header - Support the content of your email 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 email with images. - Should be positioned in the top left corner of the email so it is viewed above the fold on all devices. 6
The Z-Curve Readers typically read from left to right, top to bottom. However, in email 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 email 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
Desktop Fold A vast majority of email users do not scroll when viewing an email 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 emails) 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
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
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 email - Emails 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
Desktop Rendering 11
Desktop Rendering 12
Mobile Rendering iphone OS - Compresses email to fit screen width (320x490) - Calls-to-action need to be large enough to press - Images not blocked - One column, simple emails - Keep font sizes larger than normal - If email width is 600px body copy should be 16px+ - If email width is 500px body copy should be 14px+ Android - Does not compress your email - Images are not blocked - Shows the first 300x250 of your email - Same font & call-to-action guidelines as iphone - Let people know there s more 13
Responsive Design Email 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
Coding Best Practices
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
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 email CTR by 67% by changing a link to a button. 1 1 MediaPost, 2007 17
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
HTML Coding Do s and Don ts Keep it simple Code for lowest common denominator Do code emails by hand. Don t use the Save as Webpage feature of Microsoft Word. Hire a designer Become familiar with HTML 19
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
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
Example Invisible Text Unsubscribe and Add to Address Book links rendering blue on blue background <a href=http://mysite.com style= color:#ffffff ><font color= #ffffff >Unsubscribe</font></a> 22
Degrade Gracefully Gmail Outlook 2010 If using code that is not universally supported, make sure your design degrades gracefully. 23
Testing Test your design Test to multiple email clients Try turning images off Create a Quality Assurance checklist Implement Peer Review process 24
Takeaways Consider how your email 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 email-friendly campaigns to ensure optimal performance Test, test, test Don t neglect your mobile audience 25
Questions?