It doesn’t matter.

To understand this answer, you need to understand what Flash is. And to do that, you need to understand modern web development philosophy. First off, you need to embrace web standards. Semantic markup and separating content from style and behavior is the only way you should be building your sites. Many web standardistas have been recommending this method of web development for years, and rightly so. However, this post isn’t the place to go into the whys of this type of development, so I’ll skip that part and just say this about how it’s done: There are three areas of front-end web development: Content, Style, and Behavior. You should always keep these three things separated as much as possible.

That brings up the question: “Where does Flash fit into this three pillar method of web development?” Is it content? Is it behavior? Is it style? While it could be considered all three, most professional Flash developers will remove the content from their Flash movies and load it in using Flash remoting or XML files. That leaves us with style and behavior.

Style is added using CSS. Generally when you add images to your HTML that are purely presentational (no text or required content in them) you should add them in using CSS. In most cases you don’t want Google to index them because people don’t search the web for ‘top left rounded corner gif.” They search for content. Even if Google upgrades their crawler someday to read CSS files and index the images, they probably wouldn’t use the information for more than statistical analysis because of this.

Behavior is generally added using Javascript. Maybe you want a new window to open set to a certain size, or you want to use some fancy Ajax to let users rate something without refreshing the page. This should all be added unobtrusively, and if the browser doesn’t support Javascript, it will hopefully still work. Unfortunately, not everyone considers this, and these days Javascript is becoming more and more of a requirement to use most websites. So you should always provide some sort of alternative for non-Javascript users. When it comes to indexing behavior, Google will for the most part not index your Javascript files. Even if it did, most web users would have no idea what the .js file they are looking at actually does. When using Javascript to change your document, Google will not read the ‘final’ page, but only the raw HTML file. Google does not render Javascript ¹.

Now that you know all of this, it’s time to look at how to treat your Flash content. Since we’ve determined we don’t want Google to index our swf files, but we do want it to index the content displayed inside them, what is the best way to go about this?

As stated before, if you are building Flash sites professionally, you probably move all your content out of your Flash movie and into an XML file or keep it in a database. This makes it much easier to allow Google to index this content by using progressive enhancement.

Progressive enhancement is a method of web development that goes hand in hand with Web Standards. You start with your HTML (your content), then add CSS (your look and feel), then add in additional behavior (Javascript, Ajax, Flash, any other interactivity that isn’t handled automatically by the browser).

The best way to add Flash progressively is by using Javascript, or more specifically, a script like FlashObject. First you lay out your page as if you aren’t using Flash. If you are using a database for your content, you can spit out that data as HTML where the Flash movie will go on the page (or maybe just a preview of the content, it’s up to you to show Google the content you would like indexed). Then you use FlashObject to replace this content only if the user has Javascript enabled and the required Flash plugin version.

Here’s a small example of what that might look like:

<div id="flashcontent">
    This is replaced by the Flash content if the user has the correct version of the Flash plugin installed.
    Place your HTML content in here and Google will index it just as it would normal HTML content (because it is HTML content!)
    Use HTML, embed images, anything you would normally place on an HTML page is fine.
</div>
<script type="text/javascript">
    // <![CDATA[
    var fo = new FlashObject("flashmovie.swf", "flashmovie", "300", "300", "8", "#FF6600");
    fo.write("flashcontent");
    // ]]>
</script>

This causes Google to skip the Flash swf files and only index the HTML (the content!) you place on the page. You can place links to other pages, images, whatever you want Google to index, and when a viewer with a browser that supports Flash visits your site, they will then see the Flash content. This gives you full control and much greater predictability over what content Google will index. And if your content is pulled from a database that is editor controlled, your pages will update and be re-indexed as the content changes without the need to re-publish all your swf files.

¹ Currently Google does not render the Javascript on a page, but there are rumors that they are developing a new crawler based on Firefox (they employ a number of Mozilla foundation members) that will index pages based on how the browser sees them, instead of the raw HTML content. This means HTML hidden by CSS may not be indexed, and pages that are altered by Javascript after they load will be indexed how they appear to the user. However, this is all rumors and until it happens Google will ignore your Javascript content.

Note: In this article I use the ‘Google’ name often, but it can be interchanged with any search engine, as they all work roughly the same way.

Here’s a screenshot of the new player:

This new version should be much more accessible and easier to use, and also takes up fewer system resources, so people who want to tune in a channel and leave it playing in the background while they work should be happier.

This was an excellent project to work on – while I’ve done quite a bit of DHTML/Javascript work in the past, I’ve never used it as a base for an entire application. This was also the first time I used xmlHttpRequest, but I found that applying my Flash knowledge to the AJAX model worked out great – the only tricky part was figuring out a few browser inconsistencies and working around those.

If you want to check it out, you can sign up for a free 3 day trial.

Well, after a few hours of tyring different ways to hack Safari into submission, I decided that the only way I could get it working was to use some Javascript, so I thought I should share the code since there were a few pages on Google also looking for solutions.

Here is what the Javascript looks like:

var targBox = "box";
function init() {
	if (document.getElementById) {
		var atags = document.getElementsByTagName("A");
		for (var i=0;i<atags.length;i++) {
			var ca = atags[i];
			if (ca.href.indexOf("#") > -1) {
				ca.onclick = function() {
					scrollDivToAnchor(this.href.split("#")[1]);
				}
			}
		}
	}
}
function scrollDivToAnchor(a) {
	var b = document.getElementById(targBox);
	b.scrollTop = document.getElementById(a).offsetTop - b.offsetTop;
}

Sample page with the working code:

View Example

Here’s the PHP code to place where you want the links to show up:

<?php if($single) { ?>
<div class="nextprev">
<span class="prev"><?php previous_post('&lsaquo; %', '', 'yes', 'no'); ?></span>
<span class="next"><?php next_post('% &rsaquo;', '', 'yes', 'no'); ?></span>
</div>
<?php } ?>

And here’s the CSS I added to my stylesheet to get them to sit where I wanted them:

.nextprev {
    height: 1.5em;
}
.nextprev .prev {
    float: left;
}
.nextprev .next {
    float: right;
}

I’m not entirely sure they will stay. I might replace them with something different, like a “more posts in this category” or a “related posts” type setup. I like the idea of flipping through a blog in a linear fashion, and I think it suits this blog quite well since all the content is generally about interesting internet happenings or loosely related technical offerings.

Either way, it’s pretty simple to add them to your own blog, so enjoy!

It was a very… ehm… colorful project to work on :). As mentioned in my other post, the site is XHTML 1.0 transitional with CSS used for layout, with a little Flash content peppered in there for some extra flavor. More and more of the sites we are working on these days entail an XHTML/CSS layout and then a few Flash movies embedded around in various locations to spice things up a bit, and I have to say it’s working out great. I really think a lot more designers will go in the direction of hybrid sites rather than the old full Flash site or straight HTML in the coming year.

Another thing to note is the validation problem. It seems that most of the problems (if not all) stem from a few sloppy Javascript embeds and unencoded ampersands that were added in by the iVillage development team. Unfortunately with the way the site was developed – doing the design and template coding first, then integrating those files with the content management system – and without someone on the development side constantly cracking the validation whip, I suppose these things are bound to happen.

Anyway, enjoy the site: www.ivillage.com.

View example: 100% width and height stretched Flash embed.

It’s actually pretty simple. Here’s some of the CSS I used:

/* hide from ie5 mac \*/
html {
  height: 100%;
  overflow: hidden;
}
#flashcontent {
  height: 100%;
}
/* end hide */
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #eee;
}

Setting the html tag to 100% height and then placing the Flash movie inside a div that is also set to 100% height does the trick.

Notice the overflow: hidden on the html element since IE will show the scrollbar even if the page doesn’t need to scroll. This line will force IE to hide any content that is outside of the browser window, and therefore hide the scrollbar as well.

To embed the Flash movie, I used my FlashObject Javascript embed so the page will validate and I have access to all the various Flash parameters I might need to pass to the Flash movie.

UPDATE (01-05-2005): Someone pointed out a bug with this in IE 5 on Macintosh, so I’ve updated the CSS a bit to make it work. Current verified working browsers are: IE 6 (PC), IE 5 (Mac), Safari, Firefox (PC, Mac), Mozilla (PC, Mac), Opera 7.54 (Mac).

If you have other browsers available for testing I would love to know if this displays properly or not. I’m mainly interested in IE 5 and 5.5 on a PC.

UPDATE (1-17-05): Tested in IE 5.01 sp2 and IE 5.5 sp2 on a pc today, and it works great.

This was one of the first projects I worked on when I moved to New York. We decided on a CSS layout using XHTML 1.0 transitional (sent as text/html), with some Flash peppered around. Right now only the entertainment section is using the new design, with the other sections to follow as their internal team takes our template and adapts the content in the other sections. Unfortunately the site doesn’t validate because of one little error(!) that I’ll be passing along to their internal team along with a few small visual errors to fix.

It uses a similar method to the suckerfish dropdowns for the flyout menus on the left navigation, and some basic CSS rollovers for the main navigaion tabs at the top.

I would have liked to use my FlashObject embed for the Flash content, but this was handed over to their internal team way before I had even thought it up, so it uses generic Javascript to detect and embed the Flash movies.

UPDATE (12-22-2004): Looks like the one validation error was in some content that has now rotated off of the homepage, so now it validates!

UPDATE (01-31-2005): The whole site went live this week.