1 / 25

Email Design Best Practices Presented by Bronto Software, Inc. bronto

Email Design Best Practices Presented by Bronto Software, Inc. http://bronto.com. Hosts: Eric Boggs – Director of Account Management Jon Norris – Online Marketing Associate and Design Guru. Agenda. Do’s Don’ts Resources. DO: Pander to the Preview Pane.

helene
Download Presentation

Email Design Best Practices Presented by Bronto Software, Inc. bronto

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Email Design Best PracticesPresented by Bronto Software, Inc.http://bronto.com Hosts: Eric Boggs – Director of Account Management Jon Norris – Online Marketing Associate and Design Guru Bronto Software, Inc.

  2. Agenda • Do’s • Don’ts • Resources Bronto Software, Inc.

  3. DO: Pander to the Preview Pane • Keep impact in the “Northwest” • 500-700 pixels wide for 1|2 • 200 pixels wide for 1|1|1 in AOL • Design for blocked images • Include link to web version Bronto Software, Inc.

  4. Microscan – Preview Pane Bronto Software, Inc.

  5. Microscan – Preview Pane - Revamp Bronto Software, Inc.

  6. Bronto Bulletin – Preview Pane Bronto Software, Inc.

  7. Bronto Bulletin – Preview Pane Example Bronto Software, Inc.

  8. DO: Design for Delivery • Efficient HTML code • Images • Text • Simple text alternative Bronto Software, Inc.

  9. Bad Example – HTML code Bronto Software, Inc.

  10. Bad Example – HTML code What should you worry about? • Excessive tables • Extraneous, open, or improperly nested tags • CSS • “Save for Web” • Use a validator! Bronto Software, Inc.

  11. Bad Example – Images/Text Bronto Software, Inc.

  12. Bad Example – Images/Text Bronto Software, Inc.

  13. Good Example – Alternative Text Bronto Software, Inc.

  14. DO: Keep it Simple • Tables can be tricky • Top-to-bottom works best • Easy HTML-to-text translation • Google School of Design Bronto Software, Inc.

  15. Red Hat - Keep it Simple Bronto Software, Inc.

  16. Red Hat - Keep it Simple Bronto Software, Inc.

  17. DO: TEST!!!!! • Test email clients • Test browsers • Test subject, layout, call-to-action, etc. Bronto Software, Inc.

  18. Stockton Graham - Thunderbird Bronto Software, Inc.

  19. Stockton Graham - CSS Bronto Software, Inc.

  20. Stockton Graham - Gmail Bronto Software, Inc.

  21. Stockton Graham - Revamp Bronto Software, Inc.

  22. DON’T: Do these things • Don’t use Flash • Will not work consistently across email clients. • Don’t use Javascript • Disabled in most email clients as a security precaution. • Don’t embed audio or video • Link to a landing page. Bronto Software, Inc.

  23. DON’T: Do these things either • Don’t use external style sheets • Use inline styles • Embedded causes problems in webmail programs • Don’t use relative image/document links • Link absolutely • Don’t “Save as HTML” in Word, Publisher, etc. • Avoid: • Area maps • Dark backgrounds Bronto Software, Inc.

  24. Resources: • Online Resources: • http://www.w3.org/ • http://www.csszengarden.com • http://www.alistapart.com • http://www.alvit.de/handbook/ • Bronto Blog - http://bronto.com/company/news/blog/ • Your account manager • “Good artists borrow, great artists steal.” ~Pablo Picasso Bronto Software, Inc.

  25. Questions? http://bronto.com • Note: We will make presentation slides and recording available later this afternoon. Bronto Software, Inc.

More Related