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

1. Email Design Tips

2. Today’s Speakers
• Brian Brown • Dan Feller
– Dir. of Experience Design – Senior Technical
– ideapark Designer
– ideapark
• Loren McDonald
– VP, Industry Relations
– Silverpop
– Moderator

4. An digital relationship agency
driving profitable brand-to-one interactions.

6. Seven Tips to Design Buildable and Beautiful Emails

7. OVERVIEW
Graceful degradation
Images vs HTML
Designing in layers
Background images
Using white space wisely
Fonts
Simple solutions for complex designs

8. graceful degradation

9. images vs html

10. HTML VS IMAGES - WHY
If images are turned off, there should still be consumable content
Faster loading time
Lower SPAM rating = higher deliverability

11. 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

12. IMAGES VS HTML

13. HTML - MEANINGFUL COPY

14. Image rendering in web-based clients
Display Block

16. STYLE = “DISPLAY:BLOCK;”

18. ALT TAGS
Allows you to show text with images turned off
Not ALL clients render alt tags
Use on images that link, but don't share an associated HTML link
Use on images that convey a short message (ie. headlines)

19. ALT TAGS

20. ALT TAGS

21. ALT TAGS

22. designing in layers

23. DESIGNING IN LAYERS

24. DESIGNING IN LAYERS

25. background images

26. BACKGROUND IMAGES

27. BACKGROUND IMAGES

28. BACKGROUND IMAGES - OUTLOOK RENDERING

29. BACKGROUND IMAGES

31. WHITE SPACE
Text rendering
Readability
Quality over quantity

33. mobile email and text rendering

34. WHITE SPACE - MOBILE RENDERING

35. WHITE SPACE - MOBILE RENDERING

36. WHITE SPACE - MOBILE RENDERING

37. fonts

38. FONTS
Non Standard Standard
Headlines Copy
Brand Elements Non Graphical Calls to Action (ie text links)
Graphical Calls to Action (ie buttons)

39. WEB SAFE FONTS

40. simple solutions for complex design

41. HTML - SIMPLE BORDERS

42. GRACEFUL DEGRADATION

43. GRACEFUL DEGRADATION

44. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS

45. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS

46. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS

47. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS

48. SIMPLE SOLUTIONS FOR COMPLEX DESIGNS

49. WHAT WE COVERED
Images vs HTML
Designing in layers
Background images
Using white space wisely
Fonts
Simple solutions for complex designs
Graceful degradation

50. 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

52. 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

53. About Silverpop
• A leading email marketing / marketing
automation provider
• Email marketing
• Transactional email
• Share-to-social
• Send Time Optimization
• Landing pages
• Surveys
• SMS
• API Integrations w/ Web analytics,
personalization, reviews, recommendation
technologies

54. 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

55. Thank You!
On Twitter: @Silverpop
www.slideshare.net/silverpop
www.silverpop.com