email design tips
Post on 12-Nov-2014
2.794 Views
Preview:
DESCRIPTION
TRANSCRIPT
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:
dan@ideapark.com
Q & A / Contact Information
• Brian Brown
– Dir. of Experience Design
– ideapark
– brian@ideapark.com
• Loren McDonald
– lmcdonald@silverpop.com
– Twitter: @LorenMcDonald
– Twitter: @silverpop
• Dan Feller
– Senior Technical Designer
– ideapark
– dan@ideapark.com
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
top related