Posts Tagged ‘design’

All Email Clients Are Not Created Equal

Thursday, August 12th, 2010

“We hold these truths to be self-evident, that all email clients are not created equal, that they are endowed by their provider with certain un-agreeable quirks, that among these are inconsistent rendering, un-deliverability, and annoying guidelines that MUST be followed for translating that sexy design into an equally appealing email message you just have to deliver to your audience.”

The basics: There are two distinct types of email client.

1. Web-based: Simply means access to email via web interface (Yahoo Mail, Gmail, Windows Live Hotmail, etc.)
2. Desktop/Mobile Application: Email software installed on a desktop, laptop, or smart phone which retrieves email for you over POP or IMAP protocols.

With Web-based email clients, your HTML email is rendered by your web browser (Internet Explore, Firefox, Safari, Opera, etc.). Which means quality assurance and testing can generally be performed within a web browser and the results will be close to what you can expect to see within the specific email client. Of course, each client has it’s own quirks, such as Yahoo Mail’s dislike for displaying a background-color associated with the body tag, or Hotmail’s dislike for padded elements, but these are all issues that can be avoided. These “quirks” are safeguards to prevent an HTML email affecting the web-based email application’s interface as the application’s interface itself is built on HTML/CSS as well.

For desktop/mobile applications, consistency becomes much more difficult. These email applications tend to make up their own rules. The application can employ an installed browser’s HTML rendering engine, another application’s rendering engine, or provide its own. Prior to Outlook 2007 being released, Outlook used the Internet Explorer rendering engine which helped in achieving rendering consistency across browsers and other clients. However, when Microsoft decided to rely upon the MS Word rendering engine for Outlook 2007, that progress was defeated. Word’s HTML rendering has no support for background images, limited CSS support, and fails to render adequately a variety of coded email designs. The “bad news” is that some version of Outlook (including older versions) is utilized by 43% of all users, which means for email marketers it’s now imperative that we support this client in the best way we can.

Check back for next weeks’ article on suggested solutions for email rendering and learn what you can do to achieve successful results by coding your emails to accommodate email client inconsistencies.

The Email Bulletproof Button Generator

Thursday, June 17th, 2010

Bulletproof ButtonVisual inconsistency is the hobgoblin of email creation.

Despite the best efforts of email marketers, many variables affect the look of an email campaign. One of the biggest, default image handling, is based entirely on a reader’s email setup.

Some of the most used email clients, such as Gmail and all the Outlook variations, block images by default. Though this can be changed with a few mouse clicks, the majority of campaign subscribers stick to their email client’s stock set up to deal with images.

Besides being a minor annoyance for the reader, this development decision can wreak havoc on a brand’s ability to deliver consistent information by email.

Enter the bulletproof button.

Originated by the fine folks at Smith Harmon, the bulletproof button offers the best of both worlds. A brand can simultaneously ensure that a reader will see the most salient points of an email with images turned on or off.

The concept involves using tables for the HTML of the email and including both a background image and background color in the tag. The tag that holds the call-to-action (CTA) must be the same size as the image it houses.  With images enabled, the CTA is shown with an image as the background and the CTA as text. With images off, the end user sees a colored box instead of an image while the CTA looks the same.

We’ve prepared a number of examples and variations that you can use to maintain visual consistency. What’s even better is that we’ve provided all the code underneath the examples so feel free to copy it and use as you see fit.

We’ve also created a BULLETPROOF BUTTON GENERATOR for everyone to use. All you need to do is fill out the form and click submit. We’ll do the rest.

We hope you find the Bulletproof Button Generator helpful.  If you use it for any of your campaigns let us know (leave a comment below) and if you’re able to report your success metrics we’d love to hear its impact on your campaign.

For more information on the writing copy for buttons, check out Anthony Schneider’s Click Here article.

Bulletproof Button Examples

Feel free to borrow our button background images if you’d like, but please replace the absolute path of the image we’ve used with ones of your own.

Images On

Free Trial
Images Off

Free Trial
Code
<table cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#c61210" background="http://masstransmit.com/wp-content/uploads/2010/06/star.gif" height="135" width="135" style="color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif;" align="center" valign="middle"><a href="" style="color:#ffffff; text-decoration:none;">Free Trial</a></td></tr></table>
Images On

Click Here
Images Off

Click Here
Code
<table cellpadding="0" cellspacing="0" border="0"><tr><td background="http://masstransmit.com/wp-content/uploads/2010/06/rectangle.gif" width="146" height="41" bgcolor="#c73f11" style="color:#FFFFFF; font-family:Verdana, Arial, Helvetica, sans-serif;" align="center" valign="middle"><a href="" style="color:#ffffff; text-decoration:none;">Click Here</a></td></tr></table>

Click Here
Images On

Register
Images Off

Register
Code
<table cellpadding="0" cellspacing="0" border="0"><tr><td background="http://masstransmit.com/wp-content/uploads/2010/06/rounded.gif" bgcolor="#dda30e" style="color:#000000; font-family:Verdana, Arial, Helvetica, sans-serif;" align="center" valign="middle" height="55" width="175"><a href="" style="color:#000000; text-decoration:none;">Register</a></td></tr></table>

Email Newsletter Best Practices

Wednesday, November 11th, 2009

woman_field_smThe email newsletter has changed a lot in the past few years. While some newsletters are comprehensive broadsheets, for the most part the newsletter has become a conduit, an open system communication vehicle. It’s slimmed down and sped up. They’ve become more visually rich and less verbose—snazzier, more intriguing, smarter. The average user spends less than a minute with your email newsletter – scanning more than reading. Here are a few tips to maximize your newsletter minute.

Scan-ability
Email newsletters should be easy to scan. Most users  scan, search or graze. They don’t read every word. The average time allocated to a newsletter after opening it is only 51 seconds. (UseIt.com)
See: UseIt.com Eyetracking

Enticing
An email newsletter should be intriguing more than comprehensive (of course there are some exceptions). Be engaging, be open. Use imagery and language that interests the user and makes her want to click, read, act.

Visual
Email newsletters are visual as much—if not more than—text dominated. Tell your story in pictures with headlines and subheads that users find interesting, and they will click on a link to read more.

Above the Fold
Vital info and links go “above the fold” (or the “preview pane” area in most email clients).  It’s important to keep key elements of your email in this area.  These key elements should include your call-to-action, primary subject matter, logo, header, and possibly lead image and table of contents.  Having your call-to-action above the fold gives your email a higher chance of click-throughs.  If someone has to scroll and search for the key information or call-to-action they may end up closing your email before taking any action at all.

Structure
Think about one-column v. two-column, how to handle links, video, social media. For deep content, a sidebar table of contents and/or navigation at the top of the email might help users find the information they need.
See: One Column vs. Two Columns

Format

An email newsletter is not an email letter. For the most part email newsletters are also not comprehensive repositories. Of course, for invitations, fundraising and news announcements, you’re going to want to send an email letter. On the other hand, if you send a monthly digest to a paid subscriber base, chances are you do want to build a long, comprehensive newsletter.
See: The Art of the Email Letter

Share
Make it easy to forward and share with network. Sharing email with a network boosts email visibility by 40% or more.

Subject Line
Subject line: 60 characters max. Brevity. Soul of wit.
See: The Art of the Subject Line

5 Ways To Keep The Magic Alive In Your Email Design

Tuesday, September 8th, 2009

refresh_01_optin_croppedHow long has it been since you spent some quality time updating your email template design? Is the spark beginning to fade a little? Even if you’re not ready for a complete redesign there are ways you can spice it up so that your readers eyes don’t begin to wander or glaze over.

Here are 5 ways to keep the magic alive by updating the design of your email template.

(more…)

Plain Text Emails: Half the Battle

Friday, August 14th, 2009

‘Designing’ plain text emails is as important as designing html emails.

Many mobile email readers and some web-based ones default to a plain text version of your message. It is imperative that your email campaigns provide a plain text version of your email that is formatted for scanning and readability.

The plain text representation does not have to be a blob of text with no discernible structure. Working within the limitations of the medium, it can have the form and beauty of an HTML email. Here are some tips for text message preparation:

  • Space out the sections of your message roughly equivalent to the html-based design. If there are logical breaks in your html email, make those same breaks in the plain text version.

    Email with 'In This Issue' content at the top and underscores to denote titles.

    Email with 'In This Issue' content at the top and underscores to denote titles.

  • Use underscores to divide sections of an email into logical pieces. Also use underscores to denote section titles or headlines.
  • Keep headlines to 50 characters or less per line.
  • Keep body copy to 70 characters or less per line. If your sentence is too long, make logical breaks to force a new line and avoid potential left to right scrolling issues.
  • If you have an ‘In this Issue’ section in your HTML message, put the title of the email at the top of the plain text version, followed by the ‘In this Issue’ content and finally, your message.
  • Add a leading http:// to all web addresses that don’t already feature it. This will oftentimes make the link clickable in a plain text message in many email clients.
  • Replace HTML-based characters with plain text replacements (I.E. ® with (R), ™ with TM) .

    Use (R) to replace ®

    Use of (R) to replace ® and asterisks as bullet points

  • Replace bullets with asterisks or other symbols
    • Bullet Point One
    • Bullet Point Two

    *Bullet Point One

    *Bullet Point Two

  • Replace any hex codes for punctuation with their plain text equivalent. (I.E. & #8220; & #8221; would become “”).

By providing attention to these details, plain text email recipients will appreciate the readability of their emails and respond accordingly. And you’ll appreciate the effectiveness that text version emails can provide to your overall email campaign results.

Designing an Email Newsletter: One Column vs. Two Columns

Monday, August 3rd, 2009

columns

One column or two columns? That’s one of the questions you need to ask yourself when designing an email newsletter. Should you present your information in one column of stacked content or two columns with the second column usually being a narrower sidebar.

There’s no easy answer. Both formats have their advantages so your choice will depend on content, platform and audience preferences.
(more…)

5 Tips for Designing Successful Emails

Thursday, May 14th, 2009

kiddrawingDesigning a successful email is not as easy as it looks. A common mistake is to think of an email as a mini-webpage or print brochure but that line of thinking will get you into trouble. Designing an email comes with its own set of rules and you need to approach it with some specific thoughts and methods.

The following is a list of 5 things to think about when designing your next email campaign. By no means is this all you have to think about but covering this ground will result in a marked improvement in the success of your campaign.

1. UNLEARN ALL YOUR TRICKS
If you’re a website designer then you’ve probably picked up a set of tricks using CSS (Cascading Style Sheets) that you’ve come to live by. Well, you’d better sit down for this: CSS doesn’t work in most email software. At least, not in the way you’re probably used to using it. Background images, positioning, padding, floats… You’re going to have to unlearn all of those tricks. To be sure that your email looks the way you intended it on all email browsers you’re going to have to go back to the old way of doing things. That means relearning tables and inline styles.

When designing your email, stick to a grid that can easily be cut up into a table. Be careful about how you make elements break out of that grid and be aware of the variable heights of HTML text and how it can affect adjacent elements. Use basic inline styles on your text (like: font size=”2″, remember that?).  And whatever you do, don’t use background images. They just don’t display properly in several email clients.

2. DON’T OVERDO IT
People don’t have a lot of time so you have to grab their attention. If one simple, bold photograph will do, don’t use three. If a concise headline and a paragraph of copy gets the point across, don’t make readers scroll to read multiple paragraphs. Plus, factor in things like image load time for people on slower connections (depending on your target audience these people do still exist).  It pays to keep your design simple. But keep in mind: simple does not mean boring.

3. THINK OUTSIDE THE BOX
If you follow the first two points too closely you might end up with a boxy looking email – a rigid grid structure; headers and footers a little too clearly delineated from the content; a boxy, uninteresting email. It doesn’t have to be like this if you get a feel for the space that the email is living in. Try not putting a border around everything and see how your content interacts with the white area around it. Try using rounded corners. Create graphics that contain some of the background in it so that the elements can give the appearance of breaking the grid without actually doing so. Set your header on white and your body copy contained below it in a colored box with the footer text floating freely on white underneath it. Or even set your entire email against a colored background. Any of these tricks can help give you a compliant, yet un-boxy, email.

4. BE REPETITIVE BUT DON’T BE REDUNDANT
As you’re probably aware, a lot of popular email browsers, like Outlook and Gmail, block all email images by default – leaving viewers with just the text, alt tags and their own free will to enable the images if they’d like. Therefore, you can’t count on the message to be conveyed solely through the images. Alt tags are very important in this case so don’t be afraid to pack them with pertinent info that may be missed by people that don’t load your images.

If your email contains a mixture of both text and images, it’s a good idea to utilize that text to repeat offers and call-to-actions that you already have inside graphical buttons. If a call-to-action is important, it’s worth repeating a couple of times in the email but in different contexts. Mention it with a nice underlined text link in the body copy. Throw it at the top of a sidebar. End the email with a shiny, red, clickable button.

5. WHERE IS THIS ALL GOING?
Though designing an email may be smaller in scale than designing a website it is still a project that has certain goals in mind that you need to consider.

As a designer, you’re orchestrating a dialogue with a reader. What is the ideal end result of that dialogue? Is your email meant to entice readers to click to a website? A landing page? A sign-up form? Or is the email itself the final destination containing a printable coupon or a newsletter with useful information that would be relevant to the reader?

These two results can require very different design approaches. It’s always important to keep in mind “Where is this all going?” Make sure that your design choices work towards answering this question.

…………………………………………………………………………………………………………………………

Photo used with a Creative Commons license courtesy of Yukon White Light

Understanding the Preview Pane

Thursday, June 21st, 2007

Designing your emails to work in a preview pane is a necessary step in your creative process. Many recipients (often the overwhelming majority) will view the email in the preview pane and determine whether or not to read the entire message based on the preview pane display.

The top 3 to 4 inches of your email message are critical. Within that space, you must provide an offer, promotion or relevant content in order to engage the recipient so they’ll read the entire message.

Why is the preview pane so important? Here are some statistics about preview pane use:

    1. 69% of at-work email users view emails in their preview panes.
    2. 80% of at-work users in the US rely on Outlook or Outlook Express, which offer preview panes.
    3. 38% of online consumers now use preview pane ‘capable’ email clients and 26.6% of them use preview panes.
    4. 75% of email readers who use the preview pane use it in a horizontal format and most often see either 4-5 inches deep of content (44%) or 2 to 3 inches (41%).
    5. Vertical-pane users see more content, but there are fewer of them (25% of all preview-pane users). Pane widths used most often by this group are 4-5 inches (46.9%) and 6+ inches (26.5%).
    6. Nearly half of email readers (49%) look at just the first few lines they see in the preview pane to decide if they want to continue reading the message. 19% said they immediately delete messages if insufficient information is displayed.
    7. The sender’s name and/or address remains the most important factor readers look for in the preview pane when deciding whether to read further or open the email (60%), followed by the subject line (54.3%), the headline (53%) and any teaser copy (30.3%).

Sources for Stats 1-3: MarketingSherpa (2007); for stats 4-7: eMarket2.com (2007)

Whether your emails are sent to professionals or consumers, the preview pane plays a vital role in the success or failure of your campaign. You must test your emails to see how they look in various preview panes. Optimize your layout to take advantage of this space and reap the rewards from a well-formatted email!

Designing Great Emails — 10 tips

Sunday, April 1st, 2007

Most companies send frequent email campaigns, but many don’t consider their design and layout in terms of how recipients actually receive their message. Most recipients view their email in software that has preview panes, and most people do not see the entire email upon first glance. Additionally, email software may turn off images and disable links by default, thereby creating a very non-compelling email from a visual perspective.

Some tips for designing a great email:

  1. Use Images to Enhance, not Deliver. Much of the latest email software does NOT show images in the default view. Recipients must actively elect to “View Images”. Therefore, you cannot rely on images to deliver your email message. Use descriptive text to get your message or offer across, and support this copy with relevant imagery. Never use images for important content like headlines, links and calls to action. And if you do use images, use ALT text to provide descriptive text for those who cannot see the graphics.
  2. Get to the point in the top 3 inches. Because of preview pane use, many recipients will only see the top 3 to 4 inches of your email. You need to get your offer or key message across in that top-most space or risk losing the interest of your readers.
  3. Use Friendly Fonts. There are only a handful of fonts that work on both Mac and PC computers. You must use these fonts when designing an email or risk having your text appear in a font you didn’t intend. It’s best to stick with Arial, Helvetica, Times, Times New Roman, and Courier. Other options that work cross-platform include Palatino, Garamond, Bookman, Avant Garde, Verdana, Georgia, Comic Sans, Trebuchet MS, Arial Black and Impact.
  4. Keep the width in check. Most email software includes a preview pane, so the area for displaying the email is less than the overall width of your screen. Subtracting the preview pane area leaves 600 pixels in which you can display your message. So keep your emails to 600 pixels (or under). Otherwise, your recipients will have to scroll horizontally to view your message, making for a frustrating experience.
  5. Keep Layout clean and simple. Clean, easy-to-read emails nearly always outperform heavily designed messages. In addition, complex tables and aligned images may not display properly in several email clients, so a simple, clean approach is usually the best option for email design.
  6. Get to the point ASAP. Readers want to get to the point of your message immediately, so provide key information right away and draw the focus of the attention to your main offer or message.
  7. Concise and Precise. By nature, an email message should be a brief, quick communication. Emails that go on and on run greater risk of immediately being deleted then those that get their point across immediately. If you need to provide a lot of information, link the readers back to your web site.
  8. It’s not the supermarket…. Loud colors draw attention in the supermarket, but you’re not in competition with other emails when a recipient is viewing your message. Keep your colors professional and appropriate, and limit the use of loud, aggressive color palettes.
  9. Keep file size in mind. The faster your email loads, the faster readers will see your message. Even in today’s broadband world, it may take a couple of seconds for large graphics to load in your message. Using graphics sparingly and compressing images properly will create a lean message that will be instantly viewable on high or low bandwidth connections.
  10. Test, test, test!. Yes, testing is probably the one thing that we all should do better. Test your emails in different email software and test them using different views (in horizontal and vertical preview panes, for example). Also test with images on and off. By testing thoroughly and adjusting for various issues, your email campaigns will deliver better results and return more value to your business.

8 Rookie Mistakes in Email Marketing

Saturday, March 24th, 2007

Over the past few years, email marketing has established certain best practices and standards that many industry professionals use on a daily basis. But many new marketers may still not know the best and most successful ways to produce email messages.

Here’s a list of the 8 most common rookie mistakes, and how to avoid them.

  1. Using too many graphics. A common mistake that many marketers make is putting too much of the necessary email information into a visual image. Graphics should only be used to enhance your email message. The important information (offer, promotion, main message, etc.) should always be text. Many recipients can not see graphics unless they turn them on, so your artwork may not be seen by many of your recipients anyway. So keep the valuable information as system text and only use images to create visual impact.
  2. Not planning for the preview pane. Remember that many recipients will only see your email message in the preview pane before deciding whether to read or delete it. So keep your logo, the email offer and any engaging information at the very top of your email so that the recipient will open the full message.
  3. Using cascading style sheets (CSS). Email software is different from web browsers. Many email programs do not understand CSS and will not use it when it renders the HTML email. So program without it. Instead use inline CSS to format your text, or just use straight HTML.
  4. Using Javascript, Active-X or Flash. Javascript, Active-X and Flash code is blocked in almost all email software. So don’t try to add forms, use animated content or launch windows from your email, as they won’t work. And in many cases they may keep your email from being delivered at all.
  5. Constraining text within a set space. Trying to place copy into an exact placement in an email will hardly ever work. Every email client will render HTML a bit differently, and your operating system, email software, personal settings and available fonts all impact how your text will display. So plan for your email text to have room to expand and don’t limit it to a set space. Also, don’t force line breaks, or you may have awkward line breaks and text formatting.
  6. Using copy that triggers spam filters. Make sure you don’t use the most common spam keywords. Don’t use all caps or overuse exclamation points.
  7. Not testing in a variety of email software. Everyone should set themselves up with the free email services offered by AOL, Yahoo! Mail, Gmail and Hotmail and make sure they have a version of Outlook to preview test messages. It’s also good to check your email on a Webmail account and maybe even a mobile device (Blackberry or Treo, for example). Leave the default settings and see how your emails look when they arrive. You might be surprised to see how some email software will mangle your HTML, even when it looks great in a web browser.
  8. Rushing campaign delivery Mistakes are made when proper coding and testing procedures are not in place. Leave time for planning, development, testing and approvals to ensure your campaigns are mistake-free.

If you’re new to producing email campaigns, these best practices will help you eliminate some of the most common mistakes made by novice marketers. Through experience and lots of testing you’ll get the hang of what kinds of code and layouts work best, and how much time you need to turn around a successful campaign.