February 23, 2009

The Web Development Blog is moving!

The Web Development Blog is moving

As some of you have heard, I'm leaving University Marketing and Communications, and will be doing freelance Web design and consulting. But that doesn't mean I'll stop blogging. It just means that I'm moving the blog to a new location at

For the past month I've been cross-posting entries to both locations, and am now ready to shift things over to a new site which includes the Web Development Blog as well as a project portfolio and other information related to my Web development background and philosophy. There you will be able to see which social media services I use—and why, peruse what I've been reading in the blogosphere and, of course, continue reading my blog entries on Web development, marketing and related subjects.

I will continue to post on an array of topics geared to academic, corporate and non-profit Web developers, bloggers, content managers, marketers and anyone else with an interest in the Web.

Articles will include the usual mix of content, marketing, social media and code such as:

You can also expect a few marketing entries about the move, as I learn how long it takes to rebuild readership in the new location. Hopefully it will be an interesting case study.

If you are currently subscribed to the blog entries or comments, you can update your subscriptions with these feeds:

Thank you for reading!

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button

Posted by Heidi Cool at 03:55 PM | Comments (127)
Categories: Announcements , Blogging , Heidi's Entries

February 15, 2009

MKTG 101: Web Content Should Serve Visitor Needs

I made $10 Trillion Selling Unicorn Futures - faux book title
Getting rich is never quick.

Some new Twitter users want to help me get rich, find peace with my life and help me tap my inner invisible pink unicorn to be spiritually one with the universe. I know this because they post links telling me they can make this happen if I buy their books and CD's or read their blogs. They just never tell me exactly HOW this is supposed to happen.

Instead they babble repetitively in varying sized and colored typefaces, repeating their promises over and over again, but with slightly different wording. They do this because they read somewhere that "long-form" copy is persuasive and sells. I'm not buying it.

If you're in business for the long run, no matter the field, content that merely badgers readers into buying your whatsits and whatnots is not the solution. It may help you sell a short run of something, but it won't establish a relationship with your clients, build a solid customer base or solidify your branding strategy. So what will?

You have goals, but so do your site visitors.

People visit our sites for a reason. They have a need they wish to fill. After having searched Google, discovered your site on StumbleUpon, followed a link from a source they trust or typed in the link they saw on your business card, they've come to your site in the hopes that you can fill their needs. This is true whether you are peddling products, services or information. For example, your visitors may need to:

  • Buy a glow-in-the-dark dog collar with built in GPS so they don't misplace Fido at night.
  • Pick the right graduate school so they can research light-emitting polymers that will help them develop new green technologies.
  • Decide which restaurant to visit next Tuesday.
  • Find a skin cream that will soothe itchy winter skin.
  • Choose a good book for their nephew's 3rd birthday present.
  • Learn something new about Web marketing strategies.

If your site can serve that need, then you need to make this clear right away. As soon as they see your home page, or some interior page they've landed upon, they should know if you provide what they seek. If your site isn't meant for them, they can move on. If your site appears to offer what they seek, they will stay a bit longer to find out if your offering is the one most appropriate to their specific needs.

Give readers the tools they need to make an informed purchasing decision.

Now that your visitor has decided to explore your site, you need to give him or her the information needed to make a decision. Doing this is merely a matter of offering content that accurately conveys the features and benefits of your product or service. This will allow your readers to judge the quality of what you offer, and determine if that offer will serve their specific need.

How much information your reader requires depends on your offering. If a visitor is picking a graduate school, he or she will want to know about the faculty, the facilities, fellow students, courses offered etc. This is a big decision that requires making a well-informed choice. If your visitor has a hankering for Italian food, then your restaurant menu, location, hours and some photos (of both food and the restaurant) will probably suffice.

Imagine yourself in the role of your visitor. Let's say you're looking for information about Web marketing. If you are reading this sentence then you've already made a decision. You've decided to read this entry and you've stuck around past the first few paragraphs. If you'd been looking for information on developing Web sites with AJAX you'd have already left.

People talk about Web content in terms of stickiness—methods they can use to keep visitors on the site or encourage them to return in the future. But that's not an end goal. It's merely a tactic used in the hopes that long or repeated visits will encourage readers to buy, or otherwise consume, our stuff. If we provide content that let's visitors make an informed decision, then we've done our job. We've established trust and given them the tools they need to choose wisely. If they like our program, skin cream, menu, Web advice they'll buy/eat/read it now and come back for more later.

By giving visitors the information they seek, we serve both their goals and ours, while forging customer relationships that can last well into the future.

Web Content Development Resources

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button

Posted by Heidi Cool at 01:05 PM | Comments (4)
Categories: Content , Heidi's Entries , marketing

January 29, 2009

MKTG 101: Social Media Marketing is still marketing—know your audience

Golden Retriever
Look who needs a glow-in-the-dark
GPS enabled dog collar!
How to we reach his owners?

Social Media Marketing is hip. It seems like everyone wants to get involved, call themselves an expert and use the magical powers of social media to triple sales, recruit students, etc. But social media isn't magic. Social media, like advertising, direct mail and telemarketing is but one of many tools in the marketer's toolbox. Like any tool it needs to be used in the proper context—in conjunction with other marketing strategies. As such social media—when used for marketing—still relies on basic marketing principles such as understanding your target audience, the features and benefits of your product or service, brand awareness and so forth.

Lately I've noticed that a great number of online marketers are unfamiliar with these marketing basics. So today I'd like discuss the importance of understanding your target audience. On the most basic level this is a fairly intuitive process. If you are marketing a new glow-in-the-dark dog-collar with a built in GPS unit, then you can guess that your core audience will consist of:

  • Dog owners
  • Friends of dog owners

Your secondary audience may also include:

  • People who like to make a unique fashion statement by wearing a collar
  • Night-time joggers in need of additional safety accessories
  • Ravers who see this as a cool alternative to glow-sticks, etc.
Targeting the market: The group of 'dog owners' is too broad to reach effectively.

Your product will not appeal to everyone on the planet who has a dog, so there is no point in spending the time and money it would take to reach all of them.

For example, I recently mentioned the word "dog" in a Tweet (a message I posted on Twitter.) Within 2 minutes I received an e-mail saying that person X was now following me on Twitter. (X had probably set up a search on "dog" and was auto-following anyone who mentioned the word.) I clicked on the link to see who person X might be and discovered that he is marketing some sort of dog-related service. Being currently dogless and unclear of the mission of his site, I neither signed up for the service nor followed X back on Twitter. Instead I posted a brief rant to friends on why following everyone mentioning the word "dog" was not a viable marketing tactic.

X missed out for three reasons.

  1. I'm not currently a member of his potential audience.
  2. I do not buy things from people/organizations who take marketing short-cuts. They may be taking short-cuts with their product or service as well.
  3. Customers and potential customers share bad experiences and I shared this with many friends who now also will not buy from X.
Targeting the market: who among these groups would be most likely to buy your collar?

In the long run we'll make more sales if we can match our product to customers who have a desire or need for that product. A good way to examine this need is to explore the features. Our collar:

  • Glows in the dark—a valuable safety feature for night-time dog-walking
  • Features built in GPS—handy for tracking your dog if he's walked off leash, sneaks out of the yard or is used in hunting
  • Is available in a range of sizes—meant to accommodate either the smallest puppy or the largest Mastiff.
  • Is offered in a range of styles including 5 colors of leather as well as 5 durable canvas models—accommodates different preferences and holds up to strenuous use
  • Includes an innovative quick release buckle—that can be easily opened or closed with just one hand

Our collar has practical rather than decorative features. While it comes in a variety of colors, it's not a huge variety and none feature rhinestones. From this alone we can guess that it will not appeal to small dog owners who dress up their pets in decorative outfits. It's rugged and easy to use and may appeal to hunters and other owners of medium to large dogs, especially working breeds.

Market research can help us segment the population further.

We may learn that certain breeds are more likely to wander and their owners would desire such a collar. Perhaps owners of Golden Retrievers are 50% more likely to buy multiple collars for their dog than German Shepherd owners. If we have an existing customer base for related products we can analyze past purchases to look for buying patterns that may relate to our new product. If our Fluffy Anti Flea shampoo buyers have been good collar purchasers in the past, while our dog brush buyers have not, then we should promote our collar to the shampoo buyers.

Our market research team can also offer additional demographic information that may help us fine-tune our lists. Perhaps college-educated Volvo drivers replace their dog collars 50% more often than Cadillac drivers. If such correlations exist, we may want to consider those as well. The more we learn about dog-collar buying patterns the more likely we are to narrow our audience down to the group most likely to be interested in our product—while ensuring that there are enough potential buyers in that group for us to make a profit.

We've identified and fine-tuned the market(s): how do we reach them?

Let's say we've decided to target college-educated Volvo drivers with Golden Retrievers as one of our market segments. We've discovered that we can buy mailing lists for this group, that they watch the Discovery Channel and regularly buy from L.L. Bean. Accordingly we might want to initiate a direct mail campaign that we send to the list, advertise on the right shows on the Discovery Channel and make an arrangement with L.L. Bean to distribute the product through their catalog. As our focus, today, is on social media let's assume we already have these (and other) strategies in place. Now we want to supplement these efforts through social media.

Where do these people spend their time online?

By now we've learned something of the demographic make-up of our target audience. We know they've gone to college and have enough disposable income to afford Volvos. Perhaps we've also discovered that their average age is 35-60 and they tend to live near major metropolitan areas. A little research on the more popular social media services may show us that we're more likely to find these people on Facebook and Twitter than on MySpace.

Our audience is easy to find on Facebook.

Facebook skews a bit younger than our target age, but a quick search shows there are over 500 groups relating to Golden Retrievers on Facebook. This may then be a good place to put up a Facebook page, to advertise, and to participate in discussions about dogs and accessories. It will take time, but it might be worth reviewing the various groups and selecting a few active ones to join. There we can participate in conversations and even talk about our dog collars, so long as remember that social media is about people and not just about our products.

Tracking them down on Twitter will be more labor-intensive.

Twitter searches on Volvos and Golden Retrievers pull up many hits, but many of these won't be relevant to our project. Twitter conversations aren't as easily segmented by topic as they are on Facebook or StumbleUpon. Choosing who to follow on Twitter will take more research. We could do several additional searches on "dog collar" "hunting dog," etc. By carefully reading through these results we can pick people one-by-one that may fit our audience.

Services such as Twellow can help us find people by categories, such as "animal welfare" that may give us leads. We should also look into dog-related associations, dog shows and related groups that may be communicating about a related topic through the use of a Twitter Hashtag such as #dog. Ideally you would want something more specific, but there are countless Twitter services and tools available to help you with your research.

Finding the right people and forging those connections on Twitter takes time. This is not a place to push our product, but a place for us to join a community in which we can share ideas on topics of common interest.

It's important to remember that people will only follow us back if we have something worthwhile to say. Before following any of them, we have to make sure that we've posted some worthwhile Tweets—most of which are not about our new collar. Here we want to keep it human. We can post Tweets about our own dog, dog-training tips, and observations about life in general that have nothing to do with dogs. If we offer interesting insights and links that might intrigue members of our audience and respond to questions within our areas of expertise we'll forge far stronger connections than we would if we treated our Twitter stream as an advertising platform.

Define your audience then connect with them on their terms.

Taking the time to narrow your audience to an easily defined niche makes marketing more cost effective. People think of social media as being a free alternative to traditional advertising or direct mail, but making successful connections requires time and labor. By targeting your audience you can focus that labor on connecting with the people who matter most to your goals.

Once you've found that audience you need to connect with them on their own terms if you want to achieve any level of success. Study the usage patterns of the social media services/platforms you intend to use. Find out how your audience uses these tools, then follow their lead. If you put as much effort into tailoring your communication methods to your market as you put into developing a product or service that suits their needs you'll have a far better chance of establishing connections than you would with a more generic approach. It doesn't take magic, just time, research and work.

Market Segmentation, Demographics and Social Media Marketing Resources

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button

Posted by Heidi Cool at 03:18 PM | Comments (26)
Categories: Heidi's Entries , Social Networking , marketing , social media

January 11, 2009

2 Top 5 Lists = 1 Top Ten List: My most read Web Development Blog entries from 2008

Get Adobe Flash player
New Year's Eve around the world

Now that the New Year has been rung in, it seems that the meme of the moment is to blog about the year in review. So I thought I'd follow suit. I looked over my blog entries to see if I'd trended towards any new themes for 2008. While I have written more on social media this year (who hasn't?) I quickly noted that my topics overall continued to range across a wide array of Web related subjects. Next I looked at my stats to see which articles were getting the most traffic and comments.

As it happens the most read article of 2008 was also the most read article of 2007. While quick trendy subjects such as Plurk: Social Media Marketing in Action brought in new readers and temporary traffic spikes, the more timeless subjects such as writing, marketing and navigation were the ones that drew in the most readers overall. So, instead of presenting you with my top 10 articles of 2008, I've decided to break them up into 2 groups, the top 5 written in 2008 and the top 5 from year's past that continue to draw readers—even with the passage of time.

Top 5 Web Development Blog Entries written in 2008
5. Testing Web sites with multiple browser versions
Suggestions on ways to test sites in multiple browsers, reasons for testing and why we still can't ignore Internet Explorer 6.0.
4. Reflections on social media networking and marketing
Overview of popular uses for social media, nature of word-of-mouth and the impact of social media on marketing goals.
3. Wayfinding within your Web site
This follow-up to Your home page is NOT your index; it's your store front provides tips on navigational aids that will help users to explore your site no matter which page they may enter through.
2. An URL by any other name would still work like an URL, part 1: subdomains
Exploring the differences between subdomains and subdirectories and their impact (or lack thereof) upon marketing.
1. Embedding YouTube Videos the Standards Compliant Way—SFWobject 2.0
Embedding YouTube Videos is one of the easiest things you can do on the Web, but if you're a stickler for standards compliant HTML, you can't just copy and paste. SFWobject 2.0 provides an easy remedy.
Top 5 Web Development Blog Entries read in 2008
5. CSS Tip: Positioning photos with floats
Positioning photos with hspace or tables is awkward and dated, but the CSS float property makes it easy for anyone to include images in their Web sites and blogs so that they float cleanly to the right or left of the text.
4. An Introduction to Search Engine Optimization (SEO) Part 1
Search Engine Optimization may seem complicated, but by following these simple SEO basics you can make a significant impact.
3. I'm not going to teach you XHTML/HTML, but you should learn it anyway
This brief introduction to HTML provides links and resources for learning HTML as well as a homework assignment users can try as a way to get started.
2. So you want to build a website
This is the first in a series of articles that make up my Planning your Web site tutorial—in which I walk readers through a process of identifying goals, understanding their audience, choosing content, outlining a site and organizing pages and navigation.
1. Voice and Tone: Writing to reflect your personality as well as your message (Part 1)
Writing is more than the stringing of words into a sentence. This article addresses the importance of using a tone suitable to both the audience and the subject matter in order to better connect with readers and clearly convey your message.

The Web is constantly evolving and we're all trying to keep up with the latest trends and technologies. But no matter which platform we use to publish, which strategies we apply, it always seems to come back to the basics. The most basic element of the Web is content. While video and audio continue to build in popularity, the core of our content is still composed of words. That's probably why the Voice and Tone article was read more than any other.

You, my readers, understand the importance of fundamentals over the latest fad. I think that is why—for the most part—the most popular subjects on this blog are the ones that address these basic strategies, those that can be applied now and in the future. In 2009 I expect to be writing more on social media topics such as Facebook and Twitter, but I'll also be writing more about content and general marketing principles, the foundations we build upon in all of our Web-based endeavors.

What about you? If you're a blogger what will you focus on in 2009? If you're a regular (or new) reader, what would you like to see here?

Happy New Year!

P.S. Read more of my thoughts on social media and the Web on Ariwriter

Ari Herzog recently interviewed me for his blog, AriWriter: Strategies and tips on social media and online marketing. You can read the full article, Guest Interview with Heidi Cool: How a University Experiments with Social Media, online.

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button

Posted by Heidi Cool at 11:26 PM | Comments (21)
Categories: Blogging , CSS , Content , HTML , Heidi's Entries , How-to , SEO , Social Networking , Web Browsers , Web Standards , navigation

December 29, 2008

Social Media is People (but more enriching than Soylent Green*)

Everyone wants to know how to take advantage of social media. Whether it's to promote a business or an academic program, it's not unusual to hear people as, "How should we be using Twitter?" or "What should we do with Facebook?" The questions often focus on the tools, but as I've mentioned before, in Social Media: Your Interactive Information Resource, social media is about making connections—human connections. While this has been apparent to me for sometime, it's become increasingly clear over the past month. So rather than writing a typical how-to or advice article, today I'll just tell you about two recent events that really drive this message home.

Heidi thinks the veil between the 'brick and mortar' world and the 'cyber world' becomes more elusive each day.

Cleveland Social Media Club Members Page

That's what I wrote as my Facebook status message when I returned home from the Cleveland Social Media Club party on December 10. As the name suggests the Cleveland SMC is "a community for the champions of Social Media and those seeking to learn." (If you live in Northeast Ohio and work with, or are interested in, social media you should join.) What makes this group different from many online communities is the regional nature of it. We're all here so we can actually meet in person. As such they've already had several events, but this was the first one that I attended.

My friends tell me that I'm no longer shy, but I am an introvert, so I have to admit I was just a wee bit nervous. Although I knew a few people in the group—either in person or online—many were unknown, or at best vague cyber-acquaintances. Thus I wasn't sure how well I'd handle the small talk. As it turns out it wasn't a problem. I knew the host, Dave Stack, from the real world, his best friend is friends with one of my best friends, I'd previously met a few folks from a Cleveland bloggers meet-up, and George Nemeth was there and George knows everybody and is more than happy to make introductions. Within no time I felt as at ease as I would have with people I'd known much longer.

I met some great people and look forward to seeing them again at a future event. But I don't have to wait until the next event to continue the conversations. Members of Cleveland SMC can friend each other and converse on that site, but we also post our other profiles there. Since the event I've connected with several of them on Facebook, Flickr and Twitter. And thus the conversations continue.

It doesn't matter if/when we meet again face-to-face. It doesn't matter if one person prefers Twitter and another prefers Facebook. Once the connection is made it can be continued on any one or more of the online services available. Cleveland Social Media Club (on Ning) provides an information hub, but it's also enabled us to easily create multiple redundant pathways to one another. Thus, if one service goes down, the connections aren't lost, we still have other channels available.

When a service goes down: the demise of Pownce

Pownce Home Page

While multiple channels are available, Pownce was my social media tool of choice. Alas, in early December, Leah Culver announced that Pownce would be shutting down on December 15.

Pownce was the service that hooked me on social media. It's where I learned that you could forge real connections online. Pownce gave me access not only to my peers but also to leaders in the field. If I went to Pownce with an idea I had about a Web project I wasn't getting feedback from just anybody. I was getting feedback from people in all areas of the business—ranging from the managing director of Octane Interactive, Wayne Smallman, to the lead designer at Digg, Daniel Burka. Pownce was an incredible resource.

Of course, it wasn't all about work. Powncers shared photos, absurd videos and thought-provoking articles while also conversing about everything from politics to bacon. My friends group contained liberals and republicans, atheists and born-agains and people from several different continents and cultures. But we had our geekiness in common, so everyone played nicely together in the sandbox. As we shared media and stories, personal experiences and jokes we got to know each other on many levels, much as one does in the brick and mortar world.

By the time December rolled around we'd become a pretty tight community. Then we heard about the shutdown. As you can imagine, the community reeled. Where would we go? What would we do? Sure we're on Twitter, but how can you discuss global warming or share pierogie recipes in 140 characters? It was clear, the sky was falling and there was very little we could do about it. Or was there?

A community comes together

All gnashing of teeth and wailing aside (and yes there was a lot of that) one of the first things people did was to start announcing where else they could be found. Pownce always made it easy to post our other profile addresses on the site, but now people were indicating where their primary addresses would be. People posted their addresses for Twitter, Facebook and Friendfeed. People shared e-mails. One fellow declared that he preferred IM and shared 5 different ways to connect with him that way.

We had this information, we had the ability to download our data, but it was clear that we were scattering into the wind. In my panic, I decided I needed to create a new, possibly temporary home for us, someplace that would still exist after December 15, where we could continue to share our contact information. Given that I was already familiar with Ning, I created Pownce Refugees, a place to keep the community alive after Pownce shutdown.

My Pownce Refugees Page

At the time I really wasn't certain about my long term goals, I just needed something I could launch quickly. I configured the page to use the colors from the Pownce home page, enabled some features that I thought might be useful and spread the word. As I and others started playing with it I added RSS feeds of Pownce mentions on Twitter, the Pownce Exiles Room on FriendFeed, the Pownce Exiles group on Vox, Pownce in the news and so forth. This way I thought we could use this page to keep track of Pownce-related activity elsewhere.

The next thing I did was to start creating groups for Pownce theme days. On Pownce we would often post content related to a day's theme. Thus we had Music Video Monday, Wordle Wednesday, Foto Friday and so forth. It sounds silly, but it was a good way to get new people involved as it gave them ideas on things to post. When you are new to social networking, it can be intimidating, but theme days provided some great starting points.

As I was busy priming the pump with groups and content, people started joining. Then they told other people to join. They spread the word on Twitter and other places, and within no time we had more than 100 members.

100? That's not much, Twitter has 6 million users

100 isn't much (we're now at 139), but it was enough to begin a new community. It was also enough to catch the attention of the Ning staff. As a result of our rapid growth, they featured us on the Ning Blog in an article entitled, Former Pownce members find a new home.

This was actually a fairly major accomplishment as Ning is a rather large enterprise. In April 2008 there were over 230,000 networks on Ning, and they were growing at over 1,000 per day. Only 3-4 are featured on the blog in any given day.

The other good news was our traffic. I created Pownce Refugees on December 1, and installed the analytics on December 6. As of December 15 (Pownce shut-down) we had

  • 933 unique visitors
  • 1,870 total visits
  • 12,836 page views (6.86 pages per visit)

By way of comparison this blog was 20 months old by the time it started generating that level of traffic.

Our traffic sources also told an interesting story.

  • 56.2% were direct traffic, meaning members (or others) who already knew the address,
  • 40.11% were from referring sites and
  • only3.69% were from search engines.

The top referring sites were Pownce, Stumbleupon, Gmail, Twitter, FriendFeed, Facebook (I'd created a Facebook page for the site), Plurk and Ustream.

Those of you who check stats regularly know that this is atypical. Search engine traffic often plays a much larger role, often times 50% or more. But this was a social media site, marketed through social media to active social media users. It worked well because we (I credit our early adopters for spreading the word) were focused on a very specific niche (Pownce users), who were well-versed in social media tools, and we had a deadline that affected everyone involved.

Where are we now?

Since then we've lost a bit of momentum and probably need to refocus marketing on community building strategies. But traffic is steady and we have a core of regular visitors. As of yesterday we've had a total of:

  • 3,000 unique visitors
  • 5,193 total visits
  • 25,741 page views (4.96 pages per visit)

Traffic sources have shifted slightly. The increase in direct traffic is from membership growth and usage.

  • 67.8% are direct traffic
  • 27.09% are from referring sites and
  • 5.1% are from search engines.
Where will we be next year?

Who knows? The goal was to stay in touch. That seems to be working. In the meantime various members of the community and others are also working to build services with features more akin to the original Pownce. And while the economic climate is gloomy, new services continue to emerge. In another year we could be spending our lunch hours exploring some yet unknown site with yet another funny name.

But what this has shown me is that social media works. In the right situation it can be a very effective marketing tool. But it's the people and the connections between them, that make it so.

* For those 7 of you unfamiliar with the science fiction classic, Soylent Green, there is a classic line towards the end that states, "Soylent Green is people!" Alas, soylent green was also what people ate.

What is the secret of Soylent Green?

Get Adobe Flash player

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button

Posted by Heidi Cool at 09:43 PM | Comments (15)
Categories: Heidi's Entries , Social Networking , analytics , marketing , social media

December 09, 2008

5 Tips to ensure your readers can read your HTML e-mail messages

Sample message in Macmail
Sample message in Macmail

Sample message in Gmail without images
Sample message in Gmail without images

Sample message in Outlook 2007
Sample message in Outlook 2007

Sample message in Outlook 2003
Sample message in Outlook 2003

As the semester winds down, and the holiday season encroaches, it seems there are more and more events to publicize, greetings to send, end-of-year newsletters to distribute, holiday sales to promote, etc. T'is the season for HTML e-mails. Alas, as many of you know, creating and distributing an HTML e-mail message is far more complicated than building a regular Web site. As we struggled in the days of the browser wars, today we struggle with the myriad ways popular e-mail programs support HTML. Anyone who has had to create an HTML e-mail message, or has received one they couldn't read, knows what I mean. So today I'll present five tips that should help to make your e-mails readable by the masses.

Throughout this article I'll refer to the sample Gothfest 2009 e-mail pictured (in various renditions) on the right. This sample was created with certain features in mind to demonstrate how such an e-mail will render in different programs.

1. Use images to convey a mood or theme, not to present content.

In many popular e-mail programs, the default preference is to have images turned off in incoming messages. Thus many of us receive e-mails with little boxes and some indicator that says "click here to load images." If you are like me, you rely on the remaining text of the message to make you decide if you should bother or not. Recently I received a message from a well-known business magazine in which the only text provided stated only the name of the magazine and its address. The subject line was equally informative in that it said something like "Special News Update from Magazine X."

The rest of the content was contained in .jpg files linked in the message. This is problematic for two reasons:

  1. Sighted readers, such as me, have no way to judge whether the message is worth reading (or not) unless we click on the image. If we're busy reading through a long list of e-mails we may just send it to the trash. If the sender didn't care enough to present the information clearly, then why should we care enough to read it?
  2. Readers with vision problems who rely on screenreading software have no way to read a message that is part of an image. They are relying purely on the text of the message and any "alt text" provided for the image. This particular message didn't include any "alt text" so the message was lost to such recipients.

We all want our messages to be read. To ensure that they are readable by everyone in your audience, just be sure to include all the important points as actual text. This doesn't mean you can't use images to add visual interest, it just means that your message will be accessible to everyone whether they can see the pictures or not.

In the Gmail screenshot on the right we see a sample message without images. The original file contains two images, a picture of Death and a white background image with shaded edges. Because the content is text-based the main message is available and the alt text provides a description of the missing photo. This would also be readable in a text-only mail program with no colors or styles available.

2. Use Tables for Layout (WHAT????)

Most of us know that tables are meant for tabular data and CSS is meant for style and position. Alas many e-mail programs, including Gmail, don't support the positioning features of CSS. If you want to put text on the left and an image on the right—as I did in the sample— and you can't use the float property of CSS, you're stuck with tables.

To create this layout I made a table that has 3 rows of one column each.

  • The top row has a dark background, a green bottom border and contains the title.
  • The middle row has a white background and contains another table with one row and two columns.
    • The left column contains a background image, but no background color and features the main text. With images off the white background from the main table will show through so that the text is still easily read.
    • The right cell has a dark background and the Death picture. With images off the picture is replaced with alt text. In our sample this is showing up as black which indicates that the table cell should be restyled to feature a lighter color.
  • The bottom row has a dark background, a green top border and the opt-out message. In some of our samples the e-mail is showing up as dark blue which is hard to read against the dark background. In the Macmail version it has been re-styled in a light green that is easier to read.

To get a better idea of how this was set up, view the source code.

3. Use HTML 4.0 Standards Compliant Code to the extent that you can.

Going back in time to use tables makes us feel like we're breaking the rules of HTML, but it is still possible to adhere to standards compliant HTML in e-mail if you use the HTML 4.01 transitional doctype. While adhering to Web standards is a good idea in general, I also find it helpful for testing and troubleshooting e-mail files. When I find a problem in my message, the first thing I'll do is validate the file. This helps me determine if the problem is a simple coding error or if it is due to a feature not supported in one of the e-mail programs I'm testing. By eliminating any coding errors I can then focus on the work-arounds I may need to implement to solve the e-mail specific problem.

4. Use inline styles

Most of us are used to using external or embedded stylesheets. Alas, some programs don't support those. To ensure that your styles aren't ignored, use inline styles to format everything in the document. This takes more time and adds to the code, but will be accepted by more programs. For example, to style the top table cell and the header within, I used the following code:

<th scope="col" width="700" style="background-color:#24333a; border-bottom: 1px solid #87d143; color:#c02c18; text-align:left; font-family: Georgia, serif;" ><h1 style="margin: 10px 30px 10px 30px; letter-spacing:2px;">GOTHFEST <span style="letter-spacing:0; font-weight:normal;">2009</span></h1></th>

To add an inline style to an html element just include style=" " and put your regular CSS information within the quotes.

In this case I styled the top row (which uses a <th> because it is a table header) to have a dark background, green bottom border, red type, left-aligned text and Georgia or other available serif font. The title was put in an <h1> header styled to have 10 px margin on the top and bottom and 30px on the left and right. I also added 2px of letter spacing. I surrounded 2009 with a span styled to use 0px of letterspacing and a normal font weight. I incorporated the letter spacing and the 2009 span changes mostly to see if they would be carried through in the e-mail programs I tested.

Note: When coding for the Web I find padding works better to ensure files work well in IE 6, &, Firefox etc. But I've found that padding seems to fail more often than margin in e-mails, so I use margin to ensure that I retain space between paragraphs in as many programs as possible.

People sometimes worry that they'll lose too much flexibility if they try to stick with Web standards, but this example shows that despite the limited support of CSS in e-mail there is still room for experimentation. These styles worked in most of the programs I tested.

5. Test your mail in several different e-mail programs.

The e-mail standards project provides information on what features are supported by the most often used e-mail programs. These offer helpful guidelines, but the only way to know what will work for your file is to test it in as many different programs as you can. You can do this by installing several programs on your own computer and by enlisting the aid of friends and colleagues. I can access my work e-mail in Outlook 2003, MacMail, Gmail and Case's Webmail, so I send myself messages then check them in each program. I haven't upgraded to Outlook 2007 (as I'd no longer be able to test 2003) so to test that I send messages to my colleague Kim—who patiently lets me look over her shoulder or makes screen captures for me to evaluate.

As my samples indicate, your e-mail will not look the same in every program. That's O. K. The important thing is to make sure that it renders cleanly in each and degrades nicely if images or styles are not available. If you can do that, you will ensure that your message doesn't get missed because of poor formatting.

I can't embed HTML code in Outlook. How do I send an HTML e-mail?

How you send an HTML e-mail depends on your mailing list and the programs you have available. If you're regularly sending mass e-mails to large lists, you may wish to use an e-mail service such as Target X or Constant Contact. There are many such services available. Check with your organization to see if they already have an arrangement with a preferred vendor.

For occasional mailings sent to smaller lists, or via listservs such as those available through, you need an e-mail program that will allow you to insert HTML. Case's Webmail program, found at let's you paste HTML into your message body, but only if you are accessing it through Internet Explorer.

An easier option for most users is Mozilla's Thunderbird, available for Linux, Macintosh and Windows. Thunderbird is free and very easy to install. To send an HTML e-mail just click the "Write" button to compose a new message, type in your recipients addresses and subject line then go to the "Insert" menu and choose "HTML." A box will pop up in which you can past the code from your HTML file.

Learn more about HTML e-mail

StumbleUpon Toolbar Stumble It! AddThis Social Bookmark Button

Posted by Heidi Cool at 01:01 AM | Comments (14)
Categories: CSS , HTML , Heidi's Entries , How-to , Tips and Tricks , design , email , images

Chat Catcher
Blog Directory - Blogged