Email Design Tips
Today’s Speakers• Brian Brown                    • Dan Feller   – Dir. of Experience Design      – Senior Technical   – id...
An digital relationship agencydriving profitable brand-to-one interactions.
Seven Tips to Design Buildable and Beautiful Emails
OVERVIEW   Graceful degradation   Images vs HTML   Designing in layers   Background images   Using white space wisely   Fo...
graceful degradation
images vs html
HTML VS IMAGES - WHY   If images are turned off, there should still be consumable content   Faster loading time   Lower SP...
IMAGES VS HTML   HTML                      IMAGES   All meaningful copy       Heavy graphical spots and photographs   Simp...
IMAGES VS HTML
HTML - MEANINGFUL COPY
Image rendering in web-based clients                                       Display Block
STYLE = “DISPLAY:BLOCK;”
ALT TAGS   Allows you to show text with images turned off   Not ALL clients render alt tags   Use on images that link, but...
ALT TAGS
ALT TAGS
ALT TAGS
designing in layers
DESIGNING IN LAYERS
DESIGNING IN LAYERS
background images
BACKGROUND IMAGES
BACKGROUND IMAGES
BACKGROUND IMAGES - OUTLOOK RENDERING
BACKGROUND IMAGES
WHITE SPACE   Text rendering   Readability   Quality over quantity
mobile email and text rendering
WHITE SPACE - MOBILE RENDERING
WHITE SPACE - MOBILE RENDERING
WHITE SPACE - MOBILE RENDERING
fonts
FONTS   Non Standard                             Standard   Headlines                                Copy   Brand Elements...
WEB SAFE FONTS
simple solutions for complex design
HTML - SIMPLE BORDERS
GRACEFUL DEGRADATION
GRACEFUL DEGRADATION
SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
WHAT WE COVERED   Images vs HTML   Designing in layers   Background images   Using white space wisely   Fonts   Simple sol...
More information and questions?    If you have any further questions on email rendering, either from a design or      deve...
Q & A / Contact Information• Brian Brown                    • Dan Feller   – Dir. of Experience Design      – Senior Techn...
About Silverpop• A leading email marketing / marketingautomation provider• Email marketing• Transactional email• Share-to-...
Resources• Resource Center   –   White papers   –   Webinars   –   Blogs   –   Case studies   –   Newsletters   –   http:/...
Thank You!  On Twitter: @Silverpopwww.slideshare.net/silverpop   www.silverpop.com
Email design tips
Email design tips
Email design tips
Email design tips
Email design tips
Email design tips
Email design tips
Upcoming SlideShare
Loading in …5
×

Email design tips

2,519 views
2,355 views

Published on

So you have a database filled with subscribers waiting to receive your emails, and a message to deliver. But with so many considerations ranging from how your emails look and function to the message they carry, just where do you start?

The design and layout of your emails are just as important as what you have to say in them. Challenges such as growth in the use of mobile devices, blocked images, preview panes and increasingly short attention spans make good email design critical to success.

In this Webinar, ideapark's Director of Experience Design, Brian Brown, and Senior Technical Designer Dan Fellar shared email examples and practical tips for designing messages that will help you to:

- Maximize readability and deliverability
- Use development techniques that will help keep your design looking great
- Connect with customers to increase profitability and brand loyalty
- Inspire customers to respond and take action

Published in: Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,519
On SlideShare
0
From Embeds
0
Number of Embeds
432
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Email design tips

  1. 1. Email Design Tips
  2. 2. Today’s Speakers• Brian Brown • Dan Feller – Dir. of Experience Design – Senior Technical – ideapark Designer – ideapark• Loren McDonald – VP, Industry Relations – Silverpop – Moderator
  3. 3. An digital relationship agencydriving profitable brand-to-one interactions.
  4. 4. Seven Tips to Design Buildable and Beautiful Emails
  5. 5. OVERVIEW Graceful degradation Images vs HTML Designing in layers Background images Using white space wisely Fonts Simple solutions for complex designs
  6. 6. graceful degradation
  7. 7. images vs html
  8. 8. HTML VS IMAGES - WHY If images are turned off, there should still be consumable content Faster loading time Lower SPAM rating = higher deliverability
  9. 9. IMAGES VS HTML HTML IMAGES All meaningful copy Heavy graphical spots and photographs Simple borders Headlines and CTAs with special fonts Solid background colors Gradient or textured elements
  10. 10. IMAGES VS HTML
  11. 11. HTML - MEANINGFUL COPY
  12. 12. Image rendering in web-based clients Display Block
  13. 13. STYLE = “DISPLAY:BLOCK;”
  14. 14. ALT TAGS Allows you to show text with images turned off Not ALL clients render alt tags Use on images that link, but dont share an associated HTML link Use on images that convey a short message (ie. headlines)
  15. 15. ALT TAGS
  16. 16. ALT TAGS
  17. 17. ALT TAGS
  18. 18. designing in layers
  19. 19. DESIGNING IN LAYERS
  20. 20. DESIGNING IN LAYERS
  21. 21. background images
  22. 22. BACKGROUND IMAGES
  23. 23. BACKGROUND IMAGES
  24. 24. BACKGROUND IMAGES - OUTLOOK RENDERING
  25. 25. BACKGROUND IMAGES
  26. 26. WHITE SPACE Text rendering Readability Quality over quantity
  27. 27. mobile email and text rendering
  28. 28. WHITE SPACE - MOBILE RENDERING
  29. 29. WHITE SPACE - MOBILE RENDERING
  30. 30. WHITE SPACE - MOBILE RENDERING
  31. 31. fonts
  32. 32. FONTS Non Standard Standard Headlines Copy Brand Elements Non Graphical Calls to Action (ie text links) Graphical Calls to Action (ie buttons)
  33. 33. WEB SAFE FONTS
  34. 34. simple solutions for complex design
  35. 35. HTML - SIMPLE BORDERS
  36. 36. GRACEFUL DEGRADATION
  37. 37. GRACEFUL DEGRADATION
  38. 38. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
  39. 39. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
  40. 40. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
  41. 41. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
  42. 42. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS
  43. 43. WHAT WE COVERED Images vs HTML Designing in layers Background images Using white space wisely Fonts Simple solutions for complex designs Graceful degradation
  44. 44. More information and questions? If you have any further questions on email rendering, either from a design or development standpoint, feel free to contact Dan: dan@ideapark.com
  45. 45. Q & A / Contact Information• Brian Brown • Dan Feller – Dir. of Experience Design – Senior Technical – ideapark Designer – brian@ideapark.com – ideapark – dan@ideapark.com• Loren McDonald – lmcdonald@silverpop.com – Twitter: @LorenMcDonald – Twitter: @silverpop
  46. 46. About Silverpop• A leading email marketing / marketingautomation provider• Email marketing• Transactional email• Share-to-social• Send Time Optimization• Landing pages• Surveys• SMS• API Integrations w/ Web analytics,personalization, reviews, recommendationtechnologies
  47. 47. Resources• Resource Center – White papers – Webinars – Blogs – Case studies – Newsletters – http://www.silverpop.com/marketing-resources/index.html• Many presentations on SlideShare – www.slideshare.net/Silverpop
  48. 48. Thank You! On Twitter: @Silverpopwww.slideshare.net/silverpop www.silverpop.com

×