• The Building Blocks
• Step 1: Use HTML Tables for Layout
• Step 2: Add in CSS Styles
• Step 3: Add HTML Email Best Practices
• Step 4: Code for GoogleMail, LotusNotes, and Outlook 2007
• FAQs: Create HTML Email in Outlook, Background Images, Create Anchor Links in Email, Add Video to HTML Email
• “How to Code HTML Email” Slide Presentation
• Where to Learn More about Coding HTML Email, Including Free HTML Email Templates

Please note a version of this article is published at SitePoint which includes links to related articles on their site. This article has been online since 2004.

Changes to this article are noted at the bottom of this article.

The Building Blocks

Whether you use a template or hand code (my preference), there are two key building blocks for html email:

• HTML tables control the design layout and some presentation
• Inline CSS controls presentation, for example, colors for backgrounds and fonts

The quickest and easiest way to see how HTML tables and inline CSS interact within an HTML email is to download templates from Campaign Monitor and MailChimp, two email delivery services that provide free templates (links are below in the Where to Learn More section).

When you open up their templates, you will notice several things we’ll discuss in more detail later:

• CSS style declarations appear below the BODY tag, not between the HEAD tags. If a template has CSS declarations above the BODY tag, it’s simply a convenience: the email delivery service (Campaign Monitor, in particular) moves these declarations down to inline styles as part of their email delivery process.
• No CSS shorthand is used: instead of “font: 12px/16px Arial, Helvetica” break this shorthand into its components of font-family, font-size, and line-height.
• SPANs and DIVs are used sparingly to achieve specific effects while HTML tables do the bulk of the layout work.
• CSS style declarations are basic with no hacks required.

Step 1: Use HTML Tables for Layout

Determining the layout design is the first step in coding an html email. Single column and two-column layouts work best for emails because they control the natural chaos that results when a lot of content is pushed into such a small space as email.

• With a one column layout, typically there is a header that contains a logo and some (or all) navigation links from the parent website. Below that are the intra-email links to stories further down in the email. At the bottom of one column layouts are the footer (often with links that repeat the top navigation) and detailed unsubscribe instructions.
• Two-column email layouts also use a header and footer. They also typically use a narrow side column to contain features and links to more information. The wider column holds the main content of the email.
• Promotional emails follow the same rules but with much less content and links. They often include one to two messages and sometimes one big image with small explanatory text and links below the image.

No matter how your email is designed, the most important content (or reference to that content) should appear at or near the top of the email design, so it is visible immediately when a reader opens your email. The top left of an email often is the first place people look when they open an email.

All of these email layout possibilities can be coded easily with html tables to divide up the space into rows and columns. Using html tables also helps with problems caused by different email software and how they can read the same email code differently.

The basic approach follows these steps in coding the email layout with html tables:

• For a two-column layout, create one table each for the header, the center two content columns, and the footer. That’s three tables. Wrap these tables into another table that “wraps” or “frames” the other tables. Use the same approach for one column layouts except the content table has one column. This approach helps with email designs that break images into multiple table cells. Otherwise, a single table with TD rows for header (with colspan=2 if the design is two column), content, and footer should display fine for all but Lotus Notes email software.
• Use the HTML table attributes within the TABLE and TD tags, for example, to set the table border=0, the valign=top, the align=left (or center, if that is the design), cellpadding=0, cellspacing=0, and so on. This primarily helps older email readers to display the html email in a minimally-acceptable way.
• Set the HTML table border=1 to help debug any problems with the internal alignment of TR and TD tags in development. Then change it back to border=0 for testing and production.

While this approach might offend purists who prefer to code to the latest standards, you do not have to be a complete primitive. No matter how badly LotusNotes displays html email, resorting to HTML FONT tags is not required (although use of FONT tags cannot hurt, honestly). And while Outlook 2007′s HTML rendering engine is less than perfect, it does display basic HTML tables just fine.

Step 2: Add in CSS Styles

Once the email layout is coded as a set of nested HTML tables, the next step is to add in CSS styles. Here are the steps to follow:

• First, put style information (style=) into the HTML tags, for example, TABLE, TD, P, A, and so on.
• Place the CSS STYLE declaration right below the HTML BODY tag. Do not use the CSS STYLE declaration in the HTML HEAD tags as is done when coding web pages. Google Mail, in particular, looks for STYLE anywhere in the email and (helpfully) deletes it. And don’t bother to use CSS LINK to a stylesheet. Google Mail, Hotmail, and other email software ignore, modify, or delete these external references to a stylesheet.
• For the frame table, the one that contains the header, content, and footer tables, style the table width at 98%. It turns out that Yahoo! mail needs the 1% cushion on either side to display the email properly. If side gutters are critical to the email design, set the width at 95% or even 90% to avoid potential problems. Of course, the tables inside the frame (wrapper) table are set for 100%.
• Put general font style information in the table TD closest to the content. This can mean repetitive style declarations in multiple TD cells. Put font style definitions into heading (e.g. H1, H2), P, or A tags only when necessary.
• Use DIVs sparingly to float small boxes of content and links to the right or left inside a table TD cell. Google Mail appears to ignore the CSS Float property but Yahoo! and Hotmail work fine. Outlook 2007 ignores floats. Sometimes it is better to code a more complex table layout than rely on the Float property. Or, since email is easy to clutter, ask that the design put the floated content in the narrow side column. Floats are the one part of an email design that might require the design be reworked.
• While DIVs appear to be barely useful, SPANs appear to work almost every time because they work inline. In some cases, SPANs can be used to position text above or below content, not just to color or re-size type.

If you download and study the email templates from Campaign Monitor and Mail Chimp, you’ll see they treat the frame table, the one that wraps the tables that hold content, as if it were the HTML BODY tag. Campaign Monitor calls it “BodyImposter” which is a great way to think about the frame or wrapper table. From a CSS perspective, the frame table does what the HTML BODY would do if services like Google Mail didn’t disable or ignore the BODY tag.

Step 3: Best Practices

There are several best practices to follow to ensure your email code works well.

With the html email coded as described above, the next step is to test the email in a variety of email software. Often this will identify problems that require workarounds.

The first test tools to use are the Firefox and Internet Explorer web browsers. If the email displays well or perfectly in both browsers, chances are good that testing the email in Outlook, Yahoo!, Google Mail, and other services will reveal only minor problems. You also might want to use the Internet Explorer 6 web browser to test for Outlook 2003 which uses its rendering engine (see Resources below if you need to download IE6).

Once the email appears fine in the two web browsers, use an email delivery service to send the email to a range of test email accounts. Ideally this should include accounts with Yahoo!, Hotmail, and Google Mail.

Which test accounts are used, however, should be determined by the domain names in the email address list of people who will receive the email. For example, if there are few or no AOL subscribers on this list, then it may be a waste of time and money to set up an AOL email account.

Here are the most common code tweaks that are found in this test phase:

• Sometimes a switch from percentage widths to fixed widths is needed. While this is not optimal, because people can and do resize their email windows when reading, sometimes using a fixed width is the only way for a layout to display properly in multiple email software.
• If there is a spacing issue with the columns in the email design, first tweak the cellpadding and cellspacing attributes of the HTML tables. If that does not work, use CSS margin and padding attributes. HTML spacing works better with older email software than spacing with CSS.
• Image displacement can occur when a TD cell is closed right below the IMG tag. This is an ancient HTML problem. Putting the </td> right after (on the same line as) the IMG tag eliminates the annoying and mystifying 1 pixel gap.

In addition, the following best practices are recommended:

• Avoid javascript. Most email software disables javascript.
• If an image is cut up and spread across several HTML table cells, test the email with many test accounts. Sometimes it looks great in Outlook but shifts by 1 pixel or more in Hotmail and other services. Also consider putting the image as a background image on a new html table (set the background= value to the URL of your image) that encases all the table rows and columns that would display parts of your background image; sometimes this achieves the same effect as cutting an image up but with less code and better results. Note that Outlook 2007 does not display background images. Be sure to test your email code with your target email software. (Campaign Monitor has published a solution to the background problem with Outlook 2007 and 2010, Add a Background Image to your Email in Two Simple Steps.)
• If you use background images, use the HTML table attribute background= instead of CSS. It works more consistently across email software, for example, GMail.
• Store the email images on a web server, preferably in a folder separate from website images, for example, in /images/email not /images. And don’t delete them. Some people open emails weeks or months later, the same way people use bookmarks to return to websites.
• Be sure all your images use the alt, height, and width parameters. This helps with Google Mail as well as when a reader has their images turned off. However, Outlook 2007 does not recognize the alt= parameter.
• Use the target=”_blank” attribute for the HTML A tags so that people reading with a webmail service don’t have the requested page appear within their webmail interface.
• While a 1×1 pixel image can be used to force spacing to create a precise email layout, spammers use 1×1 pixel images to determine if their email has been opened.
• Avoid a big image above the fold in the email. This is another classic spammer practice and can increase the likelihood an email will be tagged as spam.

My final test is to view the HTML email with images turned off. Outlook and some other email software set images off by default, to prevent spammers from knowing your email address is active. I set images off in my code by using my editor’s search and replace to delete some part of the src= URLs in my file.

Make sure your email content displays fine without images. For example, if you use a background image to provide a background color with white font color over it, make sure the default background color for that part of the HTML table is dark, not white. Also be sure your alt=, height=, and width= parameters are set for images so they can help readers understand your content without images. Turning off your images will help you catch these issues and ensure the HTML email will display effectively if people see your email with images off.

Once the html email is tweaked so that it displays well or perfectly in the test email accounts, the next step is to go through a checklist. Verify that

• The From address displays properly (as a name, not a bare email address)
• The subject line is correct
• The contact information is correct and visually obvious
• The top of the email has the text, “You received this email because … Unsubscribe instructions are at the bottom of this email.”
• There is text asking readers to add your From address to their email address book
• The top of your emails include a link to the web version of your email.

If it is important to know absolutely everything wrong with the html email code, try a service like Browsercam.com or LitmusApp.com. These services show how your HTML and CSS code will display as email or, in the case of Browsercam, as a web page.

Step 4: Coding for GoogleMail, LotusNotes, and Outlook 2007

Google Mail, LotusNotes, and Outlook 2007 present special coding problems. The good news? If you code to account for their oddities, your html email code is more likely to display well in most if not all email software.

Because Google cannot control how senders will code CSS and HTML, they have to take steps to ensure their application displays properly regardless of the code quality of the html email that is displayed.

As a result, Google Mail acts like an artifact of the mid 1990s when web standards were primitive. It takes some work, but it is possible to crack open a Google Mail page and see just how convoluted their approach is to rendering html email.

For one thing, Google Mail deletes any CSS style reference to a set of styles, no matter where it appears in the email. And fonts displayed in html tables have the odd habit of appearing larger than intended no matter how the html email is coded.

Here are coding techniques that appear to work well in Google Mail and older email software:

• Define the background color in a TD cell with bgcolor=, not the CSS style.
• Use the background= attribute in the TD cell for background images, not the CSS. A corollary is that the background image can be made as tall as needed. If the content of an email template might be short or tall depending on the email content, using an extra-tall background image this way lets the email layout height shrink or expand based on the height of the copy from one email to the next. Note, however, that Outlook 2007 ignores background images. (Campaign Monitor has published a solution to the background problem with Outlook 2007 and 2010, Add a Background Image to your Email in Two Simple Steps.)
• If it works better, use the padding style to control margins within a TD cell. The margin style does not work in these cells. Padding does work.
• If a border around a TD cell is needed, Google Mail displays a border when defined in a DIV but not when defined as a border style in a TD tag.
• If a light colored link against a dark background color is needed, put the font definition in the TD cell (so it applies to P and A tags equally) then add a color= style to the A tag.
• If the P and A fonts appear to be different sizes, wrap the A tag in a P tag.
• Google Mail aggressively uses the right column of their interface which squeezes the html email into the center panel. Be sure the padding style in the content TDs is set at 10 pixels all round so text does not smash against the left and right edges.
• When testing an html email with a Google Mail account, it is likely one or more missing font styles in the TD, H1, H2, P, A, and other tags will be found. Inspect every font carefully to make sure Google Mail displays the fonts correctly.

Besides Google Mail, another hazard programmers face when coding email is less obvious: LotusNotes. Many large corporations continue to support and upgrade their Notes installations. As of 2004, IBM reported that 95 million people used Notes. Unfortunately, it is impossible to tell which companies use Notes. So code html emails as described in this article. The more primitive the code, the more likely it will work well, if not perfectly, with Notes.

That said, it is quite possible that Notes will introduce quirks that beggar belief, for example, converting images to their proprietary format. Or Notes will simply ignore flawless basic html in one email but display other html fine in another email.

Here is what apparently helps Lotus Notes display html email:

• Use a frame table that contains all the internal layout tables, for example, for the header, content, and footer. This keeps the email together in one chunk of html. Pieces of the layout are less likely to wander when displayed in Notes.
• Create a gutter around the frame (wrapper) table by setting the width to a percentage and/or using the cellpadding to at least 5.
• Don’t use a style declaration in the head tags. It is the proper way to code to standards, but Notes (like Google Mail) might delete your styles. Rely, instead, on inline styles within the TABLE, TD, H1, H2, P, A, and other tags. However, as noted in comments below by Yvonne, Notes 8.5 doesn’t recognize inline styles in the TD cells, only DIVs within a TD cell. You’ll have to experiment by coding and sending test emails.
• Use absolute URLs to images stored on a web server. Notes cannot be prevented from converting images, if it does, but using remote images might help.
• Intra page jumps, using named anchors, rarely work in Notes, if ever. It is best to avoid links that jump down the email to a specific piece of content.
• Avoid colspans in the HTML table layouts. Notes apparently only handles basic table layouts, especially older versions of the software.
• Be sure TD cell widths have accurate widths. Unlike web browsers, which automatically make all cells the widest defined width, Notes sizes each TD cell based on its defined width.
• Centering an email layout usually does not work in Notes. Email layouts will have to be left-aligned.

Using these techniques for Google Mail and Lotus Notes also will ensure your emails display fine in Outlook 2007 with its older HTML rendering engine. Microsoft has published details about what their email software will and won’t display properly (see Resources below for the link). And the Email Standards Project has additional details. They also lobby companies like Microsoft to improve their products.

The bottomline with Outlook 2007, LotusNotes, and Google Mail is that it requires coders to make sure their HTML email code works across most email software. That means simple, standards-compliant code works best in most if not all situations.

Many people who receive email prefer HTML over text for any number of reasons. For programmers, however, the task of coding an HTML email appears both simple and horribly complex. Hopefully this article has described many of the issues and coding strategies that work across email software so that you can code HTML emails effectively.

What is the best idea to take from this article? If there is a choice to be made between a simple coding solution and a more complex solution, simplicity always works better.

Frequently Asked Questions

How to Create HTML Email in Outlook

The basic approach is to create your html email as a separate html file and then create a signature file and use your html email as the signature file. Then you open a new email message and add the new signature file. This prevents Outlook 2003 from helpfully converting all your precious html code into text. If you only have Outlook 2007 or later, unfortunately the software no longer supports HTML code in email signature files.

To create a signature file in Outlook 2003:

1. Select Tools from the top menus, then Options, then the Mail Format tab in the Options pop-up that will appear.
2. Down on the lower right of the Mail Format tab is a Signatures button. Click that button and a Create Signature pop-up will appear.
3. Click the New button on the Create Signature pop-up and a Create New Signature pop-up appears. Give your new signature a name and select Use this File as a Template and browse to your HTML email.

Then create a new email message, click in the body of your email message, select Insert from the mail dropdown menu and Signature then your new signature file.

People usually ask this question because they want to send html email from their internet account. Don’t. Unless you know every person on your email list, too many bad things can happen if someone tags your email as spam. If you send email through your business domain name, for example, all your email will be tagged as spam. And you will be left to figure out how to get off any blacklists. Even if you know everyone on your list, your internet provider may have a limit to how many messages can be sent and may boot you off their service. It’s far less hassle to pay an email service provider to deliver your email and worry about spam blacklists.

How to Use Background Images in GMail, Lotus Notes, and Other Services

Using images as a background in an html email is problematic. The old way is to carve up your image and divide it among HTML table cells and rows, using the background= setting for the table. You also can put the image in a new html table that encases all the table rows and columns that would display parts of your background image; sometimes this achieves the same effect as cutting an image up but with less code and better results. However, Outlook 2007, Google Mail, Lotus Notes 6, and Live Mail do not display background images easily. Be sure to test your email code with your target email software. Whatever you do, be sure your email design degrades nicely if and when the background image does not display. If you use white text, for example, against a dark image, make the default background color a dark color.

How to Create Anchor Links in an Email

Like image backgrounds, links within an email do not always work. You should test first. Over the years, I have cracked open a few emails with intra-email links and find they use the basic HTML anchor tag to link to a defined name= bookmark. The only oddity I’ve seen is the addition of shape=rect in the anchor name code, as in, <a name=sometag shape=rect> But this was in an email full of images.

How to Add Video to HTML Email

It is difficult but possible to add video to your html emails. Campaign Monitor has a great article, “HTML5 and video in email“, that covers all the steps to make video available within email software clients that can display video while degrading well for email software that cannot display video in an html email. Their article includes test results across many email clients, as well as comments with more insights and results.

“How to Code HTML Email” Slide Presentation

I recently presented this information in a slide presentation, if it is useful:

My presentation also included a one-sheet with resources for coding HTML email newsletters.

Where to Learn More

Besides this article, these online resources should be very helpful:

Email Standards Project

http://www.email-standards.org/
Probably the best start point for understanding exactly how different email software complies with HTML and CSS. They also maintain an acid test they use to compare compliance across email software. And you can participate to help improve standards.

Free HTML Email Templates

http://campaignmonitor.com/resources/templates.aspx
http://www.mailchimp.com/resources/html_email_templates/
Both email delivery services actively test their templates over time with different email software. However, there are subtle differences to note. Campaign Monitor has its STYLE declaration within the HEAD tag while Mail Chimp does not. Be sure to test your final HTML code with whatever services are used by recipients in your email list.

Plain Text Email Design Guidelines

http://www.campaignmonitor.com/resources/plain-text-templates.aspx
This article has a number of simple ways to make text emails easier to scan.

Blocked Email Images

http://www.clickz.com/showPage.html?page=3413471
http://www.campaignmonitor.com/blog/archives/2005/11/email_design_guidelines_for_20.html
From 2004, the ClickZ article shows how major email software compares for blocked images and preview panes. The Campaign Monitor article goes into greater detail with actual examples and ideas how to combat default image off rendering of your emails, as well as designing your email to look okay in preview panes.

Word 2007 HTML and CSS Rendering Capabilities in Outlook 2007

http://msdn.microsoft.com/en-us/library/aa338201.aspx
The official Microsoft description of what Outlook 2007 will and will not render for HTML and CSS. Includes a link to a validator that works in Dreamweaver, as well as Microsoft editing tools.

A Guide to CSS Support in Email

http://www.campaignmonitor.com/blog/archives/2007/04/a_guide_to_css_support_in_emai_2.html
Campaign Monitor, an email service provider, has taken Xavier Frenette’s excellent work documenting CSS performance in a few email clients and expanded it to include Gmail, Hotmail, Yahoo! and Windows Live Mail, as well as for the PC they cover Outlook 2003 and Outlook Express, Lotus Notes, and Thunderbird and for the Mac they cover Mac Mail, Entourage, and Eudora.

MailChimp Email HTML Coding/Delivery Guide

http://www.mailchimp.com/resources/email_marketing_guide.phtml
Lots of great information about all aspects of html email, including how spam filters work.

Safe CSS Styles for HTML Email

http://www.danielneumann.com/blog/safe-css-styles-for-html-emails
A simple list of styles by Daniel Neumann that test out okay for most email software clients.

CSS Support in HTML Emails of Hotmail, Yahoo! Mail, and Gmail by Xavier Frenette

http://www.xavierfrenette.com/articles/css-support-inwebmail/
This is excellent research and style by style results that show how these three webmail services display CSS.

Secrets of HTML Email Series

http://www.graphics.com/modules.php?name=Sections&op=listarticles&secid=16
Some of this information is old but they have a good piece on Lotus Notes.

Lotus Notes Trial Software

http://www-128.ibm.com/developerworks/lotus/downloads/
Free downloads of their latest software if thoroughly testing an email with the Notes client software is needed.

HTML Email and Web Page Testing Services

http://www.mailchimp.com MailChimp Inbox Inspector
http://www.campaignmonitor.com/testing/
http://www.browsercam.com Browsercam also has updated their service to display your pages at a variety of screen resolutions.
https://browserlab.adobe.com/ Adobe BrowserLab currently is free and available anywhere with a modern browser. It’s easy to use and displays the full range of bad browsers, specifically, IE6 and IE7. But it also shows Chrome, Firefox, and Safari.
http://www.litmusapp.com
Test compatiblity of your web pages with a variety of web browsers and operating systems. For email, Browsercam simply shows you all the warts in your html code, even though your email might work fine in Notes, Google Mail, and other difficult email software environments. Litmus shows how your email appears in email software.
http://www.returnpath.net/commercialsender/monitoring/ ReturnPath, an email service provider, also has a service to validate email delivery across platforms that is comprehensive, according to Daniel Neumann in comments below.

Best Practices For Bulletproof E-Mail Delivery

http://www.smashingmagazine.com/2007/10/16/best-practices-for-bulletproof-e-mail-delivery/
Excellent overview with some interesting ideas, resources, and details, for example, sending emails on Tuesdays and Wednesdays from 2-3 p.m. That mirrors my experience for lists with business email addresses (people come back from lunch and do email before meetings or getting back to work). The best way to ensure delivery, however, is to use email inspection services provided by email delivery vendors: it’s their job to keep up with what works best to deliver emails.

Testing Internet Explorer 6 Web Browser

Microsoft’s Expression Web SuperPreview lets you see how your email (or web pages) look in software that uses the Microsoft web browser engine. Unfortunately, the Preview portion is not free. You have to buy the whole package of Expression Web 3 software. Adobe’s Browserlab site is free and might be a better option to check small changes and validate your html email displays fine.

Standalone Internet Explorer 6 Web Browser

http://tredosoft.com/Multiple_IE
This free software lets you run install and run IE6 and IE7 without causing conflicts. With Vista and now Windows 7, this only works at installing IE6 because Windows only lets you have one IE running at a time. Better to use BrowserLab to test against email clients that use the IE6 or IE7 html rendering engine. Also, Microsoft’s Expression Web Super Preview is an easier and better option for the future.

Animation

Flash uses the frame-based animation model. In frame-by-frame animation, we create an object for each frame to produce an animation sequence. For example, if you want to move something across the screen in 3 seconds, calculate how many frames 3 seconds will take, then calculate the matrices required for each frame along the way. Keep in mind that the player won’t actually maintain a frame rate unless you embed a blank audio track; otherwise, 3 seconds might turn out to be 2 or 6 or 5.

Silverlight is based on the WPF animation model, which is time-based instead of frame-based, so you define the start and end conditions, and it figures out how to do it. No need to deal with matrices like with Flash. Also, no need to calculate the positions of objects in various frames.

File Size

Flash uses a compressed format, and text and images are embedded in the movie, hence the file size of a Flash component is relatively small.

Silverlight uses XAML for its description language, and it is non-compressed, so the size of a Silverlight component is usually larger.

Scripting

ActionScript is used to program Flash objects. ActionScript is an object-oriented language with a full range of controls for designing user interfaces. And it can be integrated with back-end technologies that use other languages and frameworks, such as PHP, ASP and Ruby On Rails. It comes with a huge, powerful class library for developing online browser-hosted applications and stand-alone desktop applications.

For Silverlight scripting, you can choose from among a number of programming languages such as Visual C#.Net and Visual Basic.Net, including client-side scripting with JavaScript. C# and VB.NET can be used to write managed code that runs on and uses all of the enhancements and capabilities of Microsoft’s .NET framework.

Video And Audio

Flash supports multiple video formats. The latest codec is very high quality, and the bandwidth usage is nice. There is one problem, though: if you create a tool that outputs Flash content, the formats it supports aren’t really used by anyone else. The original video codec, Sorenson’s proprietary H.263 implementation, is a mutant version of H.263. The compression follows the spec fairly closely, but a bunch of features were left out, and you can’t exactly just go find complete specs on how to build your own encoder.

Silverlight implements the industry-standard VC-1 codec for video, and supports WMV and WMA. Just about everyone already has Windows Movie Maker, but if someone doesn’t, it’s not a big deal because Microsoft makes available a free SDK encoder for producing WMA and WMV. So, not only would you be using formats that people would more likely be able to encode themselves, but Microsoft provides your product with SDKs if you want to do the encoding yourself.

Sound Processing

ActionScript offers a set of sound classes that can be used to generate and control sound in a movie. You can add sounds from the library while the movie clip is playing and control those sounds. If you do not specify a target when you create a new sound object, there are methods to control sound for the whole movie.

Silverlight doesn’t have the low-level audio APIs you would need to write an audio application in the browser. It doesn’t even support playback of WAV files because .NET has very little audio playback support.

Accessibility

Flash provides rich accessibility features for those who have hearing and vision problems or who rely on keyboard shortcuts. Providing captions for video solves accessibility challenges for people who are deaf and hard of hearing, but people who are blind or have low vision or other physical disabilities need the video playback controls to be keyboard-accessible and to function properly with assistive technologies such as screen readers and screen magnifiers. Users who rely on keyboard access can use a variety of familiar shortcuts to control video. Buttons such as “Play/Pause,” “Stop,” “Rewind,” “Mute” and “Closed Captions” can be tabbed to and activated with the spacebar. Slider controls such as for volume and playhead position controls can be accessed via the arrow keys, and the “Home” and “End” keys can be used to skip directly to the beginning or end of a range. The volume slider also accepts numeric keys to set playback audio levels in one quick step.

Silverlight 3 is the first browser plug-in to provide access to all system colors, allowing people with partial vision to use familiar operating system controls to make changes, such as switching to high-contrast color schemes for ease of readability. These features are far fewer than those provided by Flash.

Platform Compatibility

Flash supports Windows Vista/XP/2000, Windows Server 2003/2008, Mac OS 10.1/10.5 (PowerPC), Mac OS 10.1/10.5 (Intel), Linux 5, openSUSE 11, Ubuntu 7.10 or later and Solaris 10.

Silverlight supports only Windows Vista/XP/2000, Windows Server 2003/2008, Windows Mobile 6, Mac OS 10.1/10.5 (PowerPC) and Mac OS 10.1/10.5 (Intel). Because Linux and Solaris support is missing, users of those operating systems won’t be able to experience Silverlight on their machines.

Text Representation/SEO

Flash stores fonts using shape definitions and the player doesn’t understand TTF, hence we cannot separate the text layer from the movie. Typically the text written on a flash component was not SEO friendly however Adobe has made the modifications to Flash so that it will be indexable, and the search engines have begun to index Flash.

Currently Google is the only search engine that is noticeably reading Flash files. They have worked closely with Adobe to develop the right toolset for the Googlebot in order to read the files for indexing. Yahoo is working on it and MSN is working with their own format, Silverlight, so they probably won’t be developing the toolset necessary to read Flash files.

To read more about how to make Flash SEO friendly, please read the following articles:

• How to SEO Flash
• Google learns to crawl Flash

In Silverlight applications, user interfaces are declared in XAML and programmed using a subset of the .NET Framework. XAML can be used for marking up the vector graphics and animations. Text is deployed on web server as separate entity and can be read and accessed separately. Textual content created with Silverlight is searchable and indexable by search engines as it is not compiled, but represented as text (XAML).

Supported Image Formats

Flash supports almost all image formats.

Silverlight supports only PNG and JPEG file formats. Some other file formats are supported by Silverlight but in a limited way. A full list can be found here.

Socket Programming

The XMLSocket object implements client sockets that allow computers running the Flash player to communicate with a server computer identified by an IP address or domain name.

To use the XMLSocket object, the server computer must run a daemon that understands the protocol used by the XMLSocket object. The protocol is as follows:

• XML messages are sent over a full-duplex TCP/IP stream socket connection.
• Each XML message is a complete XML document, terminated by a zero byte.
• An unlimited number of XML messages can be sent and received over a single XMLSocket connection.

Silverlight doesn’t support socket programming. Silverlight supports sockets programming through the System.Net.Sockets namespace. Silverlight supports asynchronously sending data back and forth across a socket over ports ranging from 4502 to 4534. Silverlight supports cross-domain socket communications between a Silverlight application and any server, provided that a special security policy file is in place on the server.

Webcam Support

Flash has webcam and microphone support for live video and audio transmission, and using them is really easy in Flash. It takes only a few lines of ActionScript code to invoke the camera object.

• Camera.get	Returns a default or specified camera object, or null if the camera is not available.
  Camera.setMode	Sets aspects of the camera capture mode, including height, width and frames per second.
  Camera.setMotionLevel	Specifies how much motion is required to invoke Camera.onActivity(true) and how much time should elapse without motion before Camera.onActivity(false) is invoked.

Silverlight doesn’t support webcam or microphone.

Deployment

The Flash deployment package contains only a single Shockwave (SWF) file, and all images, text and animations are incorporated in this file. Because of the compressed nature of a Flash component, its images and text are not indexed by search engines, and thus not searchable.

The deployment process of Silverlight is far more complex; all individual components need to be deployed separately. The following components typically get sent to the client for each Web request of Silverlight:

• XML files,
• DLL files (if necessary),
• Silverlight.js file,
• Any other JavaScript file,
• Resources (images, audio, video).

Read the full documentation on Silverlight deployment.

Windows Application

A Flash movie can be compiled into a Windows application and run as a standalone EXE file. It can also be played on a desktop that has an appropriate Flash player.

Silverlight doesn’t support playing the movie as a Windows application.

Media Streaming

Flash provides no such service to host the content and application with them. Thus, building a video website with Flash is not as cost-effective as building one with Silverlight.

Microsoft Silverlight Streaming by Windows Live is a companion service for Silverlight that makes it easy for developers and designers to deliver rich media as part of their Silverlight applications. The service allows Web designers and developers to host and stream cross-browser media and interactive applications that run on both Windows and Mac. This service can be combined with Microsoft Expression Studio and other third-party tools to create and develop interactive contents.

Silverlight Streaming by Windows Live is currently in beta testing and offers 10 GB of free hosting for rich-media applications.

Conclusion

Selecting the right technology for rich Internet applications is often critical, and choosing between Flash and Silverlight depends entirely on your requirements. If you expect that some of your users will be on Linux or Solaris, then you should go with Flash. If you want your website to be indexed by search engines, then Silverlight may be better.

Besides, as Doug S. is points out in the comments, it’s worth noticing that a minority of web users actually have a Silverlight plugin installed on their machine, while most users do have Flash-support. The Flash Player 9 and higher support streaming of the H.264 video codec which means anyone with a video program that can output an MP4 can stream to Flash. There are literally hundreds of free apps on Mac, PC and Linux that can do this. It’s also important to mention that the latest version of Flash Player supports 3D rendering while Silverlight does not and that SWF, FLA, FLV, and AS are all open-standard formats, while Silverlight is 100% proprietary.

The following table summarizes the features discussed above. Rather than including arrows to indicate whether each platform has a particular feature, we’ve simply marked “better” to show the areas in which each technology beats out the other.

• Features	Flash	Silverlight
  Animation		better
  File size	better
  Scripting		better
  Video/Audio		better
  Sound processing	better
  Accessibility	better
  Platform compatibility	better
  Text representation/SEO		better
  Supported image formats	better
  Socket programming	better
  Webcam support	better
  Deployment	better
  Windows application	better
  Media streaming		better

Further Resources

The following articles are suggested for further reading:

• An Overview of Silverlight
• Silverlight vs. Flash: An Analysis Report
• Flash vs. Silverlight: Theming and Styling
• Flash vs. Silverlight: Words and Numbers