Email is at the heart of most applications, web and native alike. An ideal and universal way to communicate with users, nearly every designer and developer has to build transactional or marketing emails at some point in their careers (whether they want to or not).
But the sheer number of email clients—each with their own rendering problems—leaves many people with heads hung, fists raised, cursing the creators of Outlook and Gmail and pining for simpler days.
In this webinar, we identify some of the most common email rendering pitfalls, look at techniques to prevent them, and talk about a process to test your transactional emails using Sendwithus and Litmus.
37. ALT text
Include ALT text
Provides context
for missing images
<img src=“logo.jpg” width=“400″ height=“149″
alt=“Litmus” style=“font-family: Georgia; color:
#697c52; font-style: italic; font-size: 30px;”>
39. Blue links
Present design problems
Colors are off-brand
Accessibility concerns
Low contrast text = unreadable
40. Old fix
Wrap suspect text and style using CSS
.blue-links a { color: #888888 !important; }
<span class=“blue-links”>March 10</span>
Blue links
41. New fix
Put this in the <head> of your email:
Blue links
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
font-family: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
47. Modular design
Table rows & cells
For every section
Emails as LEGO
Makes building different
templates & troubleshooting easy
Module
HEADER
Module
HERO IMAGE
Module
COPY BLOCK
Module
CTA BUTTON
Module
FOOTER
48. Inline your CSS
No linked stylesheets
Most email clients won’t display them
Embedded for enhancements
Use styles in the <head> for progressive
enhancement
Inline for everything else
All important formatting should be inline on
HTML elements for maximum compatibility
<link rel="stylesheet" type="text/css"
href=“style.css">
<head>
<style>
… STYLES …
</style>
</head>
<td style=“padding: 10px 20px 30px 20px;
font-family: sans-serif; font-size:
18px; color: #000000;”></td>
49. Different device & screen
sizes break a lot of emails
#WelcomeToTheInbox
52. Mobile aware
• Considers the mobile user a priority
• One layout for all screen sizes
• Single column design; 320-500px
• Large text & buttons
• Generous white space
• Short, concise body copy
53. Fluid
Email width changes to fit
inside the window
• Percentage-based widths
• Adapts to fit the screen
• Text wraps automatically
54. Responsive
• Resize content: make images fit,
make text larger
• Hide content on mobile
• Stack columns
• Move a two-column design to a
one-column design
69. Sendwithus Open Source Templates
sendwithus.com/resources/templates
Litmus Community
litmus.com/community
Litmus Blog
litmus.com/blog
70. Litmus Community
http://bit.ly/1KogqN1
Q&A Time
Type your questions in the chat window
Try Sendwithus free
sendwithus.com/pricing
Try Litmus free for 14 days
litmus.com/coupon/WelcomeToTheInbox
Join the discussion