HTML emails: the last word (until everything changes again)

Introduction

Here is everything I know about creating HTML emails. This is the most boring and most useful post I’ve ever created by far. This is the aggregate of a lot of research and my own coding and testing. The title is bold, I know, but the information is solid.

I’m new to all of this… how can this article help me?

That depends. If you’re not going to be doing any coding then this post will help you understand what kind of work has to go into HTML emails to make them consistent and, hopefully, effective. If you’re designing the emails but not creating them then you’ll have an idea of what you’re working with and what you’re allowed to do.

Why HTML emails?

HTML emails are preferred so they are more likely to be read. This is a bit subjective but the consensus on-line is that, as long as they are designed properly and sent responsibly, HTML emails are a great marketing tool.

HTML emails are, however, still hated by some so this is a case of “less is more.”

Emails from you are easily identified and can look similar to your home page. This allows for consistent branding across all mediums, if done correctly. More about this in the “style” section.

HTML emails connect users to the home page, literally through through links and visually through the layout and colors.

HTML emails are “cutting edge,” pardon the expression. They are impressive and colorful and are a major part of marketing campaigns in all industries. Sending out a properly-coded and carefully designed HTML email says that you’re current

HTML Emails Are Different than brochures

• Inconsistent across email clients instead of exactly the same
• Much less expensive to produce and create
• More difficult to get it “just right” (design limitations)
• Completely different medium and delivery
• Less mobile than email for most people
• Different timing (in the moment rather than later)

HTML Emails Are Different than Web Sites

• More email clients to consider than browsers
• Much less CSS support (mostly just text formatting)
• Also more difficult to get it “just right” (design limitations)
• Tables are recommended above CSS layout for emails
• Explicit code is the name of the game
• Less time and audience attention to get your message across

HTML Emails Are Different than text emails

• “Pops” better out of an email box
• More to consider than just the content (in addition to the content)
• Plain text doesn’t break down (plain text is as consistent as it gets)
• Accessibility concerns with HTML emails that don’t exist with plain text

The basics of HTML email design

• Different email clients do different things and it’s hard to predict and test for everything.
• Concentrate on the lowest common denominator and make sure the content layout makes sense.
• Assume that images will be blocked and layout will break.
• Make sure the emails degrade gracefully. This means that alt tags need to be used, images should be used sparingly and table layouts should be as simple as possible.
• More time and effort should go into the motivation and the message rather than the visual design.
• Design is not a substitute for a relevant message.

Understanding email campaigns

Permission is king. If you didn’t get someone’s permission before you sent the email then it is probably considered spam. There are a lot of companies out there just yelling their name and products and, at best, they’re getting lost in the chaos. At worst, they’re generating negative attention for themselves. When it comes to marketing, bad attention isn’t just attention, it’s a brand killer.

Quality above quantity of recipients. If you have a list of 5,000 people that may not have heard of you before and might have interests that match your product, you have little more than a bullhorn and a crowd. If you have a list of 150 people that know what you’re offering and want to hear more, you have a captivated audience. It’s easy to assume that all people need to hear is what you’re offering and they’ll come running. The fact is, if there’s any sort of negative connotation to your brand (for example, showing up unnannounced in their email box), they’re not going to want what you’re selling. Strive for targeted lists of interested people instead of just bigger ones.

At the very least, your emails need to be relevant to your recipients. If someone signs up for a specific newsletter or a specific notification list, that does not mean they want everything that your institution can send out. Send less emails with better, more relevant content and you’ll see better conversion rates. In the same vein, if you can personalize emails, do it. Most HTML sending services allow you to input the names of your recipients (along with other variables) so take advantage.

Mass HTML email senders have been likened to a “loaded gun.” First, there’s nothing stopping you from spamming thousands of people, on purpose or accidentally. All it takes is one bad batch and your domain might get blacklisted from your recipients’ email cients. This is definitely a bad thing; getting blacklisted from Hotmail or Gmail means you’ve lost the ability to send to millions of people. The responsibility to send out relevant, targeted emails to the right people is yours.

A good thing to keep in mind, along with the other points so far, is that these bulk emails (or any emails) cannot be recalled once they are sent. It’s easy to shoot off an email to a co-worker or a friend and correct yourself later but it’s not possible with big email campaigns.

In the same vein, it’s important to test your emails in several different email clients. We test with Outlook 2007, Yahoo, Gmail, Hotmail, and the Windows Mobile 6 included email client. There’s no substitute for checking different email clients and your recipient list should give you a good idea of where to look. If you have home accounts with Cox or AOL, try these as well if you can. The best you can hope for is that all of the styles, images, and table layouts come through OK. The worst you should have is a broken design but text content that shows up legibly.

Last but not least, make sure you are up to date on the CAN-SPAM regulations. In a nutshell, here they are from the FTC website:

• It bans false or misleading header information. Your email’s “From,” “To,” and routing information – including the originating domain name and email address – must be accurate and identify the person who initiated the email.
• It prohibits deceptive subject lines. The subject line cannot mislead the recipient about the contents or subject matter of the message.
• It requires that your email give recipients an opt-out method. You must provide a return email address or another Internet-based response mechanism that allows a recipient to ask you not to send future email messages to that email address, and you must honor the requests.
• It requires that commercial email be identified as an advertisement and include the sender’s valid physical postal address. Your message must contain clear and conspicuous notice that the message is an advertisement or solicitation and that the recipient can opt out of receiving more commercial email from you. It also must include your valid physical postal address.

Basic HTML elements used

p
span
img
a
table
tr
td

Basic tags used

style=
width=
align=
colspan=
href=
cellpadding=
cellspacing=

Basic CSS properties used

background-color:
border:
color:
font-size:
font-style:
font-variant:
font-weight:
letter-spacing:
line-height:
list-style-type:
padding:
text-align:
text-decoration:
text-indent:
vertical-align:
white-space:
width:
*font-family: this doesn’t work in gmail but there’s nothing wrong with adding it for the other clients.

HTML Email Layout

Tables determine the layout. If you are not trained in table design, good for you, you’re on your way to being a great web designer. You do, however, need to have a solid understanding of them to build HTML emails.

No head, html or style tags are used as these are often stripped out by the email client before viewing. HTML editors might add this and, while it won’t cause any problems, it should be removed. Keep in mind, the big client that strips these is Gmail. If you’re not concerned about styles in Gmail, it is ok to use this element but make sure it appears WITHIN THE BODY TAGS, not before.

Be sure to close all HTML elements! Use an HTML checker like the one in PSPad to find errors easily.<br /> - Wrapper table should be used with a 98% width if a centered layout or background color is desired. Content section is a nested table inside the wrapper table. For full-width designs or left-justified designs without a background color, the wrapper is not needed.

For 2 or more columns, the “colspan” and “width” tags must be used together. Remember the spreadsheet model and add as many columns as you need with the first row of cells. Again, make sure to add a wrapper table if you want a background color or you want the design to be centered in the window.

Design for the preview pane of email applications. That means you’ve got about 500, 600 pixels tops for your email designs. Most email windows do not take up the entire screen (do yours?) and some people intentionally make them smaller. Make sure your main content section is slim, under 600 pixels, and that your logo, tag line, or another “grabby” piece of content is near the top-left corner. Some email applications, like AOL, allow for about 150 to 200 pixels to make sure your content will appear.

Styling your email

Simple CSS is widely supported and can be used in all HTML elements with a style tag. This is called “inline” styling and is the best way to apply CSS to an HTML file being sent. This is what I mean by “explicit;” all styling cues are added to each element inidividually. To style two different paragraphs the same, the same style tag and CSS properties need to be added to both. Keep in mind, sometimes the body styles don’t carry over; stick to colors and minor “throw-away” styles in case this element is tossed out.

Some sources recommend CSS shorthand to cut down on file size while others say that it should be written explicitly. Declarations like “margin: 0″ are usually safe but it might be a good idea to spell out font declarations completely. This helps the design process down the line.

Use images carefully and correctly in your design. Pictures, icons, and headers are great but can easily become cluttered and bloat the size of the email. Turn down image quality and use images that enhance your design or draw attention where you need it. Also, never send an all-image email. Some email clients block images as a default so your message might be lost and/or might be marked as spam.

Make sure you always include the width and height in the image tag for every single image. This ensures the empty placeholder images don’t get stretched and completely throw your design. Also, store the email images on a web server, preferably in a folder separate from website images, for example, in /images/email not /images. And don’t delete them.

General notes

• link element not supported, style elements barely supported so use in-line styles to be safe.<br /> Since <style> elements are unstable, selectors are as well.
• 530px is a safe width for certain clients and certain preview panes (AOL in particular). Not including AOL, 600px is maximum.

Gmail notes

• Keeps only the HTML between the body and /body tags. Discards the rest.
• Removes any style element and its content, even if it’s within the body element.
• The font size is bigger in table elements, so you’ll probably have to force it with font-style
• Gmail removes CSS rules with the property height.
• Gmail removes CSS comments found inline.
• Gmail doesn’t allow the url() value and will completely remove a CSS rule that uses it.
• Gmail is one of the only email clients that does not use the font-family: property
• Images are blocked by default but alt= tags are displayed

Hotmail/Live notes

• Keeps only the HTML between the body and /body tags. Discards the rest.
• The style element and its content is preserved if it’s inside the body element.
• Hotmail will completely remove any CSS rule that uses a url() as its value.
• Hotmail removes CSS comments found inline.
• Hotmail does not block images by default but Live does

Yahoo notes

• Keeps almost intact the complete original HTML sent and puts it directly in a div. So if you had any of these in the HTML, they will be found in the middle of the Yahoo! Mail HTML: DTD declaration, comments, html, head, title, style and body elements, etc. But, the DTD declaration won’t be taken in consideration by the browser since it’s in the middle of the page, same thing for the title element;
• Will rename the body, meta and link tags xbody, xmeta and xlink, so they will be “disabled”. This means that no external stylesheet can be linked to the document through the link element.
• Be careful with style elements; when replying or forwading this message, Yahoo! Mail will convert your style definition as plain text and your declarations will appear in the message.
• Does not block images by default

Outlook notes

• Outlook support varies greatly across versions; older versions have better CSS and HTML support
  head, html, meta, style elements are removed.
• img alt= tags are removed so images that are not shown will not be replaced with text.
• 2003 and 2007 blocks images by default

AOL9 notes

• “preview pane” is extremely tiny. Make sure to design your emails to peek out enough from the preview pane.
• HTML code needs an extra line break or two after the final /HTML tag, or you’ll see weird “equals signs” in your email
• Blocks images by default, alt= tags are not displayed

HTML coding sources

MailChimp HTML email guide

How To Code HTML Email Newsletters

HTML Email Tips for Web Designers

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

Optimising CSS usage for email

A guide to CSS support in Email

Email marketing sources

Email Marketing Strategies – Email Marketing “Must Dos”

How To Build a Basic Email Marketing Capability

I learned something today

Introduction

There’s usually five hard ways to do something without any kind of guarantee of an available easy way. Sometimes there is an easy way, sometimes there’s just an easIER way, and sometimes there’s just hard ways. Realizing that some things just take hard work is an important step towards growing up (regardless of your numerical age) but it’s also the kind of thinking that can get you stuck. I’m a fan of hard work and, as such, sometimes I work a lot harder at something than I should. Case in point, the story I’m going to share with you.

I’m new to all of this… how can this article help me?

Approaching your technology problems can be daunting – especially if you know only one way to do things and that way is a P.I.T.A. When it comes to computers and the internet, it’s important to always keep in mind that there are probably 5 pieces of software that you never knew existed that do exactly what you need, 5 pieces of hardware that could solve one nagging problem, and a 100 people out there who are better trained than you are and are chomping at the bit to help you out (that’s me). All you have to do is keep your eyes open, your mind working, and your homepage on Google and you’re a step ahead of the rest.

Sometimes, there’s no need to swim uphill

So I know a guy with a blog. I built the blog for this guy. Blood, sweat, tears, and love went into putting together this blog. Then, even more bodily fluids went into typing and editing his blog posts to post on his blog on a regular basis. In the meantime, exponentially more effort went into editing, designing, copyrighting, and publishing his book. I was paid for most of it but, because the project was close to me, many hours flew by sans compensation (willingly of course).

He wrote a lot of material all at once and sent it over to keep me busy and have a “buffer.” This buffer was the only thing he would write for months despite my gentle insistence and cajoling. He said he liked to write but, in the end, if we actually like to do things, don’t we just do them? I like to write and, coincidentally enough, I end up writing a lot (here, at work, emails, etc). It occurred to me that maybe he wasn’t into this writing thing after all.

Still, I was working for him and if he wanted to write, well, dammit, I would do everything I could to make him write. So I bought him books about writing, wrote him blog posts about writing blog posts, and came up with a massive list of every possible industry topic he could write about. I kept (and keep) editing his buffer posts, every week posting less and getting closer to the finale of all of his earlier efforts.  I made him buy cards to promote his blog and his book, despite having very little left to post. I even added my own posts as the “administrator” of the blog talking about what I’ve learned and what to expect. In the end, I was working several hours a week on a blog that wasn’t mine for a purpose that I wasn’t clear on. I had stopped taking payments but kept trying to edit and post what was left. The idea started out so exciting and I was watching it peter out like a match in the rain.

New approach

This client had done radio work back in the day and, every now and then, reminisced about his days behind the mic. His voice is very calming. You can always hear his smile because he’s always smiling. On the phone or in person, he’s always wearing that big, friendly grin and telling you something to which you ought to be listening.

The idea of a podcast floated into my consciousness a few months ago but, in my head, it sounded like an expansion plan and I was not interested in expanding something that wasn’t going anywhere. The podcast idea wouldn’t leave my head, however, and today, after a rousing conversation about the matter, I just blurted it out.

“This blog thing just isn’t working. He should just do a podcast.”

And, with that, this blog thing was solved.

Despite what he says, at least for the time being, this client just doesn’t want to write. There’s no point in forcing something that isn’t happening. He has, however, had his ears open for a broadcasting gig hosting his own show on the radio without much luck.

A book and a blog, if it takes off and starts gaining attention, is just going to get more audience members for the blog and, at best, a great offer for a new book. For someone that finds it difficult to make the time and energy to write, this is a punishment in disguise.

If, however, he took this great wisdom he has, spoke it into a digital recorder, and emailed the final product to me, he’d never have to write another word in his life. The audio can be posted and hosted on the blog, submitted to iTunes, compiled and sold on a CD, or even be a spring-board to videos if he wanted. Not only that, if the audio broadcasts take off, there is the possibility of a book, sure, but it’s more likely that someone who knows what they are doing will want to keep him in the same format, the one that he’s succeeding at.

Exciting stuff

In the end, the solution to the problem was actually the expansion plan for the original idea. The middle point actually should have been the starting point. I kept trying to make something work that just simply wasn’t going to happen.

The way forward could be the one in your head, it could be the one in your friend’s head, or it could be the one that has not materialized yet. There’s no point pushing against a brick wall if, at the other side of that wall, there’s nothing you want. My mistake was not thinking down the road with the blog idea. I thought that, with a blog, he could go anywhere. But the blog was not only the barrier to entry, it wasn’t going to lead to anything better.

In the end, if you don’t know exactly what you’re doing and there’s not a big risk in taking your time, maybe it’s better to explore as many options as possible and see which one fits the best. If it sucks and sucks and sucks and you’re not getting anything out of it, chances are that you’re not going to continue doing it indefinitely (and that’s a good thing). Save your tenacity for the IDEA itself, not the execution. If you know what you’ve got is gold and it’s not going anywhere then you’re probably barking up the wrong tree. If I decided it was my calling to make hip hop beats, a blog about it probably isn’t the best way to go (though it might be). If I wanted to make money off graffiti art, it’s not likely that handing out fliers at the hot club downtown would get me anywhere (though it might).

There’s nothing wrong with trying something out… in fact, if you’re NOT trying out new things and exploring new markets, you’re definitely doing something wrong and probably selling yourself short. But you have to know when to bag it, when to try something else, when to stay true to your idea and just bark up a new tree. Staying true to yourself and staying true to your ideas means doing whatever is necessary. Plugging away over and over at something that isn’t going anywhere is doing a disservice to your talent and your product.

If you need some help trying to find a new tree, let me know.

One component of Josh Can Help’s website philosophy – Understanding

Introduction

One of the most challenging and interesting parts of what I do is bridging the gap between potentially confusing technology and people who are far removed from how it works. I think people intentionally avoid this massive gray area because of lack of patience, lack of interest, or inability (or no desire) to communicate properly. It can difficult to explain concepts like table-free design, search engine optimization, and digitizing art for print to people without the necessary experience. Despite that, it’s necessary for people who are promoting themselves or their business to understand these concepts on a basic level and realize how they can expland their work into new, expanding markets.

I’ve taught billing systems and wireless networking to customer service representatives, math and science to family members and classmates, and blogs and social networking to colleagues and clients. What I’ve found to be the hardest concept to get across to people is the proper way to design and implement a website. I’m not exaggerating; explaining standards-based, table-free, search-optimized design to people without any experience can be a painful process to all parties involved. Clients want to understand what they are paying for – explicitly – and the only way to make this happen is to explain why I do what I do and why they want me to keep doing it that way.

I’m new to all of this… how can this article help me?

Clients (those who need the design)

This post explains the very basic ins and outs of website design and why it can be such a pain in the butt. Are you confused why you were charged for three hours of time just to change a few words? Have you asked for what seemed like a simple change only to be met with a sizable estimate? In adding my two cents to the conversation, I hope to clear up issues like these for people who might be looking to understand the process a bit better.

Designers (those who provide the design)

While I’m relatively new to the discipline, I’ve been teaching people and promiting understanding since I first strapped on that inbound call center headset. Let me help you find the words to use so you and your client are on the same page. Use your knowledge, skill, and people skills together to show your clients exactly what you do and why you do it that way. The worst that could happen is you lose 15 minutes and gain some personal clarity.

Understand: Web design is it’s own discipline with it’s own subsets.

I have always known this but it took an article at A List Apart, one of the most reputable voices in web design, standards, and usability, to really solidify this in my head. To quote the article (to avoid unnecessary paraphrasing):

Web design is not book design, it is not poster design, it is not illustration, and the highest achievements of those disciplines are not what web design aims for. Although websites can be delivery systems for games and videos, and although those delivery systems can be lovely to look at, such sites are exemplars of game design and video storytelling, not of web design. So what is web design?

Web design is the creation of digital environments that facilitate and encourage human activity; reflect or adapt to individual voices and content; and change gracefully over time while always retaining their identity.

At the risk of flinging this topic from comprehensible to hopelessly high-concept, it is important to address the implicit abilities and obstacles of this very interesting medium.

Taking an idea for a website and moving it from concept to execution has an interesting middle step. This middle step, the one where you weight the benefits of making precisely what was visualized against the negatives of spending an inordinate amount of time building it, is something that designers are painfully familiar with but clients may not entirely grasp. It is quite simple to sketch an idea out on paper, somewhat difficult to translate this idea digitally, and very hard to build the exact product you had in mind to begin with. Maybe the technology does not exist, maybe you’re not sure how to build it, or maybe the idea was too complicated to begin with but, in the end, what is created never seems to exactly match what was conceptualized. Please keep in mind that there is nothing inherently wrong with this frequent occurrence.

There is another force at play here as well. In the end, even if you’ve created exactly what was on that bar napkin to being with, there is a chance (a good chance) that it just won’t look exactly how you thought or it simply functions poorly. It could be that all the artwork required to make the page look amazing makes the whole page load slowly. It could also be that the revolutionary way to navigate that you devised is not at all as intuitive as what you thought. Regardless of the reason, a perfectly executed concept does nothing to correct the errors that existed in the concept to begin with. While the “it just doesn’t look right” factor occurs in all segments of art and design, the “it doesn’t function properly” can only occur where interaction is happening.

Both of these factors work together to add unique facets to web design that threaten to destabilize the relationship between client and designer.

Clients

You don’t have to fully understand the internet and navigation and usability and optimization to understand why your designer tries to dissuade you from certain things. What you do need to understand is that your expertise in other fields does not translate directly to the web. Because something “looks” easy or “seems” easy does not actually make it easy to complete. Something as simple as content change or color change could require a lot of back-end work.

• If you don’t understand, do yourself and your designer a favor and just ask. If something seems easy but you are being told that it isn’t, ask her explicitly. Anyone able to make the changes should also be able to explain what they are doing.
• Get an estimate, even if it’s just a verbal agreement. Knowing up front that your image update is going to cost $200 might persuade you to approach the problem differently.
• Good web design takes time and, unless you can do it yourself, costs money. Making everything look right and function properly is an act of art, science, and patience. If you trust your designer, let him do what needs to be done and keep in mind that you’ll be glad you spent the money now rather than deal with fallout later.

Designers

You know what you’re doing and you’re as honest as they come so it can be downright insulting when someone questions your judgement. Still, what would you think if a contracting firm kept coming back for more money and more time on a remodelling job? Would you keep handing over money, no questions asked, or would you try to understand what is going on so maybe you can make an executive decision? It’s your job to patiently and effectively explain where the time and money is going so your client can budget effectively and potentially cease problems that get out of hand.

• Communicate well and often. If you think you might go over budget, say so. If problems are occurring, explain them. You might be used to guiding a project and making decisions but, when you’re on someone else’s time and money, it’s up to them. Give them all the information they need to make the right choice.
• You’ve heard of Always Be Selling (ABS), right? Well, for this post, it’s ABT, Always Be Teaching. You can never go wrong if you spend a little extra time sharing some of the knowledge you have. Don’t just say “the code was screwed so I fixed it,” explain what was wrong and what you did to fix it. This helps you by honing your knowledge and keeping you honest; this helps your clients to better understand what you do and showing them that you’re willing to give a little extra.
• While you might know the best way to do something, maybe the client has a different idea in mind. It can be painful to leave behind ugly code, deliver an unfinished product, or stop working on something that clearly needs more attention but it’s even more painful to fight against it. Explain the situation (#1), share the knowledge (#2), and leave your ego at the door.

Did I miss anything? What can clients do better to help designers understand the goal? What can designers do better to make the customer know the value their getting?

Letterpress cards cut, packed, and on their way…

Amazing work… this iPhone photo looks like it was from 1932:

Josh Can Help updates…

I meant to use this blog as a place to update information about my business and maybe some relevant personal stuff but I’m so boring that all I write about is work and coding! I’m a hoot! So, here’s what is going on with Josh Can Help.

Letterpress cards are on their way soon

Thanks to Preston Grubbs for a great deal and awesome customer communication. I’ll be giving him official props on here once my cards show up and he gets his website up. Needless to say, I’m very excited. If you’re interested in cards like mine, I can design them and get them printed for a great price.

Client Success!

One of my recent clients was chosen to appear in a featured artists section the magazine she was advertising in. I created her print ad for the magazine…

Could my ad have had a hand in her success? I’d like to think so but plausible is that she has a great talent with a niche artistic style and her paintings can’t help but to make you smile. Good job Elise Nicole!

HTML emails

I just spent a few days researching and exploring the best practices for sending HTML emails. It’s a bit of a P.I.T.A. but once you know, it makes a bit more sense. Look forward to a big post on this.

On that same note, I was asked to do a live video training on building HTML emails next month. This is very exciting for me because I love training (particularly over the net) and I really wanted to spend some time perfecting my email-creating skills. It’s nice getting paid to do what you like to do!

In the meantime, here are some excellent references:

How To Code HTML Email Newsletters

Sitepoint gives a great break-down of how to create HTML emails that most people can read. It covers the necessary table layout, how to use CSS, best-practices, and information on Gmail (which, surprisingly, doesn’t support very much CSS at all).

HTML Email Tips for Web Designers

MailChimp (my new favorite little company) has a great blog that shows off interesting email campaigns and shares best practice information. The link above goes to an entry that gives some great tips for people coding emails. Also check out their template library for some free templates (they need a little bit of work, in my opinion but they’re free and work very well for the most part).

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

A bit dry but that’s to be expected from MSDN and Support pages from Microsoft. Incredibly useful as well, another characteristic of their pages. If you want to know what will and what won’t fly in Outlook, check this article out. If you stick to this, it would be hard to go wrong in other clients as well.

I’m Older

I got officially got older on Tuesday. No outbursts, drunken debauchery, or mental breakdowns. I think those come next year.