1. HTML FOR EMAILTechnical Tips and TricksDeveloping Emails

2. HTML FOR EMAIL: GENERAL RECOMMENDATIONS HTML for email is different than HTML for the web! Modern web design utilizes CSS (cascading style sheets) for layout. However, due to inconsistent CSS support, HTML tables must be used for email layout. CODE LIKE IT’S 1999! No standards exist for displaying HTML in email. Proper syntax still counts – use a validator to check for general errors. Make sure all open tags have a properly nested closing tag. Specify accurate table and cell widths. Improper math can cause major layout problems. Images & other elements should each reside in their own table cell. Specify desired alignments (left, right, top, bottom). If unspecified, not all email clients will default to the same alignment.

4. About half of email clients either disable forms or display a warning message about the form, leading to a poor user experience

5. Alternate Options

6. Link to a survey / form hosted on an external landing page

7. Provide a link near the form that allows subscribers to view the email in their browser

9. Supported ways to use multimedia with email

10. Use a still image to link to a video hosted on a landing page

11. Use an animated .gif (see below)

13. Poor image quality and potential for large file size

14. No audio or playback controls

17. Background images will not display in Outlook 2007 and Lotus Notes, regardless of the method of application

19. Many of the coding techniques used in HTML editors will lead to display issues in email clients - Microsoft Word, for example, will add proprietary code that will not display properly

20. To achieve the best results use a plain text editor such as Notepad or TextEdit

21. Other options available for download include:

22. Windows - E Text Editor, Notepad++

23. Mac – TextMate, Coda

24. Windows/Mac/Linux - Komodo EditImage Editors Windows/Mac – Photoshop, GIMP, photoshop.com

26. Avoid using CSS margins – use CSS padding or spacer .gifs to create spacing between elements.

27. Forms do not work in Outlook 2007.

28. Outlook 2007 is very particular. Specify accurate table widths – errors in math will cause incorrect display.

29. Outlook 2007 is very particular. Specify accurate colspans and rowspans – extra values creates extra spaces.

30. Only the first frame of an animated .gif will display, so make it count.

32. Notes only supports nesting 8 tables deep

33. Specify defined widths wherever possible – avoid using 100% widths

34. Use spacer .gifs for all padding

35. Only use CSS for text formatting – font-family, size, color

36. Eliminate colspans and rowspans – use nested tables instead to isolate elements

39. Issues exist with left/right CSS borders, use spacer .gifs or CSS padding instead.

40. Avoid the background-image CSS property – use the HTML background attribute instead.

41. Gmail Themes overwrite default link colors – always specify desired link colors.

43. EXACTTARGET DESIGN RESOURCES Design Tipsfor Outlook 2007 Email MarketingDesign & Rendering: The New Essentials Email Design Checklist Visit ExactTarget.com To Download These Resources Email Designfor Lotus Notes CareerBuilder.com Case Study

44. EXACTTARGET DESIGN RESOURCES Design Team Blog New posts weekly! blog.exacttarget.com MarketingExperiments Maximize Agency ROIthrough testing Design Team Tweets @ETDesign twitter.com/etdesign

45. DESIGN SERVICES

46. EXACTTARGET DESIGN SERVICES Performance & Design Assessment Strategic Newsletter Design Design Best Practices Training Program-Specific Template Design Branded Template Build Custom Design Packages Visit ExactTarget.com for more info!

47. THANK YOU!