Email Design<br />tackling email-rendering challenges to boost campaign results <br />April 15, 2010<br />
welcome<br /><ul><li>Who are we?
About Rendering
Gold Lasso ‘s “Lucky Thirteen”
Q&A Session</li></li></ul><li>gold lasso information<br />Gold Lasso <br />Email Service Provider since 2006<br />Best Val...
Michael Weisel, CTO
Moderator
Lauren Rutley, Client Services</li></li></ul><li>what is email rendering?<br />Rendering: Definition <br />“To convert any...
rendering challenges<br />How will emails be opened<br />Are images blocked <br />How busy are readers<br />What software ...
oops!<br />
The Lucky 13<br />design solutions for email marketers<br />
the lucky thirteen: rule #1<br />No background images<br />
the lucky thirteen: rule #2<br />Design for email preview panes and mobile screens<br />
the lucky thirteen: rule #3<br />Instead of float and clear, use hard break codes like <br> tags. <br />Otherwise:<br />Pa...
the lucky thirteen: rule #4<br />No custom bullets, ever. . .<br />. . . even if it’s part of your brand!<br />
the lucky thirteen: rule #5<br />48% see images while 52% do not!<br />- Merkle (2009)<br />Code your emails using image a...
the lucky thirteen: rule #6<br />Provide prominent call-to-action with links!<br />Download Here<br />Register and Win<br ...
the lucky thirteen: rule #7<br />Provide Last Resort links:<br />Click here to view in a browser.<br />Can’t see this emai...
the lucky thirteen: rule #8<br />Try to avoid style sheets (CSS) in email<br />CSS + emails =<br />CSS + websites =<br />H...
the lucky thirteen: rule #9<br />%<br />Always use pixel sizes instead of percentages for image & table parameters <br />M...
the lucky thirteen: rule #10<br />Keep original image file sizes small<br />Enhances deliverability<br />Boosts reputation...
the lucky thirteen: rule #11<br />Use Arial, Tahoma, Courier or Times New Roman.<br />Some fonts don’t render properly.<br...
the lucky thirteen: rule #12<br />Design emails using an equal balance of HTML, text and images <br />Graphic-Heavy:<br />...
Upcoming SlideShare
Loading in …5
×

Slideshare email rendering april2010_reallyfinal

593 views

Published on

A presentation on

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

  • Be the first to like this

No Downloads
Views
Total views
593
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • LAURENGold Lasso’s Lucky Thirteen These are 13 Rules for rendering.The UMBRELLA RULE when it comes to designing your email marketing? Just keep it simple. Think of it this way: If your email can’t get its message across without complicated designs, maybe you need to rethink your message.Because we’re limited in time, we’ll go over some of these in less detail than others. Save your questions to the end, or get in touch with us for more information.
  • MICHAELRule Number ONE: Don’t use background images that aren’t essential to your campaign. Images like this may be eye catching, and may tempt people to think about a vacation. But it’s a good bet that most of the people on your list won’t even see this. And including a background image isn’t just a waste of your design time, it could also shift the layout of the entire message, making your campaign useless.There are some creative ways to add background images to your messages i.e. using CSS and other coding techniques, however they are more complicated, utilize a lot of trial and error and take more resources to code. In the end, there is still no guarantee that they will render properly across the board.
  • Slideshare email rendering april2010_reallyfinal

    1. 1. Email Design<br />tackling email-rendering challenges to boost campaign results <br />April 15, 2010<br />
    2. 2. welcome<br /><ul><li>Who are we?
    3. 3. About Rendering
    4. 4. Gold Lasso ‘s “Lucky Thirteen”
    5. 5. Q&A Session</li></li></ul><li>gold lasso information<br />Gold Lasso <br />Email Service Provider since 2006<br />Best Value Guarantee<br /><ul><li>Today’s Email Rendering Guru
    6. 6. Michael Weisel, CTO
    7. 7. Moderator
    8. 8. Lauren Rutley, Client Services</li></li></ul><li>what is email rendering?<br />Rendering: Definition <br />“To convert any coded content to the required format for display.”<br />FACT: Designing for email requires different standards than designing for websites<br />Bob, the confused email designer<br />
    9. 9. rendering challenges<br />How will emails be opened<br />Are images blocked <br />How busy are readers<br />What software version<br />Where are emails opened <br />What email program do you use?<br />Do your subscribers use the same?<br />How do you know?<br />Do you test to multiple ISPs?<br />
    10. 10. oops!<br />
    11. 11. The Lucky 13<br />design solutions for email marketers<br />
    12. 12. the lucky thirteen: rule #1<br />No background images<br />
    13. 13. the lucky thirteen: rule #2<br />Design for email preview panes and mobile screens<br />
    14. 14. the lucky thirteen: rule #3<br />Instead of float and clear, use hard break codes like <br> tags. <br />Otherwise:<br />Paragraphs will run together<br />Text may creep too close to images<br />
    15. 15. the lucky thirteen: rule #4<br />No custom bullets, ever. . .<br />. . . even if it’s part of your brand!<br />
    16. 16. the lucky thirteen: rule #5<br />48% see images while 52% do not!<br />- Merkle (2009)<br />Code your emails using image alt tags<br />Helps subscribers whose settings block images<br />Draws consumers to your website <br />Who would otherwise not click links!<br />$50% Off Coupon<br />
    17. 17. the lucky thirteen: rule #6<br />Provide prominent call-to-action with links!<br />Download Here<br />Register and Win<br />Get Coupon<br />Schedule a Demo<br />Virtual Tour<br />Get the Facts<br />
    18. 18. the lucky thirteen: rule #7<br />Provide Last Resort links:<br />Click here to view in a browser.<br />Can’t see this email? Click here.<br />Click to view mobile version.<br />
    19. 19. the lucky thirteen: rule #8<br />Try to avoid style sheets (CSS) in email<br />CSS + emails =<br />CSS + websites =<br />Hard coding styles is safer!<br />
    20. 20. the lucky thirteen: rule #9<br />%<br />Always use pixel sizes instead of percentages for image & table parameters <br />Many rendering engines don’t “see” % settings<br />Keep emails from rendering in preview panes<br />
    21. 21. the lucky thirteen: rule #10<br />Keep original image file sizes small<br />Enhances deliverability<br />Boosts reputation<br />Loads faster<br />
    22. 22. the lucky thirteen: rule #11<br />Use Arial, Tahoma, Courier or Times New Roman.<br />Some fonts don’t render properly.<br />S me fo s d ’t re er prop y.<br />Some fonts don’t render properly.<br />Some fonts don’t render<br />Some fonts don’t render properly.<br />
    23. 23. the lucky thirteen: rule #12<br />Design emails using an equal balance of HTML, text and images <br />Graphic-Heavy:<br /><ul><li>Ads
    24. 24. Logos
    25. 25. Several menus
    26. 26. Videos
    27. 27. Flash slideshow</li></ul>Balanced:<br /><ul><li>HTML
    28. 28. Text
    29. 29. Key graphics
    30. 30. No flash or java
    31. 31. Links to more information</li></li></ul><li>the lucky thirteen: rule #13<br />Use an HTML table when coding page layout<br />Renders much better across email clients<br />Keeps things grouped and well-organized<br />Allows readers to easily find things<br />Call to action<br />Related links <br />Images<br />
    32. 32. summary<br />Don’t get too creativeno background images or wacky bullets & fonts<br />Design for email, not websites<br />Use tables in message design<br />Use image alt tags and HTML tables<br />Provide links: last resort, call to action, etc.<br />keep it simple, stupid<br />
    33. 33. for more information<br />register<br />GoldLasso.com Learning Center<br />download & ShareTackling Email-Rendering Challenges to Boost Campaign Results<br />emailservice@goldlasso.com<br />
    34. 34. please join us now for a brief q&a session thank you<br />www.goldlasso.com :: service@goldlasso.com<br />

    ×