2. Design Concept:
Introduction “the development of a successful email
Email marketers face a handful of challenges when it marketing campaign is about much more
comes to getting across their messages. Deliverability than graphics and creativity.”
is the first hurdle—can you get the email past the
spam filters into the inbox? Once it’s there, you have
another problem: can they even read it? Missed Communication Opportunities
Think about sending a birthday card to a friend. You
An email can be designed one way, but display to the trust that the post office will route your card correctly.
reader in an entirely different—and often jumbled— And you expect that the envelope will prevent the
way. While HTML code is a universal language, this card from getting torn. The mail carrier will place
doesn’t mean all emails are read, or rendered, the it safely in her mail box, and naturally you assume
same by different email software. Design elements that your friend will see the card exactly as you sent
such as images, text blocks, logos, tables, videos and it. But what if it showed up in a different language?
line elements won’t always translate the same way And your signature somehow shrunk and became
for each subscriber. Some users may see centered illegible? And the teddy bear holding birthday
text, while others might completely miss seeing a balloons suddenly disappeared?
table because it was shifted to the very bottom of the
message. Chances are your friend would be annoyed, throw it
away and never knew you mailed it.
Recipients don’t have the time for or interest in
deciphering emails. Unless the campaign is carefully This is what happens with emails when they’re not
designed and appears in the inbox as intended, the rendered properly: they may make it to the inbox, but
reader— a potential customer—is likely to delete the they don’t show up in a way that makes sense to the
email without trying to read it. The result: a failed reader. That’s why the development of a successful
campaign, possible opt-outs, no sale, and no traffic email marketing campaign is about much more than
to the website. graphics and creativity. Marketers must be strategic
in their email development, informed about potential
This white paper describes the challenges associated rendering issues, and careful about their design
with designing emails to render properly—and choices.
the consequences of doing it poorly—and outlines
solutions to maximize the readability of an email What causes rendering problems?
campaign. Email marketing has morphed significantly since the
beginning of the last decade, becoming more powerful
Rendering: Technical Definition in the process. Shifts in technology, including the
proliferation of handheld email devices and the
“To convert any coded content to the
introduction of new browsers to the marketplace have
required format for display.” planted roadblocks in front of effective campaigns.
Rendering: What is it, and why does it matter? Campaigns that change shape, form or even language
According to PC Magazine, the definition of the upon delivery are one of the biggest challenges facing
word render is “to convert any coded content to the email marketers. Sometimes it’s the aesthetics of
required format for display.” The key word in this the email that are altered, or the branding is often
definition is “required.” Sending an email campaign misrepresented, or key calls to action are hidden. This
requires attention to details such as how the message can happen when:
will display on the recipient’s screen.
Page 2 - Tackling Email-Rendering Challenges to Boost Campaign Results
3. • Images are blocked due to the user’s security of the message should be provided for each campaign a
setting, or the email defaults to some other marketer sends. Time and time again, marketers with
unintended setting in Outlook, or a consumer- the best of intentions send campaigns that have the key
driven email platform like Yahoo. message and call to action hidden because of a blocked
image.
• The font changes when the email is delivered and
opened (compared to what was previewed in the Furthermore, an email marketer needs to make sure
email service provider’s preview window). that customers also can view a “text-only” version
• Consumer-driven free platforms may reformat of the email. With the advent of technology like a
text for some email messages, making a font Blackberry or an iPhone in everyone’s pocket, they
larger or centered, even though it wasn’t intended are dealing with consumers and business people
that way by the email designer. who have the ability to read a message on the go.
If the customer has the ability to switch to a text-
only version, as opposed to an HTML-based email,
Design Challenge: the marketer has a greater ability of appealing to
Design for both mobile and desktop. a customer who doesn’t have time to wait for a
Assume images will be turned off. graphics-heavy marketing email to open.
Only half of email marketers design for
Variety of devices, platforms and settings maximum success
generate differences in rendering Current statistics show that less than 50% of all email
In a perfect world, a marketer could choose which marketers actually design and render their customer-
device or email client displayed their email. But driven email correctly (Email Experience Council,
there’s no way to control how customers choose to Deliverability Resource Guide 2009). About one
open these messages. The differences among devices, out of five emails show blocked content or invisible
platforms and a sender’s personal settings greatly graphics.
affect the rendering of email campaigns.
50%:
Microsoft Outlook, for example, has several versions
Only half of all email marketers design
currently in use by businesses, each version with
different rendering and display properties than the their messages correctly.
next. Consumer email clients have frequent platform
changes, including Yahoo! Mail Beta and Microsoft’s
If one out of every five emails from a campaign is not
Live Mail Beta. These frequent changes no longer
doing its job, the marketer is quickly losing business.
guarantee that emails will open the way they are
Because an email didn’t render correctly, potential
supposed to simply because they are working on a
business was cut by 20%. And for a campaign that
broad-based email platform.
had 100 potential customers, that means the marketer
The all-important call to action is often lost due only reached 80.
to images rendering improperly
Coding for email development can’t be done by
When the email marketer is working with the preview
just any Web developer
pane, such as with Microsoft Outlook, they have limited
Designing an email for a marketing campaign and
area to work with. They need to make it count. A
designing a website are two very different things.
compelling call to action must be visible without having
While proper email rendering is based on coding
to open the email entirely and the subject line should be
HTML just like a website, these two items differ in
clear. And in case a user’s security settings block images
practice and implementation.
from being displayed, a link to a browser-based version
Page 3 - Tackling Email-Rendering Challenges to Boost Campaign Results
4. Microsoft Outlook 2007
Worst email client to design for because it
uses Explorer as its rendering engine
Emails not only have to wrestle with security settings to sign up for free accounts through Gmail, Hotmail
and smaller window sizes, but many email clients and Yahoo and send your test email to those accounts.
simply translate messages differently because they Also send test emails to an email using Outlook and
each use their own rendering engines. Rendering to a Blackberry or an iPhone.
engines decide how things will look. Many do not
support some design elements that are commonly A comprehensive email test system by Litmus allows
found on websites. for advanced testing to see what an email will look like
on a variety of email programs and servers, from the
So when a designer codes an email the same way subject line, to the preview pane, to the opened email.
as the company website with complex HTML code, Furthermore, this process allows an email marketer
many email clients will choose an alternative format. to understand where there needs to be improvement,
This is especially true if there are interactive features development or correction done before the email is
and graphics embedded in the material. For example, sent to their potential customers or clients.
even simple design components such as margins are
not supported by Microsoft Outlook 2007, which Testing emails is equivalent to a magazine publisher
often renders the text unreadable. reviewing proofs and print samples before mailing to
subscribers. Without this important step, publishers
Best way to determine which rendering would lose their audiences fast. The same is true for
problems affect your email: Test. Test. Test. email marketers.
While there are a variety of technical issues that
could lead to improper or failed delivery of an email ”Worst offenders” that complicate rendering
marketing program, an email marketer has the ability While there are a growing number of proponents
to test their email marketing program to determine if for the adaptation of universal HTML standards, a
what they are sending to customers is effective once handful of popular email clients still do not support
it is received. basic email design components. The Email Standards
Project, a group of passionate email industry insiders,
Testing can be done in a few ways. One way would be has conducted tests to determine which email clients
What Will Your Email Really Look Like?
Outlook 2007 View Google Gmail View Lotus Notes 8View
The original layout,
the way it was
intended to look Source: http://www.email-standards.org/clients
Page 4 - Tackling Email-Rendering Challenges to Boost Campaign Results
5. Email rendering becomes a problem when
designs include the following HTML coding
elements. Designers should either eliminate
these codes from their emails, or understand
that some recipients might not view the email
as it was originally intended. This list does
not include all design challenges, just those
that the design community feels are essential
components of email design.
• Background images
• Margins, borders and padding
• Float and clear properties
• List-style images (custom bullets)
While these lists comprise the major stumbling
blocks to email rendering, designers still
encounter other ISPs, browsers and email
clients that have issues with accurately
displaying some cosmetic components of
emails. Luckily, there are ways around most
complications.
Top design recommendations for
successful email rendering
Simply put, it’s best to keep things simple.
render emails properly, and which design elements Email recipients don’t have a lot of time
provide the most challenges. to figure out confusing content, and it is hard to
do something so complex that it will look good
The following email clients, ranked in order of how everywhere. If an email can’t get its message across
without complicated designs, perhaps the overall
Lucky Thirteen campaign strategy needs to be reconsidered.
The thirteen rules of email rendering.
For any email marketer looking to boost campaign
metrics by improving message rendering, there are
poorly they performed on those tests, cause email
ways to fix issues they are experiencing, and ways
designers the most frustration because of improper
to avoid them in the future. The following “Lucky
email rendering. Their rendering engines do not
Thirteen” guidelines are best practices for email
support commonly used design code and, as a result,
campaign design:
email recipients using these readers are not able to
see many emails as they were originally designed. 1. Don’t use background images that are essential to
your campaign message. There’s nothing wrong
1. Outlook 2007 with plain backgrounds. In fact, they have a
2. Gmail history of better readability and keep the size of
3. Lotus Notes 8 your emails down, which is an important factor
4. Windows Live Hotmail in deliverability.
Page 5 - Tackling Email-Rendering Challenges to Boost Campaign Results
6. 2. Remember that you are not designing a web must be complete. The message must be easily
page; the window will be much narrower in the understood, with or without graphics.
recipient’s email client than in their browser. And
many times you need to design for the preview 8. Avoid using external style sheets (CSS). Many
pane, which is even smaller. Therefore create email clients disable style sheets and therefore
a fluid design without wide images, and avoid your hard work and beautiful design templates
margins and padding which tends to shift text won’t come through on the other side. Instead,
when rendered in Outlook 2007, Gmail, Lotus use tables and inline styles which work best for
Notes 8 and Hotmail. templates that are utilized by several staff of
varying design skills.
3. Instead of float and clear, just use hard break
codes like <br> tags. 9. Sometimes designers find that emails have
trouble rendering width/height settings when
4. There’s no need for custom bullets in most cases. percentage values are are used. Many email
If you absolutely must have a design element clients ignore a percentage because it does not
that acts as a custom bullet, consider including recognize it as a valid property. Instead, always
an image of your bulleted list. Keep in mind, use pixel sizes instead of percentages to avoid the
however, there’s still a chance your image will be images showing up extra large.
blocked.
10. Not only should you define the size by pixel
5. To tackle the common problem of image height and width but you should also keep image
suppression, use HTML text and alt tags. When original image file sizes small. There’s no need to
images are turned off in a user’s settings, an alt use images with anything greater than 72-96 dpi
tag enables them to see or “read” what your image since screen resolution is much lower than what’s
represents. For example, if the image is a $5 commonly used for printing. In addition, smaller
coupon, include an alt tag that says, “$5 coupon.” file sizes make for faster page loading time.
That way, a customer can see the text of your
promotion even if the images are blocked. They 11. Work with common, identifiable fonts—
would then know to visit your web version of the Arial, Tahoma, Courier—that are universally
email if they want the coupon. recognized. Also, do not use periods or extra
spaces in between letters or make the font of the
6. In addition, don’t overlook providing text for the email too big. When this occurs an email client
call to action, or forget to link to the action you like Hotmail will translate the HTML coding
want people to take. For example, if a potential different from the way it was intended. There have
customer can’t see your button that says, “Free been reported instances of Hotmail converting
Quote,” that links to a data collection form, you’ve text to ASCII text, which then renders the email
missed out on that opportunity. By employing more or less useless to most of your audience.
these principles, marketers will see increased
opens, more click-throughs, and ultimately new 12. To avoid being caught by spam filters, don’t
conversions. design off-balance emails. Off-balance emails use
more images than HTML, or are all text and no
7. Similarly, include a link in the email that allows images. And never use JavaScript. Many spam
the reader to click to see the email in the available filter programs look for a good balance between
web browser, instead of in the email itself. Make images, HTML and text in your message, and can
sure the email has hyperlinks in the message detect if an email contains Java.
itself—not only attached to an image. Customers
look for information through an email, not just 13. Use an HTML table when coding page layout.
in the images or graphics; therefore, the message This will display the content of the email
Page 6 - Tackling Email-Rendering Challenges to Boost Campaign Results
7. consistently for all readers, and will prevent text
from centering itself or moving to other areas. It For more information about email marketing and
is important to use the attributes within the table list acquistion, including strategy, deliverability
and tags to control the overall display. Therefore, and best practices, visit www.goldlasso.com. For
if an email marketer aligns all of their text to the a copy of our “Lucky Thirteen” email designer’s
left, when the customer opens it, that’s the way it reference checklist, email service@goldlasso.com.
will be viewed.
Conclusion: To be successful, email marketing
must be accessible
Email marketing offers a fantastic cost-controlled
opportunity for marketing and sales growth, but only
if the targeted email is rendered correctly and the
message is consistent and accessible to the recipients.
Email campaigns that are carefully designed to
display properly enable customers to clearly, quickly
and easily get the message—and respond to the call
to action.
Page 7 - Tackling Email-Rendering Challenges to Boost Campaign Results
