HTML FOR EMAILTechnical Tips and TricksDeveloping Emails<br />
HTML FOR EMAIL: GENERAL RECOMMENDATIONS<br />HTML for email is different than HTML for the web!<br />Modern web design uti...
What elements are supported in email?<br />HTML Forms<br /><ul><li>Used for surveys, search wizards, drop-down boxes, etc.
About half of email clients either disable forms or display a warning message about the form, leading to a poor user exper...
Alternate Options
Link to a survey / form hosted on an external landing page
Provide a link near the form that allows subscribers to view the email in their browser
Use images to create a simple survey and pull results from click tracking</li></li></ul><li>What elements are supported in...
Supported ways to use multimedia with email
Use a still image to link to a video hosted on a landing page
Use an animated .gif (see below)
Certified Video from Goodmail(currently only supported in AOL; higher production and delivery costs) </li></ul>Animated .g...
Poor image quality and potential for large file size
No audio or playback controls
Use caution in Outlook 2007 – only the 1st frame will display, so make sure the 1st frame conveys your message. Include a ...
Upcoming SlideShare
Loading in...5
×

Html For Email - Technical Tips and Tricks Developing Emails

8,031

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
8,031
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
83
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • 1. Introduce presenters + attendees2. Overview of what we’ll cover.Overview of HTML vs. CSSCode for email not the same as code for webHTML is a markup language that is universally CSS is a style sheet whose form is separated from its contentPut yourself in the customer’s shoes when talking to them – the beautiful, efficient world of building websites with CSS doesn’t apply here.W3C puts together rough standards. These standards don’t exist for email.Proper syntax still counts – opening and closing tags
  • :56
  • :53Brief overview.Images link to the video
  • :58Towards the top of the HTML, a red flag would be “script”Visual for white on white background. Gmail: repeat x and y support: vertical repeats keep repeating no matter what?OUTLOOK 2007 Validator available.
  • :23Haha! Apparently Dreamweaver 4 (not CS4…just 4) writes decent codeCan be obtained by mugging a dinosaur
  • :25
  • :26
  • :27When to come to design for help, ideas, etc?
  • How our expertise in performance-driven design increased conversions by 88%
  • Html For Email - Technical Tips and Tricks Developing Emails

    1. 1. HTML FOR EMAILTechnical Tips and TricksDeveloping Emails<br />
    2. 2. HTML FOR EMAIL: GENERAL RECOMMENDATIONS<br />HTML for email is different than HTML for the web!<br />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!<br />No standards exist for displaying HTML in email.<br />Proper syntax still counts – use a validator to check for general errors.<br />Make sure all open tags have a properly nested closing tag.<br />Specify accurate table and cell widths. Improper math can cause major layout problems.<br />Images & other elements should each reside in their own table cell.<br />Specify desired alignments (left, right, top, bottom). If unspecified, not all email clients will default to the same alignment.<br />
    3. 3. What elements are supported in email?<br />HTML Forms<br /><ul><li>Used for surveys, search wizards, drop-down boxes, etc.
    4. 4. About half of email clients either disable forms or display a warning message about the form, leading to a poor user experience
    5. 5. Alternate Options
    6. 6. Link to a survey / form hosted on an external landing page
    7. 7. Provide a link near the form that allows subscribers to view the email in their browser
    8. 8. Use images to create a simple survey and pull results from click tracking</li></li></ul><li>What elements are supported in email?<br />Video and Flash<br /><ul><li>Embedding Flash or video in an email can cause deliverability issues, and if delivered, video will be disabled in almost every email client.
    9. 9. Supported ways to use multimedia with email
    10. 10. Use a still image to link to a video hosted on a landing page
    11. 11. Use an animated .gif (see below)
    12. 12. Certified Video from Goodmail(currently only supported in AOL; higher production and delivery costs) </li></ul>Animated .gifs<br /><ul><li>Supported in most email clients
    13. 13. Poor image quality and potential for large file size
    14. 14. No audio or playback controls
    15. 15. Use caution in Outlook 2007 – only the 1st frame will display, so make sure the 1st frame conveys your message. Include a play button on 1st frame and link the .gif.</li></li></ul><li>What elements are supported in email?<br />JavaScript<br /><ul><li>Not supported in any email clients
    16. 16. Can cause emails to end up in the junk/spam folder</li></ul>Background Images<br /><ul><li>Background images should be added using the HTML background attribute
    17. 17. Background images will not display in Outlook 2007 and Lotus Notes, regardless of the method of application
    18. 18. Text over a background image must be readable on the background color - background images are not supported in all clients and images may be turned off.</li></li></ul><li>TOOLS FOR CREATING HTML<br />HTML Editors<br /><ul><li>HTML editors such as Dreamweaver, Microsoft Office SharePoint Designer, etc. are designed with web coding in mind, not email.
    19. 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. 20. To achieve the best results use a plain text editor such as Notepad or TextEdit
    21. 21. Other options available for download include:
    22. 22. Windows - E Text Editor, Notepad++
    23. 23. Mac – TextMate, Coda
    24. 24. Windows/Mac/Linux - Komodo Edit</li></ul>Image Editors<br />Windows/Mac – Photoshop, GIMP, photoshop.com<br />
    25. 25. OUTLOOK 2007 <br /><ul><li>Avoid Background Images – include them only as secondary elements.
    26. 26. Avoid using CSS margins – use CSS padding or spacer .gifs to create spacing between elements.
    27. 27. Forms do not work in Outlook 2007.
    28. 28. Outlook 2007 is very particular. Specify accurate table widths – errors in math will cause incorrect display.
    29. 29. Outlook 2007 is very particular. Specify accurate colspans and rowspans – extra values creates extra spaces.
    30. 30. Only the first frame of an animated .gif will display, so make it count.
    31. 31. Only in Outlook 2007: CSS padding applied to the top or bottom on one cell in a multi-column layout will be applied to all columns in that row<table border=“0” cellpadding=“0” cellspacing=“0” width=“100%”> <tr> <td style=“padding-top: 10px;”>Left Column</td> <td>Right Column</td> <!-- The right column will ALSO have 10px of padding-top in Outlook 2007 --> </tr></table></li></li></ul><li>LOTUS NOTES & HOTMAIL<br />Lotus Notes<br /><ul><li>Since Notes is very challenging to code for, make sure Notes users make up a significant portion of your audience before reconfiguring your code specifically for this environment.
    32. 32. Notes only supports nesting 8 tables deep
    33. 33. Specify defined widths wherever possible – avoid using 100% widths
    34. 34. Use spacer .gifs for all padding
    35. 35. Only use CSS for text formatting – font-family, size, color
    36. 36. Eliminate colspans and rowspans – use nested tables instead to isolate elements
    37. 37. New versions of Lotus Notes (such as version 8) provide HTML support much more consistent with other email clients</li></ul>Hotmail<br /><ul><li>Avoid the background-image CSS property – use the HTML background attribute instead
    38. 38. To remove the extra white space that appears below images in Firefox include style=“display: block;” in image tags</li></li></ul><li>GMAIL & YAHOO<br />Gmail<br /><ul><li>Avoid embedded CSS. Gmail will strip out embedded CSS, so use inline CSS instead.
    39. 39. Issues exist with left/right CSS borders, use spacer .gifs or CSS padding instead.
    40. 40. Avoid the background-image CSS property – use the HTML background attribute instead.
    41. 41. Gmail Themes overwrite default link colors – always specify desired link colors.
    42. 42. Don’t forget closing tags. Gmail is very particular about syntax, and the layout will suffer greatly if they are missing.</li></ul>Yahoo!<br /><ul><li>The vertical space between paragraph tags <p> is not displayed – in the ExactTarget editor, use soft returns or line breaks <br> instead. In HTML paste, specify a top and bottom margin of 1em on paragraph tags. (e.g. <p style=”margin: 1em 0 1em 0;”>)</li></li></ul><li>DESIGN RESOURCES<br />
    43. 43. EXACTTARGET DESIGN RESOURCES<br />Design Tipsfor Outlook 2007<br />Email MarketingDesign & Rendering: <br />The New Essentials<br />Email Design Checklist<br />Visit ExactTarget.com<br />To Download <br />These Resources<br />Email Designfor Lotus Notes<br />CareerBuilder.com<br />Case Study<br />
    44. 44. EXACTTARGET DESIGN RESOURCES<br />Design Team Blog<br />New posts weekly!<br />blog.exacttarget.com<br />MarketingExperiments<br />Maximize Agency ROIthrough testing<br />Design Team Tweets<br />@ETDesign<br />twitter.com/etdesign<br />
    45. 45. DESIGN SERVICES<br />
    46. 46. EXACTTARGET DESIGN SERVICES<br />Performance & Design Assessment<br />Strategic Newsletter Design<br />Design Best Practices Training<br />Program-Specific Template Design<br />Branded Template Build<br />Custom Design Packages<br />Visit ExactTarget.com for more info!<br />
    47. 47. THANK YOU!<br />
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×