HTML Emails

HTML email – you either love it or you hate it. Some love the
simplicity of text-only emails, while others praise the flexibility and
good looks of HTML. But it doesn’t really matter whether you love
it or hate it because sooner or later a client will ask you to design
one of those ‘pretty looking email thingies’ for their own
customers, and then what do you do?

Most of us tend to think that if we can design a web page, then
hell, an HTML email will be a piece of cake! Well…almost. But
before you decide to plunge into HTML email design head first, there
are a few guidelines to follow that can ensure the best results for you
and your clients.

The guidelines fall roughly into these recommendations: how you
should design your email, how you should code it and finally the
essential content you should include. Before we get into it though,
let’s get one thing settled once and for all. These guidelines
are for relevant, permission-based emails being sent only to
subscribers who have opted in to hear from your client specifically on
the topic of the email. So if you’re a spammer, look away now!

Design for images being turned off

Here’s a nasty little fact for you. Any of your recipients who
use AOL, Outlook 2003, Outlook Express and Gmail will never see the
images in any emails you send them by default. For some people that can
make up at least half of all the people they ever send email to. Bummer
huh? I told you it was nasty.

Apple iTunes Announcement

Here’s an example of just how ugly things can get. It’s
an email I received from Apple announcing the launch of the much
anticipated iTunes Australia Music Store.

Apple announcement with images off
The Apple HTML email I received with images turned off

Apple announcement with images
The same email from Apple with the images turned on

Luckily I recognized the sender and enabled the images right away,
but how many of their recipients got the version without images and
deleted the email immediately?

We know that images get blocked and that this will affect the design
of your email – but blocked images are by no means a show stopper. All
you need to do is follow a few simple guidelines when designing your
email and you’ll forget that image blocking was ever an issue:

  1. Don’t use images for important content like calls to action, headlines and links to your web site.
  2. Ask your recipients to add your sending address to their address
    book every chance you get. This will ensure your images are displayed
    by default in a range of popular email environments.
  3. Add a text-based link to a web-based version of your email that will reveal your email in the browser in all its glory.
  4. Use alt text for any images (which will be viewable in some email environments, especially Gmail).
  5. 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.

To backup these recommendations, here are a few samples of emails
that have been designed with these guidelines in mind. Notice how
readable they are even with images disabled.

Digital Web Magazine’s Newsletter

Designed by Mark Wyner, this email even uses a clever image
replacement technique to display a text alternative when images
aren’t enabled. It looks great and is easy to read in either

Digital Web's newsletter with images turned off
Digital Web Magazine’s Newsletter without images

Digital Web's newsletter with images turned on
Ta Da! The same newsletter with images turned on

River City Church Newsletter

Designed by Jon Livingston, this email looks great with images
enabled, but the large, clear title in the header still makes it
recognizable to those with images turned off.

River City Church mail with images on
River City Church newsletter with images on

River City Church with images off
River City Church newsletter with images off

Remember that almost half of your recipients may be using a small
preview pane to decide if your email’s really worth checking out.
Preview panes allow your recipients to check out a sample of your email
before they decide to open it and read the whole thing. Some of your
recipients will even read all their email in the preview pane and will
never completely open it.

Historically, preview panes have been popular among traditional
email clients like Outlook and AOL. That’s all about to change
with the two most recent betas of the new Yahoo! Mail and Windows Live
Mail (Hotmail) both sporting a split-screen preview layout.

So how does this sudden loss in screen real estate impact your
design? We’ve all got busy inboxes and if you’re like me,
you’re pretty trigger happy with the delete key. If your design
doesn’t grab your recipient’s attention with relevant and
interesting content within a second or two, it probably doesn’t
stand a chance.

Each email environment dedicates different screen real estate to
their preview panes, but no matter what your recipient is using, try to
ensure the following:

  1. Include something that will identify you and even attract interest
    at the very top of the email and preferably to the left. This could be
    a summary of the email content or at the very least the name of your
  2. Check out your reports after each email you send to see what people
    are most interested in – try to make that visible in the preview pane
    for the next email.
  3. Make sure this content is text-based so it will be viewable by all recipients by default.

CSS or tables for layout?

Ahhh… the age old question. Unfortunately, the answer is
still ‘it depends’. Contrary to popular belief,
fully-semantic CSS based emails are not only possible, but widely
supported in the majority of email environments. Even better, if you code your CSS correctly, your email can fall back to a perfectly usable rich text email for those with poor CSS support.

Today, deciding on whether to play the CSS card or fall back to
tables and inline CSS is a lot like the days when you had to decide if
you wanted to support Netscape. Some clients will demand it, while
others realize that it’s time to move forward.

If you’re unlucky and the CEO uses Lotus Notes but wants your
design to look consistent for everyone, tables and inline styles it is.
If you can explain to your client just how broken some email clients
are, and that your design will be accessible by everyone but will
degrade to a simple layout for some, CSS is an option.

At Campaign Monitor we’ve tested CSS support across every
popular email environment out there, so if you’re interested in
which CSS selectors and properties are supported, it might be worth a peek.
Your clients’ preferences aside though, it’s impossible to
know what email environment your recipients will be using. Ultimately,
to decide on CSS or tables you’re going to need to make some

If you’re sending a Business to Business email, it’s
safe to assume that most of your recipients will be using Outlook
(around 75%) or Lotus Notes (9%). Outlook’s CSS support is
top-notch, but Lotus is just plain dismal. That one’s your call.

If you’re doing the Business to Consumer thing, you’re
probably looking at Yahoo!, Hotmail and AOL. If you’re targeting
early adopters, you should also consider Gmail (although be warned,
Gmail is not as popular as you think it is and is still only hovering
at less than 5% of the web-based email market).

To make things easier, here’s a quick summary of which popular
email clients support the CSS approach, and which ones rely on tables
and inline CSS to display your message as intended.

Email client What you should use
Yahoo! Mail CSS
Hotmail CSS*
Gmail Tables and inline CSS
Outlook and Outlook Express CSS
Lotus Notes Tables and inline CSS
Thunderbird CSS
Mac Mail CSS
Entourage CSS
Eudora for the Mac Tables and well, no CSS

* Hotmail has one big gripe – make sure you include your <style> element in the <body> and not the <head> or it will be stripped completely.

I want to reiterate this point because I think it’s so
important. Don’t be ashamed if you’re forced to go down the
tables and inline styles path. As I mentioned before, email clients
today range from perfect CSS support to almost none. If your client
demands design consistency for all recipients, you really don’t
have any other option.

Five Things to Avoid

Whether you use CSS for your layout or not, there are a few other big no-no’s.

  1. Include the <style> element in your HTML file,
    don’t reference it externally. Some providers will strip it
    altogether, while others won’t use it if images are disabled. If
    you’re sending to Hotmail recipients, place the <style> element in the <body> and not the <head>.
  2. Avoid using CSS for positioning. The support is very limited and
    will more than likely result in a broken layout for most of your
  3. Don’t use Flash or JavaScript. Flash is poorly supported by most email environments and JavaScript will either get stripped or a security warning will be displayed to your recipients.
  4. Make sure you properly format your HTML and CSS. Leaving a tag open
    or overly messy HTML may result in your email being filtered as spam.
  5. If you’re targeting Gmail, make sure you do your CSS inline, the <style> element will be removed completely.

Don’t forget to test

No-one launches a new site without checking it in a few browsers
first and the same applies with your email designs. If you’re
sending a lot of HTML emails, you should try to test each new design in
the following environments before sending:

The only one you’ll need to pay for out of all of the above is
AOL, but they have very cheap plans perfect for testing for around
$5.95 a month. Also, you can always send it to a friend and get them to
test it for you.

Don’t forget though, once you get your email right, you can
generally re-use your template design and just add new content, so
you’ll only need to re-test occasionally.

Essential content

On top of getting your design and code right, there are a number of
items that you must include in your email content. We’re not
mucking around here, these are protected by law (at least in the US) and can land you in a whole heap of trouble if they’re not included.

The Must-Haves

  1. A working unsubscribe mechanism. You want to make it as easy as
    possible for your recipient to stop hearing from you. I recommend a
    single-click unsubscribe link.
  2. Your company name and physical address.

The Should-Haves

  1. A link to a web-based version so those having trouble viewing your email can check it out in their browser.
  2. A quick summary of how you got your recipient’s email address
    (they opted in from your site, they bought a product from you, etc).
  3. Your recipient’s email address, so they can verify that the email was specifically sent to them.
  4. A request to be added to your recipient’s address book to ensure images will be displayed by default.
  5. A text-only version of your email. Some of your recipients may set
    their email client to only show the text version of each email, so make
    sure send your email in multi-part format, which includes both the HTML
    and text-only version in a single email.

By following the guidelines mentioned above, you can ensure the best
email experience for your recipients and hopefully the best results for
your client.


Email Design Guidelines for 2006

  1. Never use images for important content like headlines, links and any calls to action.
  2. Use alt text for all images for a better experience in Gmail and always add the height and width to the image to ensure that the blank placeholder image doesn’t throw your design out.
  3. Add a text-based link to a web version of your design at the top of your email.
  4. Ensure your most compelling content is at the top (and preferably to the left).
  5. Test your design in a preview pane, full screen and with images turned on and off before you send it.
  6. Ask your subscriber to add your From address to their address book at every opportunity.

If you’re interested in the reasons behind these tips and learning just how important they are, read on.

Guideline 1) Design for images being turned off

Here’s something you might not know. Today, anyone using AOL, Gmail,
Outlook 2003, Outlook Express and the latest versions of many ISPs
email software will never see images in any emails you send them by

Now read that again so it really sinks in. For many of you, that can add up to more than half of everyone you ever send email to. But don’t take my word for it. Here’s a quick rundown of which major ISPs and email clients block your images:

Image Blocking by Major ISPs & Email Clients
Blocking Issue AOL
Gmail Hotmail Yahoo Outlook
w/o SP2
External images are blocked by default Yes Yes No No No Yes Yes No
User controls image-blocking settings Yes No Yes Yes Yes Yes Yes Yes
User clicks link to enable message’s images Yes Yes Yes No No Yes Yes N/A
Images enabled if sender is in user’s address book/buddy list Yes No Yes No Yes Yes Yes Yes
Images autoenabled if sender is on ISP whitelist Yes N/A Yes No N/A N/A N/A N/A
Alt tags displayed when images disabled No Yes No No No No No N/A
Preview window featured included No No No No Yes Yes Yes Yes
 Note: SP2 = Service Pack 2 upgrade for Windows XP Source: EmailLabs  

How ugly can things get?

When images are turned off, that design you worked so hard on can be
turned into an ugly mash of broken images and reformatted content.
Let’s take an example of how nasty this can get from a recent email I
received from Apple announcing the long awaited iTunes Australia Music

The Apple email with images disabled - click to see a bigger version The Apple email with images enabled - click to see a bigger version

Just makes you want to dive in and buy a few albums doesn’t it! Now,
I’m sure when they were putting together the creative they got all
excited about their recipients seeing the version on the right, but how
many potential customers did they lose when many of their recipients
saw the version on the left?

Tips to minimize the damage

While the Apple example is at the extreme end of things, many of us
commit lesser but just as dangerous email design sins every day. Here
are a few tips to minimize the damage of your images not being

  • Never use images for important content like headlines, links and any calls to action.
  • Add a text-based link to a web version of your design at the top of your email.
  • Get added to your recipient’s address book (see guideline 3 below).
  • Use alt text for all images for a better experience in Gmail.
  • Always add the height and width to the image to ensure that the blank placeholder image doesn’t throw your design out.
  • Test your design with images turned off before you send it.

Here are a couple of samples sent by Campaign Monitor customers of
email designs that are still very readable even with images disabled: Corporate Newsletter

The Webnames email with images disabled - click to see a bigger version The Webnames email with images enabled - click to see a bigger version


The VIEW News email with images disabled - click to see a bigger version The VIEW News email with images enabled - click to see a bigger version

You can see more examples of great email design in our design gallery.

Guideline 2) Allow for the preview pane

Today, up to half of your recipients could be using their email
client’s preview panes to decide if your email’s even worth checking
out. A preview pane shows a little vertical or horizontal snippet of
your email that is often no more than 2-4 inches in height or width.

While most web based email clients don’t use them yet, recent betas
of Yahoo! Mail and Hotmail indicate they will be soon. In the corporate
email scene, around 90% of email clients support preview panes.

Combine this with images being turned off by default and you quickly
see that what your recipient first sees is often completely different
to what you’re sending them.

Vertical or horizontal?

Around 75% of people who use preview panes go for the horizontal
version, while the remaining 25% prefer the vertical version. The
screenshots below show either option taken at 1024 x 768 resolution on
a PC running Outlook 2003 with images enabled.

Horizontal preview pane - click to see a bigger version Vertical preview pane - click to see a bigger version

At resolutions of 1024 x 768 or less, you really need to be diligent
in your design to ensure enough is shown to the recipient to encourage
them to check out the whole email.

Tips to minimize the damage

If you were hedging your bets, then you’d certainly be giving more
preference to the horizontal preview pane. In a perfect world though,
you’d be covering all bases by ensuring the best bits of your email
appear in the top-left corner and therefore in everyone’s preview pane.

To encourage preview pane users to open your email, you should:

  • Review your click-tracking reports to identify what content most of your recipients are clicking on.
  • Ensure this content is at the top (and preferably to the left) of your design.
  • Make sure this content is text-based and can always be read.

Guideline 3) Get in your subscribers address book

There’s never been a more important time to ask your subscribers to
add your From address to their address book. AOL and Yahoo! allow your
recipients to filter emails from unknown senders. Plus, images are
displayed by default if you’re in the address book for all AOL and
Hotmail recipients as well as anyone using Outlook or Outlook Express.

Tips to minimize the damage

The efforts to get added to your recipient’s address book don’t
start and finish with a request in each email, you should ask the
question at every touch point possible. As an example, here’s our subscriber confirmation page.
All our newsletters are sent using the From address of, so once you ask people to add you to their
address book, make sure you use the same From address every time you send to them.

At a minimum, make sure this request is made:

  • On the landing page after someone subscribes.
  • If you send a confirmation email, mention it in there as well.
  • In every email you send out.

How to avoid having your email being mistaken for SPAM

If you want to lessen your chances of being marked as spam avoid the following when creating emails:

  1. Using one or more lines of “YELLING” (i.e., all-caps) in the body of the message
  2. Including Microsoft executable programs in the body of the message
  3. Having at least 70 percent blank lines in the body of the message
  4. Having the message header indicate that the message was sent directly from dynamic IP address
  5. The message from field appears to not contain a real name
  6. The message from field ends in numbers
  7. The message header contains numbers mixed in with letters
  8. Message to: field contains space
  9. Message Reply to field is empty
  10. Subject has exclamation mark and question mark
  11. The subject in ALL-CAPS
  12. Message From: field contains the term “friend”
  13. Message subject includes the term “offer” or starts with an advertising tag
  14. Subject starts with dollar amount
  15. Subject contains “Double Your” / “As Seen”/ “For Only” /”FREE”/”Free Instant”
  16. The message contains excessive images without much text
  17. Incorporating a tracking ID number in the body of the message
  18. Message body claims NOT to be spam

Phrases to avoid :

Interactive Agency, email marketing strategies

Interactive Agency, email marketing strategies

For a great list of words to avoid so you don’t look like spam, check out

Interactive Agency, email marketing strategies

  • If your HTML message has more than 50% HTML tags, it may appear to be spam.
  • Use capitalization carefully – too many capital letters can be seen as “yelling” or feel “spammy”.
  • Keep your HTML simple – according to SpamAssassin, if your HTML message has more than 50% HTML tags, it may appear to be spam.
  • All caps in a subject line is a bad thing, as are including question marks and exclamation points.
  • Make
    sure the contents of the Name and/or Subject field are recognizable by
    your readers. Use your brand in one or both of these fields. Be
    especially careful with subject lines. Beware of starting your subject
    line with “free”, “hello” or a dollar amount. Never use FREE in CAPS in
    a subject line. All caps in a subject line is a bad thing, as are
    including question marks and exclamation points.

  • Avoid spam-like tactics (in the from line, subject line and email copy)
  • Excessive punctuation
  • Excessive use of “click here,” $$, and other symbols
  • Misleading subject lines
  • The words fr^e, guarant^e, sp^m, cr^dit card, s^x, etc.
  • *If
    these words are essential to your message, use a variation – fr*e or
    fr^e – as I did above, to avoid being incorrectly filtered.

Unfortunately, permission based email marketing, if not conducted
properly can be considered spam by consumers. So even though you may
have acquired permission from a user to send him/her email if you’re
not careful you may be classified as a spammer.

DoubleClick found that consumers have a fairly consistent view on what makes email spam. Be sure to avoid these 5 mistakes.

  • Don’t use deceptive subject lines that try to trick the user into opening the message.
  • Don’t send messages from an unknown sender and unknown “From” address.
  • Don’t include offensive subject matter in your message.
  • Don’t send email too frequently.
  • Don’t send irrelevant emails on topics not requested.

Passive Voice Is Redeemed For Web Headings


Active voice is best for most Web content, but using passive voice can
let you front-load important keywords in headings, blurbs, and lead
sentences. This enhances scannability and thus SEO effectiveness.

Traditional writing guidelines are clear on the use of passive voice:

  • Worst: The passive voice should be avoided.
  • Bad: The passive voice should be avoided by writers.
  • Better: Writers should avoid using passive voice.
  • Best: Writers should use active voice.

When structuring a sentence, active voice (“Actor does X to Object”) is usually better than passive voice (“Object has X done to it by Actor”)
because it more directly represents the action. As a result, readers
don’t have to jump through as many cognitive hoops when trying to
understand what’s going on.

For the same reason, it’s usually better to write a positive statement (“do X”) than a negative statement (“avoid Y”), and it’s almost always horrible to use double negatives (“avoid not doing X”). Again, the simpler the translation between the text and the user’s mental model, the easier the writing is to understand.

Typically, it’s even harder for readers to understand passive
sentences that don’t explicitly state the actor. This style can also
lead to additional usability problems if users misinterpret who’s doing
the action. For example, if you write “Social security taxes must be paid monthly” readers might think that employees have to pay the tax. In contrast, “Employers must pay social security taxes monthly” is clear and easy to read.

  • Usability increases when users need fewer mental transformations to convert a sentence into actionable understanding.

Writing style impacts website profitability: the
easier the writing is to understand, the more likely customers are to
plow through your words. Users don’t like doing hard work. That is,
users prefer effortless reading (to state it positively, and thus
improve readability).

When Passive Voice = $$$

Here’s the first draft of my summary for a recent Alertbox column, entitled “Tabs, Used Right”:

Yahoo Finance follows all 13 design guidelines for tab controls, but
usability suffers due to AJAX overkill and difficult customization.

Active voice, yes sir.

Fairly well written, check.

Complete sentence, not a fragment; no disapproving squiggles in Word.

All systems go, except for one nagging question: Does this blurb perform its main job — to attract users who scan SERP listings (search engine results pages) or other lists of possible destinations? No. It fails this mission horribly.

Don’t pass Go, don’t collect $200.

Users scan Web content in an F-pattern, and often read only the first 2 words of a paragraph. What are the first two words of my draft deck? “Yahoo Finance” — which has zero information scent for article’s target audience.

The column in question is about application design,
so it needs to attract readers who care about GUI widgets. People who
are interested in Yahoo or investments are not the targets.

(I used Yahoo Finance purely as an example in the column; I don’t actually discuss the site. I have written about Yahoo as a portal and about investor relations.
However, those articles are at other URLs; users attracted by the
misleading information scent created by leading with “Yahoo Finance”
wouldn’t find them.)

Here’s the rewritten summary, using passive voice to pull the payoff keywords to the front:

design guidelines for tab controls are all followed by Yahoo Finance,
but usability suffers due to AJAX overkill and difficult customization.

Because “13” is sufficiently short, users will likely fixate on the
first 3 words, not just the first 2, when they initially scan the
blurb. Also, numerals beat words when referring to specifics, so starting with “13” is even better at attracting the scanning eye.

So, why not start with “tab controls”? After all, these two words carry
the most information for the article and the target audience. The
reason is simple: The blurb will always display below the article’s
headline, which starts with the word “tabs.”

Given that users often read only a couple of words from each text element, you should reduce duplication of salient keywords.

  • Don’t use the same initial keywords in your headline and summary. You have 4 words to make your point, so use 4 different
    words. (Okay, I do bend this guideline a bit for this very article: it
    leads with “passive voice” in the headline and “active voice” in the
    summary. But in this case, “voice” is not a keyword on its own —
    it’s not an article about vocalization — and I need to grab
    people scanning for either active voice or passive voice, and both are
    2-word concepts.)
  • Avoid repeating any headline words in the summary,
    except for the most important one or two keywords. You can repeat these
    halfway through the summary to reinforce them for people who scanned
    past them in the headline.

ROI from Passive vs. Active Voice

Simple sentence structure, active voice, and positive statements have been key Web-writing guidelines
for more than a decade. I don’t want you to abandon these good ideas.
They do improve content usability in most cases, particularly for body text.

However, recent findings from our eyetracking research emphasized the overwhelming importance of getting the first 2 words right,
since that’s often all users see when they scan Web pages. Given this,
we have to bend the writing guidelines a bit, especially for elements
that users fixate on when they scan — that is, headlines, subheads, summaries, captions, hypertext links, and bulleted lists.

Words are usually the main moneymakers on a website. Selecting the first 2 words for your page titles is probably the highest-impact ROI-boosting design decision you make in a Web project. Front-loading important keywords trumps most other design considerations.

Writing the first 2 words of summaries runs a close second. Here, too,
you might want to succumb to passive voice if it lets you pull key
terms into the lead.

The importance of good page titles and summaries goes far
beyond traditional search engine optimization (SEO) and its narrow
focus on getting a high GYM rating (that is, a high ranking on Google,
Yahoo, and Microsoft search listings). Usable and scannable results in
your site’s own search engine greatly impacts your website’s conversion
rate. And search usability is key for intranet productivity.

Most text should use simple sentence structure. But sometimes, passive voice can increase ROI. Use it. Carefully.

Jakob Nielsen‘s
Alertbox, October 22, 2007


Imminent Demise of the Page View

Underneath the Internet advertising economy is a key metric that
dictates how properties are valued and how online media is bought and
sold – the page view.
While it’s not the only way to measure the health of a site (time spent
and unique users are among the others), it’s still very popular.
Unfortunately, the trusty page view is on life support and I give it
four years to live.

This may sound like heresy to most of you. After all, the page view
has served us well. It has established a universal way to measure web
sites. However, the metric is about to become a moot point.

The page view does not offer a suitable way to measure the next
generation of web sites. These sites will be built with Ajax, Flash and
other interactive technologies that allow the user to conduct affairs
all within a single web page – like Gmail or the Google Reader. This
eliminates the need to click from one page to another. The widgetization of the web will only accelerate this.

This is a dirty little secret
in the advertising business that no one wants to talk about. Media
companies love to promote how many page views their properties get.
They’ve used the data to build equity. They will fight it tooth and
nail to protect it, perhaps by not embracing interactive technologies
as quickly as they should. But that’s not going to stop the revolution
from coming.

Microsoft (an Edelman client) and Google are each pushing platforms
that are very interactive and reduce the need to turn pages. Over time
millions of users will grow to love these services. They will like how
they can accomplish so much so quickly, without ever having to go
anywhere else. Smart companies like ESPN and The New York Times get it
so they’re wisely establishing their own interactive platforms. But they’re in the minority.

As the page view platform crumbles, there’s going to be a shake out.
Everyone is going to scramble to find a metric that helps them compete
for ad dollars. Enjoy the show.


Seven Steps to Graphing Your Facebook Strategy

guest post is written by Dave McClure: startup advisor, angel investor,
PayPal alumnus, and Master of 500 Hats. Dave is organizing next
week’s Graphing Social Patterns conference on Facebook, covering
many of the topics and companies mentioned below. He’s also a
rookie instructor for a new Stanford class on Facebook apps, and an
unapologetic Facebook Fanboy and social networking addict. Sections on
virtual currency and ad networks contributed by Susan Wu, Charles River
Ventures and Sundeep Ahuja, AppFuel.

For nostalgic hippies in the SF bay area, this was the 40th
anniversary of 1967’s famous Summer of Love. But for every
Silicon Valley developer, entrepreneur, and VC who has a pulse
it’s been the Summer of Facebook.

While it’s easy to put aside geeky exuberance over the latest
insanely great technology, it’s impossible to ignore the growing
size and scope of Facebook, and the impact it’s having on
internet startups and traditional businesses alike. Over half of
Facebook’s 43 million users visit every day, spend an average of
20 minutes on the site, and view over 54 billion total page views per

In a few short months Facebook has quickly become one of the most
impressive user acquisition channels on the web, rivaling SEO & SEM
strategies for priority with new startups. Over 60 Facebook
applications have more than 1 million total users, and over 40 have at
least 100,000 daily users.

With the groundbreaking launch of the Facebook Platform this past
spring, and the subsequent runaway growth of Facebook Apps adopted by
millions of users this summer, the question on everyone’s lips
(including Google and Microsoft) has been: “So what’s your Facebook strategy?”. If you’re still scrambling to figure out yours, read on.

Seven Steps to Graphing Social Patterns on Facebook

Personally I’ve become addicted to Facebook, and in particular
with the Facebook Platform and the News Feed. I’ve spent hours
upon hours experimenting with new ways it provides to connect and
communicate, and recently began teaching a class at Stanford with
Professor BJ Fogg on how to build Facebook apps. In this article
i’ll explain how to use Facebook to make a big impact on your
business, and why it’s substantially different than any other
social network that’s come before.

Here are seven major aspects of Facebook you can use to increase the visibility of your startup, business, product or service:

1. Set Up Your Graph: Profiles & Privacy
2. Make Connections: Networks, Groups & Events
3. The Need for Feed: Your [Shared] Social Activity Stream
4. Share Your Content: Share & People-Tag Your Stories & Media
5. App to the Future: The Facebook Platform, APIs, & Applications
6. Pay to Play: Ad Networks, Sponsored Stories, & Paid Distribution
7. Show Me The Bunny: Gifts, Points, & Virtual Currency

I’ll explore each of these items in more detail after the
jump. For developers and marketers interested in learning more,
we’ll be covering these topics in depth next week in San Jose at Graphing Social Patterns, a conference on the business and technology of Facebook and social networking.

I. Set Up Your Graph: Profiles & Privacy

It all begins with your Facebook profile, your privacy settings, and
a few friends. Your profile is the virtual depiction of YOU on Facebook
— depending on how you customize your Facebook privacy settings,
you can display as much or as little of yourself as you care to the
entire world, just to your friends, or to no one at all. This includes
your notes, photos, videos, your one-liner profile status, your
relationship status, your location & contact information, the
messages left on your wall, etc. See an example below — currently
I expose most info to everyone in my network, however I only share my
phone and IM info with my friends:


Your profile also includes visual representations of your apps. Up
until a few months ago, Facebook profiles stood in stark, locked-down
contrast to the technicolor, anything-goes world of MySpace profiles.
But with the introduction of Facebook apps, you now have the ability to
make just as much of a mess of your profile on Facebook as on MySpace
(ok, well almost). At least with Facebook you have a structured mess
— each app has its own clearly defined profile real estate.
What’s really going on under the covers is that Facebook has
aggregated a wide variety of data into one simple page that’s
[usually] easy to digest & manipulate. In fact, several Facebook
profile features appear to be simplified versions of other internet
services (FB note = blog, FB status update = twitter, FB share =,
etc). That’s really helpful for n00bs like Ted Stevens and me.
Finally, the list of friends you collect on Facebook defines your
relationship with the rest of the community. Your social graph is the
collection of nodes and connections representing all your friends,
along with relationship attributes that define them. Each of these data
elements are the inputs Facebook uses to grok, matrix, and distribute
the river of information called the Feed (more on this later).

II. Make Connections: Networks, Groups & Events

In addition to your personally-defined set of social graph
connections, you also have a set of connections defined by your
participation in Networks, Groups, and Events. A Network is a group of
people that are part of a common workplace, geographical location, or a
school. This is a formal affiliation as defined or approved by
Facebook, and typically you need to have an email address to
participate (except for geographical groups). A Group is a collection
of people similar to a Network, except it’s user-defined and
members can be selected, invited, or simply join to participate. An
Event is a time- and or location-specific occurance, that also may have
a collection of associated individuals who have RSVP’d to attend
(or not). [note: there may also be a new ‘Friend Groups’ container coming soon from Facebook… watch this space].


All three of these Facebook ‘container’ apps for
collections of people have associated URLs, content, mailing lists,
calendars, walls, discussion boards, and other types of neatly
integrated functionality. While they may not have all the bells and
whistles available with other tools like YahooGroups or Eventbrite or a
Wordpress blog, for most basic purposes they work pretty well.
Furthermore, since they’re already integrated with Facebook,
everyone can become a user without much friction or hassle.Once you
join a network, group, or event, your social graph expands to connect
with all the members therein. Your ability to connect, contact, and be
contacted is now extended through the community participating in these
collections. You can easily message or post to members of these
communities, and you also have visibility into their Feed… as do
they with you. While other social networks such as Orkut and Tribe (and
YahooGroups) have provided similar functionality in the past, the
simplicity and ease with which these sub-communities can be established
within Facebook are what make it such a powerful tool for communication.

III. The Need for Feed: Your [Shared] Social Activity Stream

Of all the feature innovations Facebook has introduced, News Feed
(& Mini-Feed) is for me perhaps the most impressive — because
it’s a very simple yet elegant way to share information. A year
ago when these features were first introduced, most of the noise that ensued was due to the initial user revolt
that occurred with the display of what users presumed was (previously)
private information. However, after the storm subsided and people began
to learn to control their privacy settings, they’ve discovered
News Feed is a pretty cool way to stay updated on what your friends are
doing. It contains information on new photos, new videos, wall
comments, events people are attending, links they’ve posted,
gifts they’ve given… in short, it’s a personal
newspaper on all the social activities you and your friends are part
of. Simply put: it’s the collective stream of our shared social activity.


As you add information, make comments, submit content, or perform
other activities in the Facebook environment, these actions are
recorded in your Mini-Feed, and are contributed to the overall Feed for
the community represented by your social graph. Note if you wish to
control information being submitted to the feed, check your Mini-Feed
for what news items have been submitted… you can delete or hide
certain stories to limit external News Feed visibility.Why is the Feed
so amazing? Because it isn’t really the technology that’s
novel… rather it’s the change in human behavior brought
about by the Feed that is so new and interesting. These days it’s
common for me to login to Facebook just to see the updates on News Feed
activity. When technology changes behavior, that’s when you know
you’ve made a real breakthrough.

IV. Share Your Content: Share & People-Tag Your Stories & Media

Once the News Feed construct is established, it’s interesting
to consider how you can use it to distribute stories and content and
media. By using the Post a Link or Share button
(either inside Facebook, or on the Facebook toolbar for Firefox, or
from the Share button for Internet Explorer), it’s easy to post
something either as a message to specific users, or to no one in
particular via the Feed. Facebook then uses a proprietary News Feed Optimization (NFO)
algorithm to determine when and to whom those news items are shown,
similar in concept to how Google interprets and prioritizes Search
Engine Optimization (SEO) for search content and links.One way in
particular to make sure content is made visible to others is to ‘people-tag’
various types of content, by referencing individuals within your social
network in notes, photos, and videos. This likely increases the
prioritization of feed content for the individuals tagged, and also
initiates a message to them that they’ve been tagged. Although
these actions can certainly be abused in a spam-like way, it can also
be a fun and interesting way to get people’s attention.


Lastly, one thing I love about the post a link feature is the way
Facebook automagically recognizes when I post a link or reference a
URL, and then picks up that URL and searches for any embedded images to
display, letting me scroll to select the one I think is the best
picture / most relevant. This is a very simple feature, but provides
such great utility in making link content more interesting / more

V. App to the Future: The Facebook Platform, APIs, & Applications

Certainly no Facebook conversation would be complete without a discussion of the Facebook Platform
and the APIs & apps that bring them together. With the launch of
Platform in May, Facebook has arguably delivered the most exciting and
innovative application development environment on the web today. As
mentioned above, there are already hundreds of startups building
Facebook apps, and a few larger brand name companies as well, with
thousands of apps shipped live in just a few short months. While not
every app has been a home run, there are certainly several examples of
early success from companies such as, RockYou, SocialMedia, iLike, Flixster, HotOrNot, Renkoo,
and others. These companies acquired millions of users by creating and
marketing Facebook apps that spread virally through the Facebook user
community via invites, notifications, the profile & the feed. And
while some of these success stories took advantage of lenient initial
standards for app invites and install requests, even after Facebook stiffened the rules new apps have continued to launch that demonstrate explosive growth and large user adoption.


Facebook Platform Anatomy diagram courtesy of Yee LeeHowever, the environment in which these apps live is maturing and changing rapidly. Facebook has already made a significant change
in how it measures apps, moving from an initial set of metrics that
focused on the total # of app users, to more recently emphasizing
active daily user #’s that prioritize user engagement over total
reach (an excellent move in my opinion). In addition to changes in
measurement, there have been notable changes
to Facebook APIs that have resulted in some amount of grumbling from
developers who have worked hard on code that has been quickly
deprecated. Most of these changes have been made for the benefit of
users, in order to reduce overly spammy apps that attempt to generate
massive app invites, notifications, and messages, or trick users into
taking actions they may not have intended. While these changes may
result in a safer and more vibrant ecosystem with lots of new features,
the downside has been an occasionally unpredictable and sometimes
unstable playing field with rules that have changed on a weekly basis.

Still most app developers seem to believe the opportunities outweigh
the risks, and while it appears new social platforms and social APIs
are coming soon
from Google, LinkedIn, MySpace, & others, Facebook continues to
dominate the focus and conversation of most developers and their
efforts. At the moment it is Facebook’s game to lose. This is
quite an astonishing accomplishment given the relative newcomer status
of Facebook compared to other internet titans Google, Microsoft, and
Yahoo, all of whom have large developer followings and platform
offerings. At the moment, none except Facebook have captured lightning
in a bottle by combining a rich web development environment with a
social networking platform to produce socially-aware apps and objects.
But you can bet the entire IntraWeb now recognizes the potential of
social applications and the social graph, and they are all gunning for
Facebook with competitive platforms and APIs as fast as they can.

VI. Pay to Play: Ad Networks, Sponsored Stories, & Paid Distribution

(this section contributed by Sundeep Ahuja, AppFuel)

As developers compete to access the social graph via apps,
advertising networks compete to access the pocketbooks of those same
developers. At the moment most of these ad networks’ initial
adoption appears to be coming primarily from new apps who want
distribution and are willing to pay for it, rather than traditional
‘off-Facebook’ brand businesses. That said, the promise of
larger advertising dollars on Facebook remains a huge brass ring for
both emerging ad networks on Facebook as well as Facebook itself.

There are three main categories of ad networks operating on Facebook:

* app factories that cross-promote applications
* cross-promotion networks allowing publishers to pay to promote apps (or get paid to promote other apps)
* companies enabling off-Facebook advertisers to reach Facebook users

The first category of networks are the application factories that
cross-promote their own apps, with RockYou, Slide, and Social Media
being the biggest. The second category are cross-promotion networks
giving publishers a way to promote their applications while getting
paid to promote other applications; these include Cubics, fbExchange,
and (again) Social Media. Yet a third category of networks is offering
an alternative to off-Facebook advertisers that want access to Facebook
users, but don’t want to use Facebook’s own advertising
solutions. A few of the cross-promotion networks do this, as do Lookery
and VideoEgg (primarily a video network).

In bringing off-Facebook dollars to the platform these networks are
up against a rather formidable competitor: Facebook itself. It’s
no secret that Facebook intends to iterate its advertising
offering in a big way, and MySpace recently made headlines for doing
the same. It’s anyone’s guess how Facebook will choose to
deal with third-party ad networks, though most of them say
they’re willing to risk the competition due to the size of the
opportunity in front of them.


Finally, third-party advertisers can also target Facebook users
through Facebook itself, and via their partnership with Microsoft. For
starters there’s Microsoft Digital Advertising Solutions, which
has some interesting Facebook demographic stats.
There are also Flyers, Sponsored Groups, and Sponsored Listings in the
Facebook Marketplace. However, the most powerful mechanism is Sponsored
Stories, which show up in users’ News Feeds. Facebook introduced
a whole new advertising paradigm by inserting stories into the
originally-controversial newsfeed, and will likely be iterating on the
potential for this feature in the future. In fact, don’t be
surprised if Facebook’s ‘AdWords’ equivalent —
a self-service Sponsored Stories interface — is coming next. The
adoption and monetization of this future service is probably where a
significant amount of Facebook’s future revenue will come
from… or not.

As a second approach to Facebook, some notable brands are building
their own apps hoping to use the platform for engagement rather than
impressions. Though success to date has been varied, the premise is
powerful; just as big brands have spent the last decade catching up
with startups by building their own websites and e-commerce services,
and more recently working on SEM & SEO techniques, they are now
investigating how to develop Facebook applications to reach their
target customers. It’s still early, but by combining rich user
profiles and a social application platform, Facebook is setting up an
incredible advertising opportunity.

VII. Show Me The Bunny: Gifts, Points, & Virtual Currency

(this section contributed by Susan Wu, Charles River Ventures)

Not too long ago, I wrote a TechCrunch article on virtual goods
and their potential to become the next big business model. Since then,
there have been innumerable experiments with virtual currency apps on
Facebook, but most of them are still missing the big picture: used
effectively, virtual currency can greatly enhance user engagement.

A robust virtual economy is a good sign that you have a highly
engaged user base. Virtual goods are pretty much meaningless without
context; there is direct correlation between the engagement level a
user feels with your product and their willingness to purchase virtual
goods. Thus, if you help your users feel more like citizens rather than just bystanders, they are much more likely to participate in your virtual economy.

Yet the converse is also true: a well implemented virtual currency
system can greatly increase user engagement and foster valuable types
of social interaction. By “valuable” I mean social
interaction that catalyzes network effects and results in residual
value from your user base. Virtual currency isn’t just a
zero-marginal-cost way of extracting more money from your users —
it’s also a primary means of exposing your community’s core
values and encouraging behavioral patterns that increase the value of
your app. Much the same way that a leaderboard has a way of focusing
users attention towards certain metrics (ex: Digg below left is
essentially a community driven by leaderboards), virtual currency can
be used as an efficient way of signaling a community’s implicit
and explicit shared values. Then you, as the community traffic cop, can
put down the right Yield, One Way, and Exit signs in the right places
to generate the most optimal community traffic flow.


There are 3 major types of virtual goods: decorative, functional,
and behavioral. Decorative goods are those primarily geared towards
self expression. Functional goods are those that meaningfully alter
your user experience. For example, a suit of armor in World of Warcraft
that confers a special advantage to you would be a functional virtual
good. Behavioral virtual goods are graphical icons that capture some
sort of social interaction. This is the type that is most prevalent on
Facebook today. Virtual gifts are the best known example of this
category of virtual good.

Two of the top 10 Facebook apps, X Me and SuperPoke!, are
essentially just interaction tools. In the X Me screenshot above right,
each of the icons – whether it be Love, Punch, or Kiss – is
an encapsulation of a specific social interaction. Though it may not be
purposeful, these types of casual apps are training users to understand
how to interact with virtual goods. I can easily see how these apps
become platforms that launch broader virtual currency systems. For
example, expanding this app to allow users to attach custom graphics to
their custom actions would create a new, rare class of virtual objects.