Embed Size (px)
DESCRIPTION
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
Citation preview
Email Design Tips
Today’s Speakers
• Brian Brown
– Dir. of Experience Design
– ideapark
• Loren McDonald
– VP, Industry Relations
– Silverpop
– Moderator
• Dan Feller
– Senior Technical Designer
– ideapark
An digital relationship agency
driving 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
Fonts
Simple solutions for complex designs
graceful degradation
images vs html
HTML VS IMAGES - WHY
If images are turned off, there should still be consumable content
Faster loading time
Lower SPAM rating = higher deliverability
IMAGES VS HTML
HTML
All meaningful copy
Simple borders
Solid background colors
IMAGES
Heavy graphical spots and photographs
Headlines and CTAs with special fonts
Gradient or textured elements
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 don't share an associated HTML link
Use on images that convey a short message (ie. headlines)
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
Headlines
Brand Elements
Graphical Calls to Action (ie buttons)
Standard
Copy
Non Graphical Calls to Action (ie text links)
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 solutions for complex designs
Graceful degradation
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:
Q & A / Contact Information
• Brian Brown
– Dir. of Experience Design
– ideapark
• Loren McDonald
– Twitter: @LorenMcDonald
– Twitter: @silverpop
• Dan Feller
– Senior Technical Designer
– ideapark
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
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
Thank You!
On Twitter: @Silverpop
www.slideshare.net/silverpop
www.silverpop.com
