Embed Size (px)
Citation preview
February 23, 2006 Bronto Software, Inc.
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
February 23, 2006 Bronto Software, Inc.
Agenda
• Do’s • Don’ts• Resources
February 23, 2006 Bronto Software, Inc.
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
February 23, 2006 Bronto Software, Inc.
Microscan – Preview Pane
February 23, 2006 Bronto Software, Inc.
Microscan – Preview Pane - Revamp
February 23, 2006 Bronto Software, Inc.
Bronto Bulletin – Preview Pane
February 23, 2006 Bronto Software, Inc.
Bronto Bulletin – Preview Pane Example
February 23, 2006 Bronto Software, Inc.
DO: Design for Delivery
• Efficient HTML code• Images• Text• Simple text alternative
February 23, 2006 Bronto Software, Inc.
Bad Example – HTML code
February 23, 2006 Bronto Software, Inc.
Bad Example – HTML code
What should you worry about?
• Excessive tables
• Extraneous, open, or improperly nested tags
• CSS
• “Save for Web”
• Use a validator!
February 23, 2006 Bronto Software, Inc.
Bad Example – Images/Text
February 23, 2006 Bronto Software, Inc.
Bad Example – Images/Text
February 23, 2006 Bronto Software, Inc.
Good Example – Alternative Text
February 23, 2006 Bronto Software, Inc.
DO: Keep it Simple
• Tables can be tricky• Top-to-bottom works best• Easy HTML-to-text
translation• Google School of Design
February 23, 2006 Bronto Software, Inc.
Red Hat - Keep it Simple
February 23, 2006 Bronto Software, Inc.
Red Hat - Keep it Simple
February 23, 2006 Bronto Software, Inc.
DO: TEST!!!!!
• Test email clients• Test browsers• Test subject, layout, call-to-action, etc.
February 23, 2006 Bronto Software, Inc.
Stockton Graham - Thunderbird
February 23, 2006 Bronto Software, Inc.
Stockton Graham - CSS
February 23, 2006 Bronto Software, Inc.
Stockton Graham - Gmail
February 23, 2006 Bronto Software, Inc.
Stockton Graham - Revamp
February 23, 2006 Bronto Software, Inc.
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.
February 23, 2006 Bronto Software, Inc.
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
February 23, 2006 Bronto Software, Inc.
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
February 23, 2006 Bronto Software, Inc.
Questions?
http://bronto.com
• Note: We will make presentation slides and recording available later this afternoon.
