Home > Blog > Broadcast

Posts Tagged ‘css’

5 Solutions for Accurate Email Rendering

Tuesday, August 24th, 2010

Last week we reviewed why All Email Clients Are Not Created Equal and why various email clients display your email messages differently than others. This week we look at several things you can do to maintain consistency in your email message display. This is not meant to be a comprehensive list, but identifies several solutions you can implement in your email campaign development.

5 SOLUTIONS FOR ACCURATE EMAIL RENDERING

1. TABLES AREN’T JUST FOR THE DINING ROOM
Use tables when building an HTML email because CSS elements such as position and float are not supported across all email clients.

2. THE LATEST, IS NOT ALWAYS THE GREATEST
HTML code for emails is old school. Emails should be built under an HTML 4 Transitional doctype and need to be validated.

3. CSS – CAN’T STYLE SHEETS
Most email clients will likely ignore any CSS styling unless it’s done inline. Yeah, yeah… it’s a pain if your client decides they want the text to be grey and not black, but coding inline CSS for email is a fundamental technique for ensuring consistency.

If you need to style single words, then use the <span> tag. It is an inline element and can be used not just for coloring elements or increasing the text size, but also for positioning elements above or below content.

You may also want to include a <span style=”color:#yourcolor”> inside an href as some email clients have default link styles that override your link color.

4. BACK THAT [IMG] UP
The background-image property of an element is supported by roughly half of all email clients. If you’re going to use background images, remember to provide a background-color just in case.

5. TOO MUCH IS JUST ENOUGH
Specify height, width, alignment, alternate text, title, country of origin, denomination, marital status… okay you get it. You should always be as specific as possible when coding email so that nothing is assumed by an email client’s rendering.

These are just some of the most common issues our teams run into while coding emails for our clients. What are some of the issues/remedies you’ve encountered?  Share your expertise with our readers by posting your comment below!

Tags: , , , , ,
Posted in Broadcast Blog | No Comments »

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.

Tags: , , , , , , , , ,
Posted in Broadcast Blog | 1 Comment »

10 Tips for HTML Email Programming Success

Thursday, December 3rd, 2009

HTML coding for emails is tricky; inboxes are crowded, and attention spans are short.  So, it’s important to get your email–and email coding–just right.

  1. Appropriate Design. The design of your email must be idiomatic for the medium. HTML/CSS support among email clients is rife with pitfalls. Know what is and is not possible.
  2. Target Email Client Support. In designing the email, you walk the line of email design versus client support versus spam score. Too advanced design will have a smaller email client support. Heavy images will increase spam score. Wider email client support requires simpler design. More text, less images will improve deliverability.
  3. Plan First. Mock up your entire HTML email, from the header at the top to the legal copy at the bottom. You can use a previous email that you created or one you received recently from another company as a model.
  4. Maximum Width and Height. The email header shouldn’t be too tall – remember that some users may see only the header in the preview pane of their email clients. 200 pixels high should be the maximum height. Emails should never be more than 600 pixels wide.
  5. Love Your Text. Use graphics sparingly. Whenever possible (other than, say, logos), put text in HTML. Remember, many emails are delivered without images, so readers will see only the text. Text formatting is one of the most important factors in programming a successful HTML email.
  6. Be Friendly, Be Social. Always include social media links, view online links, as well as a “forward to a friend” links in your emails.
  7. Lowest Common Denominator Programming. Email clients are the dummies of HTML rendering. Many desktop clients use inferior HTML rendering engines. Web-based clients restrict what HTML and CSS you can use in order to keep your email’s HTML from interfering with their GUI. No floats, no margins- nothing more complex than tables.
  8. Don’t Use Background Images. Background colors are fine, but background images are problematic in some email clients, especially Outlook.
  9. Specify Height and Width. Always add the height and width to images to ensure that the blank placeholder image doesn’t throw your design out of proportion. It’ll also help retain proper formatting during loading so your email doesn’t “jump” when the images load in place. Always specify the height and width of <div>s, <table>s <td>s, etc.
  10. ALT Attributes. Put ALT attributes in all <img>s. Users will see no images until they click the load images button in their email client. The ALT text will be visible, however.
  11. Specify Font Settings in CSS. Do not use <font> tags anymore. They are not supported in all email clients. Place them in the <style> attribute of the parent HTML entity. For segments of text, use <span>.
  12. Specify CSS in Style Attributes.CSS must be programmed in-line (stated within tags using style=”your styles”) Web-based email clients ignore most of what’s in the HEAD of your HTML. <style> declarations should be avoided as web-based email clients ignore those definitions to keep the client’s GUI CSS declarations intact.
  13. Test, Test, Test How do you get to Carnegie Hall? Practice. Test your emails. Set up test accounts with every online email program (such as Gmail, Hotmail, and Yahoo! Mail). Set up local email programs (such as Outlook and AppleMail) on your in-house computers. Send them to multiple email programs, use Litmus or similar programs, ask friends, and proofread. Then do it all again, then send your email. Also test after any change, no matter how small. Your change may have hit an email client’s quirk.

Paying attention to these simple programming rules may mean the difference between an undeliverable email and a successful campaign!

Tags: , , , , ,
Posted in Uncategorized | 2 Comments »

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

Tags: , ,
Posted in Broadcast Blog | 3 Comments »

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.

Tags: , , , , , , , ,
Posted in Broadcast Blog | No Comments »

Outlook 2007: Understanding the Latest Changes

Monday, February 26th, 2007

With the release of Outlook 2007, email marketers face new challenges in the design of their marketing messages. Outlook actually takes a step backwards with HTML email rendering, so emails now have further limitations and require additional testing to ensure proper display.

The lowdown is that in Outlook 2007, HTML email will be rendered using the Microsoft Word HTML engine. Previous versions of Outlook used the Internet Explorer engine. The Word engine is predictably much less robust, and lacks features that were supported years ago in the IE engine.

Some important changes to understand:

  1. No background images and colors. Background items are stripped out or inconsistently supported in Outlook 2007.
  2. No animated GIFs. Animated GIF files will not animate. They will remain static on the first frame of the animation.
  3. ALT tag changes. Preceding your ALT tag you’ll find the text “Right-click to display images Outlook 2007 has disabled…” so your ALT copy may be pushed out of view.
  4. No CSS (Cascading Style Sheets). Using CSS was not recommended before the release of Outlook 2007, and as the new release does not support this feature, CSS should definitely not be used when coding emails.
  5. Reduced standards compatibility Because the “new” HTML engine in Outlook 2007 is actually older than the one it replaced, it doesn’t have the benefits of recent bug fixes. So even some relatively simple HTML code may not display correctly.

The decreased HTML rendering abilities of Microsoft Word means email design techniques that looked fine in Outlook 2004 (or other email clients) may not look good – or be displayed at all – in Outlook 2007.

So you may be asking, “How soon will Outlook 2007 impact my email campaigns?” Early analyst results indicated a slow first year adoption rate of only 15% of PC users (source: PC World) compared to the first year conversion of only 12-14% of PC users for Windows XP. Yahoo News reported “initial results indicated the adoption rate was about 4% less than it was for Windows XP”. So rushing changes to your template and campaigns is not required, but starting to address the changes required by Outlook 2007 is in your best interest.

As always, the most important thing you can do to ensure consistency across all email clients, Outlook 2007 included, is to design your emails for best practices, and then test your message in as many email applications and web-based services as possible.

Tags: , , , ,
Posted in Broadcast Blog | No Comments »