Gl whitepaper email_rendering_design


Published on

  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Gl whitepaper email_rendering_design

  1. 1. White Paper Tackling Email-Rendering Challenges to Boost Campaign Results 25 B Chestnut Street l Gaithersburg, Maryland 20877 l (301) 990-9857 Phone l (301) 990-9856 FAX l Follow Us On: Twitter, Facebook & LinkedIn © Copyright Gold Lasso, Inc.
  2. 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. 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. 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: Page 4 - Tackling Email-Rendering Challenges to Boost Campaign Results
  5. 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. 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. 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 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 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