HTML Email Marketing Guide

HTML EMAIL MARKETING GUIDE (800) 920-7227 | www.pinpointe.com

@ HTML EMAIL MARKETING GUIDE

Tips To Improve Your Email Design and Response

http://www.pinpointe.com


LET’S GET STARTED!

Many email marketing products like Pinpointe include a WYSIWYG

+ HTML editor and templates so you can easily design cool-looking

HTML Emails. Before getting started though, there are a few very

important factoids that all email designers need to know.

Web developers should note that designing HTML for the Web and

designing for emails is different. Most HTML features that have been

added in the past 10 years are supported on a limited basis at best

by most email clients. For example, the email clients Outlook, Gmail,

Hotmail.com and Yahoo.com are severely restricted in the HTML code

and CSS styling that they support and display correctly. Microsoft

Outlook 2007 only supports 40% of HTML codes; Gmail supports

about 45% and Yahoo.com supports most mainstream HTML code.

Add to the mix a wide range of email clients and mobile devices

and you can see that getting your HTML email design to display

correctly can be a challenge.

Although many web designers like to use cool stuff like flash, graphics,

java script and external CSS stylesheets, most of these features are

not supported in email clients. If not done correctly, poorly designed

emails will reduce response rates and delivery rates.

Get Tips to Improve Email Response Rates - Click To View Webinar

Read on for a handful of valuable tips

to help email marketers avoid email

design pitfalls and potholes.

http://www.pinpointe.com/blog/webinar-email-marketing-tips-to-improve-email-responses

http://www.pinpointe.com

https://twitter.com/pinpointe

http://www.linkedin.com/company/Pinpointe

https://www.facebook.com/Pinpointe

http://feeds.feedburner.com/Pinpointe-News


DECEIVINGLY DIFFICULTDid you know that 4 of 5 HTML emails are not “W3C compliant”? (That is, the HTML is not correct, compliant valid HTML code.) In many

browsers, this causes an email to not display properly and makes the message undeliverable, especially with MSN, Hotmail and Yahoo.

Why? One hack that spammers can exploit is to use invalid or broken HTML in order to hide their actual email payload message. So, if you do use HTML code in your messages, you should plan to take the extra time (or pay a designer) to get it right.

KEEP IT SIMPLEHTML-formatted email is best when it is simple. Extraneous images, overly complex graphics and complex table layouts all increase the

chance of making mistakes in your HTML code, which is also a flag to many SPAM filters. Embedding too many graphics and rich media

also bloats the size of your email, which isn’t good either. Of course, designs that are more complicated are also more likely to display

incorrectly in multiple email clients.

As we will discuss in more detail, not only do email clients support limited HTML, they do

not support external “CSS” or Cascading Style Sheets, which is considered ‘best practices’

when designing a website.

Know what email clients are used most commonly by your recipients and design to the ‘lowest common denominator’. For Business to Business (“B2B”) customers, that will usually be Outlook 2007/2010 and beyond since Outlook is the second least HTML-capable email client on the planet, just behind Lotus Notes v6 and earlier.

Achieving pixel perfection in all email clients is not realistic except for the simplest of email designs.TIP

TIP






We all want our emails to look inviting and enticing, but there are many features that email clients (especially Outlook 2007, Outlook 2010 and

beyond, Gmail (including Google Enterprise Email and Lotus Notes) simply don’t support at all. Some of these are blocked to improve email security

and to reduce the likelihood of exploiting email. Avoid including any of the following:

• Forms. Forms don’t render properly in most email clients.

• Frames. Very few email clients render frames properly or at all.

• Image maps. If you really want to produce an image map-like ‘experience’, you’ll need to slice up the graphic images and then add links to

each image piece.

• Flash, animated GIF images. Outlook 2007/2010 for example doesn’t support Flash at all and it you attempt to use animated GIFs, only the

last frame if the GIF image will be displayed!

• CSS positioning or ‘float’ styles. As noted earlier, many email clients ignore positioning styles and FLOAT directives, so save yourself the

frustration and avoid them.

• Javascript. JS will simply be stripped before it hits the recipients’ in boxes.

• ActiveX, PHP, ASP. Any programming code will be stripped by email clients for security reasons.

• Images as bullet points. Outlook 2007 and beyond won’t render the bullet point images.

• Embedded video. It won’t work in almost all email clients, except Apple email clients.

HTML STUFF THAT JUST DOESN’T WORK

Learn how to simulate embedded videos - Click Here

http://www.pinpointe.com/blog/embedding-video-in-email-overview






If you’re going to send HTML emails, here are some coding tips to help improve the likelihood that your

email will look the way you intended and will be read.

POOR RENDERING KILLS DIALOGUEThe Email Experience Council studied a sampling of 1,000 emails from both B2B and B2C customers and

found that 21% of the emails appeared completely blank while 28% showed relevant content but did

not have any working links.

DON’T BE SLOPPYHere is another incentive to make sure your HTML code is “clean”. Spammers are sloppy and SPAM filters know it. So, don’t be sloppy.

Some spam filters will punish you for sloppy HTML code (like, forgetting to close those pesky table, font or paragraph tags.)

BEWARE OF MS WORDMicrosoft Word seems like the logical tool to design or prototype your email design. Unfortunately MS Word creates

terrible, bloated and almost always, erroneous HTML code. When you innocently paste this into your email design

tool or email editor, the corresponding HTML source code will invariably be terrible. Note that some HTML / WYSIWYG

editors have a ‘Paste from Word’ tool which strips out most of the Microsoft HTML code junk. If you have this – use it.

AVOID EXTERNAL AND EMBEDDED CASCADING STYLE SHEETS (“CSS”)You know all that cool CSS stuff you (or your marketing team) uses when developing websites? It doesn’t work in emails. CSS or “Cascading

Style Sheets” are used by web developers to consolidate all style information into a separate file (or into a separate style block within an

HTML file). Virtually all email clients will strip out or ignore external style sheets. Gmail will ignore your external CSS style sheet and it will

strip your embedded style block. Therefore, you should avoid using CSS style sheets – move CSS styles in line instead.

HTML EMAIL CODING TIPS






As noted earlier, an alternative to using an external style sheet is to create an embedded <style> section within the head or body of your html email. Unfortunately, this doesn’t work for many email clients either since Hotmail, Yahoo and others will ignore your well-crafted style definitions if they are in the <head> section, whereas Gmail (and any business that is using Google’s email services), completely strips the CSS style block from your HTML email regardless.

The most reliable approach for email styling is to use inline styling. If you rely on your web development team or an agency to design your emails, just give them this simple tip: Code like its 1999! Here is an example of an embedded <style> Section – so you know what to check for in your HTML email design:

And here is an HTML code snippet that would be ‘inlined’ to achieve the same result:

Here’s another example of a paragraph using inline styling to set the font type:

Learn about dealing with CSS styles in email - Click Here

CSS STYLE SHEET SOLUTION: MOVE CSS INLINE

If your design team has delivered an HTML file with an embedded style block, the good news is that the process of taking an html file with an embedded style sheet (aka style block) and converting it into an inlined version can be automated. Pinpointe’s email in box preview feature will help with this process and show you exactly how your email will display with images blocked and improve your design accordingly.

When declaring the color property in your CSS, some email clients don’t support shorthand hexadecimal colors such as “color: #f60;”. Stick to the longhand approach for the best results anduse“color:#ff6600”.

TIP

http://www.pinpointe.com/blog/css-styles-html-email-design






Checking the appearance and deliverability of your email campaign for several email systems can be a time sink because email clients are full

of nuances. For example, Gmail and Outlook support less than 50% of valid HTML code. People also read emails on a wide range of devices,

from large desktop monitors to mobile devices. This makes designing an email that will display correctly in when it hits the in box, extremely

challenging. Pinpointe’s interactive, email campaign previewer saves hours of design and debugging. Their cloud-based services render all your

previews with 100% accuracy in less than a minute for 50+ email clients – including the top mobile email clients. This feature also offers tips to

help you debug your html code! Check it out now - Click Here.

PREVIEW YOUR DESIGN

Preview of Outlook - Firefox 21 (Mac)

Preview Summary

http://www.pinpointe.com/products/product-tour/email-campaign-previewer






Each email client has its own HTML ‘rendering engine’ – which means that each email client displays HTML a bit differently. Email clients including

Outlook and Gmail don’t consistently support properties like float, setting margins and padding. As a result, the best bet when designing HTML

emails is to lay out a ‘page’ or email using nested tables for the layout and positioning of your email. Table nesting will give you more consistent

results across email programs.

For example, to create a two-column newsletter-style email, create a table for the header, a table for the content section and a table for the footer.

Then use HTML table attributes to control how the tables are displayed. Finally, wrap these three tables in a container table and set the width to

100%. The diagram below shows how this looks – we have a ‘container’ table that has a table for the header, a table for the footer, and a table in

the middle for 2 columns of content. Note there are *3* columns for this table – a thin table cell is used to create the gutter between the two columns.

LAYOUT WITH HTML – USE TABLES






SET WIDTHS IN EACH CELL, NOT IN THE TABLEContinuing with the previous example, when combining TABLE widths, TD widths, TD padding and CSS padding into an email, the final

result is different in almost every email client.

Be sure to set a cell width for each cell in the table because the email clients will not reliably figure out a default width. Also, avoid using

percentage-based widths (except for the outer ‘container table’.) Clients like Outlook 2007 don’t respect them, especially for nested tables.

Stick to setting the width explicitly in pixels. If you want to add padding to each cell, use either the cell padding attribute of the table or

CSS padding for each cell, but don’t combine the two.

SETTING BODY BACKGROUND COLORSSince many email clients strip your HEADERS and

BODY tags, assigning a background color in the

BODY or HEAD tag as an embedded CSS STYLE

section is pretty fruitless. To work around this,

wrap your entire email with a 100% width table

and give that a background color like this:

The most reliable way to set the

width of your table is to set a width

for each cell, not for the table itself.






BACKGROUND IMAGES IN TABLESUsing background images is very popular for websites and to some extent emails. However, there is so much inconsistency in the way email

clients display background images, that it is best to avoid background images in tables. Outlook 2007 / 2010 and beyond for example, do

not support background images in tables.

If you still want to use background images, always provide a background color style to display instead. For example, if your design has a

background image that is mostly blue, set the background color to a similar color for email clients like Outlook 2007 and 2010 that will not

display your background images.

AVOID WHITE SPACE IN TABLE CELLSWhere possible, avoid white space (spaces, table, carriage returns) between the <td> tags. Some email

clients like, Yahoo and Hotmail can add additional padding above or below the cell contents in some

scenarios, breaking your design for no apparent reason.

Keep any graphic images to a

maximum of 600 -720 pixels wide.

WIDTH MATTERSKeep any graphic images to a maximum of 600 - 720 pixels wide. The message

display window of most email clients is about 600 pixels wide and keep in mind

that many people now view their email on a mobile browser, so using anything

wider means that your recipient needs to scroll back and forth in order to display

it. Larger screens mean the appropriate width is expanding slightly but if you

want your content to be seen, the best bet is to keep it within 600 - 720 pixels.

WHITE SPACE








By default, Outlook, Yahoo, Gmail and other email clients DISABLE image display by default,

so your recipient will have to right click or explicitly opt to display images. There’s about a 70%

chance that a nice, handcrafted, HTML graphical email will look like a random juxtaposition

of red ‘Xs’ or blue boxes with question marks in them when it’s received.

When designing your email, start by assuming that your recipient will have image display

turned OFF. Next, assume that 105% of your recipients will be too lazy to enable image

display. Then ensure that your email conveys the important information through the text

of the email. We suggest an 80/20 rule of thumb: 80% text to 20% images in your email.

With this in mind, here are the essentials to remember when using images in HTML email.

DEALING WITH IMAGES IN EMAIL

IMAGE BLOCKING = X-RATED CONTENTImage files aren’t actually sent as part of an HTML email (Note - It is possible to send the images along as part of a MIME attachment but this is rarely

used.) Images are hosted on your server, or ours, for free, if you are a Pinpointe customer. When your recipient decides to view the images, the

images are downloaded. So be sure to use absolute, fully qualified paths for any images.

For example:






Here’s how one hand crafted HTML looked when I received it. I found it in the delete bin when I was looking for an example:

BALANCE COPY AND IMAGESCreate a layout that ensures your text flows around the images in such a way that your readers

can focus on the message instead of the red ‘X’s and blank spaces. Along the same line,

avoid a format layout that starts off with a banner image, which will create a big dead spot at

the top of the message and client’s preview pane when image display is disabled.

It is also important to balance the amount of text vs. graphics in your email for SPAM reasons.

Many email filters produce a SPAM score based on the ‘graphic to text’ ratio. This SPAM-

blocking technique was developed because earlier versions of SPAM firewalls filtered on text

content, but then crafty spammers started creating messages that were one really big image.

Most SPAM filters now rank the text to graphics ratio as another spam rating mechanism.

IMAGES COPY






Stick to fixed cell widths to keep

your formatting in place with or

without images.

USE ALT-TEXT TAGSHTML allows you to attach descriptive text tags to graphics images. The text is displayed when the

graphic is not or cannot be displayed. If the image IS displayed, the ALT text will be displayed when the

cursor is hovered over the image. Either way, you win. Note that Outlook 2007 / 2010 and beyond do not

display ALT text; however almost all email clients do, and using ALT text does not cause any problems

with Outlook, so we highly recommend using ALT text.

Here’s how to add ALT tags. First, open the Image tag (IMG). Add the ALT-text attribute. The HTML code

will look like this:

SIZE IMAGES PROPERLYIt is best to properly size images before sending. We’ve all received emails that have embedded images that are 800 x 600 but are displayed in the

email at a resolution of say, 200 x 150. This occurs when the image dimensions are set to 200 x 150 in the email. It displays properly in most (but not

all) email clients but when the email is opened, the user has to download an image file that is 16x bigger than it needs to be.

AVOID SPACER IMAGESWhile the combination of spacer images and nested tables was popular on the

web ten years ago, image blocking in many email clients has ruled it out as a

reliable technique today. Most clients replace images with an empty placeholder

in the same dimensions, others strip the image altogether. This can lead to a poor

first impression for many of your subscribers.








ALWAYS INCLUDE THE DIMENSIONS OF YOUR IMAGEIf you forget to set the dimensions for each image, a number of clients will invent their own sizes when images are blocked

and break your layout. Some email clients will ignore the dimensions specified in code and rely on the true dimensions of

your image, but we recommend setting the image size explicitly.

DON’T USE IMAGE FLOATSOutlook 2007, Outlook 2010 and earlier versions of Lotus Notes offer no support for the float property. Instead, use the align attribute of the .img

tag to float images in your email, like this example below:

If you’re seeing strange image behavior in Yahoo, adding the code align=“top” to your images can often solve this problem.

UNDERSTAND AND USE PREVIEW PANESMore than 70% of Enterprise customers use Outlook, which displays a 4 line preview when your recipient is using the

‘Auto-Preview’ pane (most people do.) If the first thing in your email is a graphic or set of links to graphics images, then

the resulting display might look like this one below:






SETTING LINK COLORSSome email clients will overwrite your link colors with their defaults, and you can avoid this by taking two steps. First, set a default color for each

link in line like so:

Next, add a redundant span inside the a tag.

To some this may be overkill, but if link color is important to your design then a superfluous span is the best way to

achieve consistency.






MAKE SURE TO INCLUDE THE HTML AND TEXT VERSIONSMIME (Multipart alternative format) embeds both text and HTML within the same message, along with a header indicating that the content is multi-

part. Intelligent browsers will select the appropriate version of your email based on either their abilities (or lack thereof), or based on the recipient’s

preference (e.g. – preference to only receive text emails). So text-only readers will see a text rendering and HTML capable clients will see the HTML

version (subject to all the limitations described in the preceding pages).

ALWAYS RUN THE SPAM CHECKERAll in boxes now include content filter and a spam score of only 3 will start to get

some of your emails blocked. A score above 10 can cause as much as 30% to be

blocked. Always run your email campaign through a spam checker before sending.

Learn more on how you can instantly check your email campaigns for

SPAM issues with a single click - Click Here

MISCELLANEOUS TIPS

Spam filters will increase your spam score (i.e. - make it worse) if you do not include a text and HTML version of your email. About 15% of all people still set their preferences to display only Text emails (for security reasons), so don’t ignore them. Always include a TEXT version of your email – virtually all email marketing products like Pinpointe allow you to create the TEXT and HTML versions of your email.

TIP



http://www.pinpointe.com/products/product-tour/spam-checker






EMAIL LENGTH MATTERSThis tip applies to all emails, not just HTML emails. Short headlines work better than long ones. How short? Roughly speaking, your subject should

be under 50 characters and under 40 is even better, though trimming your subject line to 5 characters is probably counter-productive. While on the

subject of subject lines, make sure your subject is honest, truthful and doesn’t overpromise, or you’ll not only lower your open rates, you’ll potentially

start to do harm to your brand.

Below is a collection of bonus tips to keep in mind while crafting your HTML emails - to see more tips - click here.

• When sending a message, keep your value statement in text, not in graphics. By value statement, I mean the description of the call to action, the purpose of the correspondence, table of contents or reason for writing. It’s the ‘meaning of life’ for each message. And if your message doesn’t have one, it will probably ‘expire’ quickly.

• Locate the value statement above all other content and make sure it is left justified – i.e., don’t put a masthead or other images above the value statement.

• If you are using an image for your call-to-action (eg, a ‘Click Here’ button), make sure your call-to-action has text associated with it (see ‘using ALT tags, earlier).

• If you’re email is important enough to layout with pictures in HTML, then it’s important enough to post a copy on your website, and include a link to it within your email. That way, if someone receives the text version and does want to see the rendered version, it’s always a click away. Most email marketing vendors like Pinpointe do this automatically.

MAKE EMAILS MOBILE FRIENDLYNearly 50% of all emails are now opened on mobile devices. To increase higher response rates,

ensure your email design is optimized for mobile viewing and interaction. Mobile responsive email

templates automatically adjust to display correctly on mobile phones, iPads and desktop systems, so

your design renders properly on each devise.

http://www.pinpointe.com/blog/anatomy-of-marketing-email-design

http://www.pinpointe.com/products/html-email-templates






In summary, there is a time and place for HTML email correspondence, but the smart marketer will take into consideration design tips to maximize delivery rates, and include a balanced mix of Text and HTML correspondence.






Copyright ©2014 Pinpointe On-Demand. All Rights Reserved. Pinpointe, Pinpointe On-Demand and the Pinpointe logos, and trademarks or registered trademarks of Pinpointe On-Demand, Inc.

CONTACTING PINPOINTEPinpointe sales and support are available from 8 AM to 8 PM PST, M-F.

Phone: (800) 920-7227 or (408) 834-7577, Option #2

General Information: [email protected]

Sales: [email protected]

Twitter (Daily Tips): @Pinpointe

Facebook: www.facebook.com/Pinpointe

LinkedIn: www.LinkedIn.com/company/Pinpointe

Marketing Tips Blog: http://www.pinpointe.com/blog

ABOUT PINPOINTEPinpointe is a leading provider of on-demand email marketing automation software based in the heart of Silicon Valley, California. As former High

Tech B2B marketers, we’ve been in your shoes. Our team has a passion for helping B2B marketing professionals communicate with existing

customers, and target new prospects through behavioral targeting, improved segmentation and message personalization. Pinpointe offers top-

notch resources like informative webinars and a marketing tips blog that helps you to get the most out of your email marketing efforts and

become a successful marketer.

TRY PINPOINTE FREE

Try It Now - Click HereCreate & Send Email Campaigns

Send 1,000 Emails for Free No Risk, No Credit Card Required

http://www.pinpointe.com/email-marketing-resources

http://www.pinpointe.com/blog/

http://www.pinpointe.com/15-day-free-trial





http://www.pinpointe.com/blog/




Date post:	20-Aug-2015
Category:	Marketing
Upload:	pinpointe-on-demand
View:	765 times
Download:	1 times