It’s very common to hear people argue about Flash websites or RIAs vs. Ajax websites or RIAs, but this is always the wrong way to approach building any website. Would you have an argument with an architect about whether to build a house out of wood vs concrete? Of course not, they would use each material to build the parts of the house that the respective material is best for. Sometimes you might want to build a shack or barn out of all wood, sometimes you might want to build an all brick house, but many times you’ll want to use the best material for each section of the house. Build the foundation out of concrete, the walls and roof out of wood.

Websites and web applications should be treated the same way. Break things down to a component level and go from there. Use the right tool for each component. If you can do it well with HTML/Javascript, go for it. If it would work out better with Flash, then why waste time recreating something with Javascript that you could build 3 times faster with Flash? There are plenty of great examples of this today around the internet:

One of my favorite examples is Google Finance. They use HTML and Javascript for the stuff that is best suited for that, and then when they need to show a nice graph, they drop in a great interactive Flash graph and talk to it using Javascript as needed. The Flash controls the Javascript, and the Javascript can control the Flash as needed.

Another example is Flickr. They started out using Flash to display all of the images, including the image notes and the other toolbar options along with each image. While this might have been a good choice as the site started out, it was soon replaced by a more efficient HTML version of the toolbar and notes system that works just as well as the Flash version. They did end up keeping one small bit of Flash so users can rotate images and see a preview before they save it.

So the next time you start planning a website and you start thinking: “Hmm, Flash or Ajax?” Instead of looking at it from a site-wide perspective, try thinking about your site as a series of components, and then choose Flash or HTML/Javascript for each individual component instead.

If you are into nerd things, head over to the BarCamp website and register.

So how does all of this affect you being a web developer?

Basically, the functionality changes work like this:

When using an applet, object, or embed tag to insert a plugin into an HTML document, that plugin will not allow user interaction until the user clicks on it. Microsoft calls this process “Activating an ActiveX Control’s Interface.”

In the case of the Flash plugin, it means that your Flash movies will not work until a user ‘activates’ it first by clicking on it. The details are still a bit fuzzy, and I can’t find a developer preview of IE 6 or IE 7 that include this new functionality to test this new functionality (If you find one, please let me know) (see below). This is a slight improvement over the previous ‘fix’ which was a small dialog prompt for each ActiveX control on a page. Now you just have to click on each control to activate it (if you want to interact with it).

Microsoft says “We believe over the next six months, most customers will be running copies of Internet Explorer with this behavior.” The changes will be rolled into IE 6 through security updates to Windows, and included in IE 7.

But that’s so stupid! How do I fix it?

Thankfully, Micosoft offers a fairly easy way around all this nonsense: Embed your Flash movies using Javascript. Head over to the FlashObject page* and start using it (you should be using it anyway, everyone else is!). You may also want to retrofit your old websites that don’t use Javascript since this change will affect every website. If you are using quicktime, you can always use my QTObject script which works the same way that FlashObject does, but for the Quicktime plugin.

UPDATE (1-22-2006): Apple has recently released a new script that is similar to my QTObject script to prepare people for the upcoming IE changes.

* UPDATE (2-21-2006): After testing with a patch (search the page for ‘English’ to find the download link) that Microsoft released recently released (and with some help from Dan Freeman) it turns out that you must have ‘Disable Script Debugging’ checked in the Advanced options of IE in order for the controls to be activated as they are embedded. If you have Script debugging on (it’s off by default) then you will still need to activate each ActiveX control on the page.

Also: Macromeida/Adobe has a new Active Content Developer Center.

UPDATE (3-1-2006): Microsoft has released the update. There’s more information and a nice list of possible issues you might have after installing the update on this Microsoft KB article page.

UPDATE (3-24-2006): Looks like Microsoft is set to roll out the Eolas changes to everyone around April 11th. Get ready.

UPDATE (3-29-2006) Microsoft announced their future plans for releasing the patch to customers today.

UPDATE (5-9-2006): Adobe posted what looks like a very rare edge case regarding an out of date jscript.dll causing users to always activate ActiveX controls, even if they are embedded using Javascript in the proper way.

Check out my Express Install page to see what it’s like to upgrade without having to visit Macromedia’s site. One thing I thought was odd is that Macromedia’s own download page doesn’t give you the option of using Express Install, and instead they only give you a link to download the OS X installer. If you are using Internet Explorer, they have always sent you to d page with a Flash movie embedded so it would trigger the ActiveX install, instead of forcing people to download the executable installer for Windows. Seems like an odd move to me.

I also have some issues with the final wording on the Express Install mechanism. When you start the upgrade, the dialog warns you that “This content requires Flash Player 8″ when in fact you may already be using Flash Player 8 and simply need to upgrade from 8.0.15 (a beta version) to 8.0.22 (the ‘final’ version). Can you imagine trying to explain to a client why their website tells them they need Flash Player 8 when they already have another version of it installed, and then not being able to change the text because Macromedia controlls it?

There may also be the few occasions when you would want to build a Flash 7 site, and use the Express Installer to upgrade users from version 6.0.65 to 7. The upgrade message would still inform them that they need ‘Flash Player 8′ when they really only need version 7. This situation is much less common I’m sure, but once Flash Player 9 is released, they will need to change the wording to something more generic anyway because people will still be using it to upgrade users from version 7 to version 8.

Unfortunately, they didn’t test FlashObject, but they did test UFO – which works in a very similar way – so I think it’s pretty safe to say that they would behave the same way in a screen reader.

It’s no wonder then, that the latest version uses Javascript as the suggested detection method. Unfortuntely, it’s not perfect. While it’s a good first try, it is greatly lacking in a few basic needs of most web developers. Here’s the issues I have with it:

• Inline Javascript code (and lots of it) – Who wants to copy a bunch of Javascript and VBscript onto every single page that uses Flash? While it might be possible to move the Javascript into an external file, you would still have a small amount of VBScript on each page (or another external file to include). I’m not sure why they decided to leave in the VBScript when there are other reliable ways to create and test for ActiveX objects. Also: what happens if you need to upgrade the Javascript for some reason? While the code should be very futureproof, you never know when a bug might pop up, and you’ll be stuck editing all of your HTML files that have Flash movies included in them.
• Tough to modify the code – It suffers from the same drawbacks as most Javascript embed techniques – placing tons of Javascript document.write() calls and writing out your object or embed tags to the page. This is a hassle to edit if you need to make changes, and makes it very tough for designers who don’t know Javascript to go in and modify attributes.
• It’s not valid HTML or XHTML – Valid XHTML documents aren’t for everyone, but when you have clients specifically asking for them it’s nice to be able to deliver. The new detection doesn’t even come close to validating.

If you want to compare the new Macromedia detection to my FlashObject script, check out this new article that shows how to use it:

Best Practices for Flash Player Detection

Then compare the steps needed to get that working with using FlashObject:

1. Include single .js file.
2. Add a few lines of code (see example of bare minimum).
3. Sit back, relax.

I think the choice is clear.

Now when you downloaded the new detection kit you may have noticed another folder hiding out in there with the name of “Express Installation.” This is Macrmedia’s new way of upgrading your Flash player without the need to go to macromedia and download the new plugin. I’ll be writing up a new entry soon that gives some tips and best practices on using this method in the very near future.

This post is a continuation of a previous post. Read this for more background information on the FlashObject embed method.

In the months since I posted the FlashObject embed I’ve had a chance to talk to a number of developers and use it in a few high traffic projects. In doing so I’ve picked up some tips and best practices that I’ll be outlining here. I’ve also revamped the FlashObject script so it’s a bit more light weight and fixed a few small bugs.

What’s new?

1. Alternate content is no longer written to the page by default – You may still use the fo.altText variable to add alternate content to your pages, but it is not recommended. The way to display alternate content in your pages with Flash content would be to place the alternate content on your page, and then specify the ID of the element with your content inside. The FlashObject script then writes your Flash content inside that element, replacing your alternate text/content so the end user with Flash will never see it, but users with no Javascript or without the required Flash version will see the alternate content. Google will also index your alternate content since it is just plain HTML.

   Here is an example of what your embed should look like:

   <div id="flashcontent">
     Place your alternate content here and users without the Flash plugin
     or with Javascript turned off will see this.
     Include a link to <a href="?detectflash=false">bypass the detection</a>
     if you wish.
   </div>
   <script type="text/javascript">
    // <![CDATA[
     var fo = new FlashObject("fo_tester.swf", "fo_tester", "300", "150", 6, "#336699");
     fo.write("flashcontent");
    // ]]>
   </script>

   Because of this change, you should always specify the ID of an element to write your Flash content into. You should also be sure to always include alternate content on the page. If your Flash movie is purely decorational, you can leave the div empty, similar to using empty alt attributes (alt="") on decorational images. Also note that with the new version you need to place your Javascript that writes the Flash content after the element that will contain your Flash content, as in the example above.

2. Support for pulling variables from the URL string when using anchors – There have been some discussion about Flash state tracking and direct or ‘deep linking.’ Most of the methods rely on parsing variables from the URL when the movie loads, so now you can pull vars out using the built in function getQueryParamValue().

   Example:

   If your URL is:

   flashobjectpage.html#var1=value1&var2=value2

   You can pass those vars into your Flash movie by using the following code:

   var fo = new FlashObject("fo_tester.swf", "fo_tester", "300", "150", 6, "#336699");
   fo.addVariable("var1", getQueryParamValue("var1"));
   fo.addVariable("var2", getQueryParamValue("var2"));
   fo.write("flashcontent");

   The same works for normal URL parameters in URLs such as:

   flashobjectpage.html?var1=value1&var2=value2

Just to recap some of the things posted in the previous FlashObject post, here’s some of the thinking behind the FlashObject embed method:

Why Javascript?

Javascript is the best overall solution for a number of reasons, among them:

1. With Javascript you can detect the presence of the Flash Player on your user’s system and either display the Flash content or leave the existing (X)HTML on the page. This is also a huge advantage when it comes to search engine indexing since the alternate content is on the page and will be indexed as normal content. This also prevents novice users from seeing Internet Explorer’s ActiveX install box, which on Windows systems pre-SP2 is a very scary thing these days with all the Spyware and Malware running around on the internet. On most other browsers, you’ll likely see some empty box where the Flash content should be, sometimes with a broken image or puzzle piece icon which most novice users have no idea what to do with (Should they click on it? Is it part of the site?). If you include well written upgrade/install instructions in your alternate content, all of these problems are avoided.
2. No Extra configuration files for each Flash movie. Some alternate methods of embedding Flash content in XHTML documents include using extra configuration files or ‘holder’ movies that load in other movies. With this method there is no need for any extra files aside from the single .js file.
3. Easy to serve different content to different browsers. I worked on a project recently that made extensive use of the wmode=transparent option. Well when you are using IE or Firefox you can use wmode=transparent with the Flash 6 player, but if you are using Apple’s Safari browser, you need Flash player 7 to see the content properly. So in the embeds on the page, we required Safari users to have the Flash 7 player, and everyone else the Flash 6 player. Without Javascript we would have had to force everyone to upgrade to Flash player 7, something we didn’t want to do, even though the Flash 7 player has a pretty high penetration percentage.

Problems with Flash Satay/pure Object tag embedding

The main issue with using any embed method that uses only object tags to embed any plugin on a page is that Safari ignores the param tags. For very basic embeds this isn’t a problem, but when you want to start passing in variables or change the background color of the movie without re-publishing it you start to run into problems.

The one area where using pure object tag embeds shine is in using XHTML pages that are sent with a mime type of application/xhtml+xml. Since the FlashObject script uses innerHTML and sometimes document.write, it is not compatible with pages sent with the application/xhtml+xml mime type. Currently I have no plans to update it to work with these pages, as there are many issues with creating object tags using the DOM because almost every browser engine handles it differently and has little quirks that make it very hard to work around. If you are interested in seeing some of the code it would take to embed Flash in XHTML documents, check out the excellent Javascript that comes along with sIFR 2.0.

Download

Download the source to FlashObject 1.1.1.

Download the source to FlashObject 1.3.

View sample pages using FlashObject 1.2 in different Flash embed situations.

UPDATE (5-5-2005): If anyone is interested, Paul Newman has wrapped this script into a Dreamweaver extension. It costs $15 (or free to CommunityMX subscribers), but if you are a not-so-technical Dreamweaver user I think it would be worth it.

UPDATE (5-17-2005): Made a small change to the embed tag output. I changed the id attribute to a name attribute as Firefox needs it that way in order to use LiveConnect and talk to the plugin via Javascript.

Unfortunately it only runs on Windows machines, which means I’ll have to wait until tomorrow to check it out. It can use either the IE rendering engine or the Firefox (Gecko) engine, but I’m not sure which one it defaults to. I mentioned a while back that I was wary of the option to switch the rendering engine as most users will have no idea what it actually does even if they do delve into the options and find it there.

They also seem to have completely ignored any usability guidelines for Windows applications and gone with a non-standard application window layout. The menu bar is shifted to the left, and there is an amazing amount of clutter around the toolbars and tabs (View Screenshot).

This article even mentions how they “reduce browser clutter” by “including a ‘Multibar’ feature that combines up to 10 customizable toolbars into single buttons.” How they decided that giving users ‘up to 10 customizable toolbars’ would ‘reduce browser clutter’ is beyond me.

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!

… I’m wondering when the iPod will tip from cool to uncool. When everyone has something it begins to lose its luster. What can Apple do to ride the wave of coolness for as long as possible? Or is this product somehow immune because of its unique combination of coolness, usefulness, and stylishness? I wonder if the wave Apple is riding isn’t the “cool” wave afterall, but the “useful” wave masquerading as cool? Does anyone ever get tired of useful?

I see it like this: iPods are filling a gap that needed to be filled. People needed a portable way to listen to all those mp3s they downloaded from Napster, and the iPod was (and still is) the best way to do that.

However, I think the lives of all portable audio players are limited because cell phones are going to catch up soon. Why carry an iPod and a cellphone when you can plug some headphones into your phone and have all your music right there? Most new cell phones already play mp3 files, the only problem is storage, and that problem is becoming less and less every day as flash memory gets cheaper and bigger.

After that, we’ll see better digital cameras included in the phones. I’m not talking about replacing high end cameras, but have you noticed the flood of tiny cameras on the market? Nearly everyone I know has a tiny camera they carry around with them everywhere (not even including the cameras on their phones). Once these camera phones catch up to the little digital cameras, you have no reason to carry both gadgets.

Next comes the most interesting part: You start using your phone to download music directly from the iTunes store. Apple has already announced the partnership with Motorola, and I’m sure they understand that the life of the iPod is running out. Motorolapod Shuffle, anyone?

Now back to the camera: tons of people are already taking pictures with thier camera phones and e-mailing them directly to their friends, or posting them on the internet with sites like Flickr.

Why would I buy three different gadgets and fill up my pockets when I could combine them all into one? It’s only a matter of time before phone manufacturers add in more storage space for your mp3s, and hopefully they will stop blindly adding in mega pixels to their cameras and put some better lenses and CCD technology into the camera part of the phone.

UPDATE (02-14-2005): Sony Ericsson seems to agree with me, at least about the music part.

But these small drawbacks aren’t enough to keep me away. I’ve added a few categories to this blog and edited some old posts to better categorize them. Technorati should pick up on the new categories and automagically add my posts into their tag system. Some of my posts are already there, but since they were so poorly ‘tagged’ it wasn’t doing me any good. Another benefit to this is that with more categories and using mod_rewrite with WordPress, I should see some more traffic coming in from Google as it indexes all the new keywords in my category URIs. It should also help users who aren’t sure what this site is about by showing them a nice broad list of topics in the sidebar instead of the limited topics I had before.

Well, why not highlight your own comments on your own blog so your visitors know it’s you?

Here’s how I added it to this blog:

1) I decided to highlight the comments based on my e-mail address. This means that every comment post that uses my e-mail will be marked as ‘special.’

To do this I used a small snippet of PHP code (new code is bold):

<li id="comment-<?php comment_ID() ?>"<?php if ($comment->comment_author_email == "geoff@deconcept.com") { ?> class="mycomment"<?php } ?>>

2) Edit your stylesheet so your posts are different. Since I added the class mycomment to the comments I make, I added this to my stylesheet:

ol#commentlist li.mycomment {
   background-color: #fbfbfb;
   border: solid 1px #457AA5;
}


3) Make sure nobody can post comments by pretending to be you:

I think everyone should do this on their blog anyway, but here it comes in extra handy. I went into ‘options ->discussion’ in wordpress and added my e-mail address to the list under ‘Comment Moderation.’ This assures that if a comment containing my e-mail address anywhere in the post, the comment will be held for approval by me. So every time I post a comment I’ll have to approve it before it shows up, but this isn’t really a big deal and takes almost no time at all to do.

I’m sure there are ways to improve this and make it better, like checking all of the author e-mail addresses, and possibly giving each author their own unique css class so they can each have their own look, and then packaging all of this up into a WordPress plugin… But I’m much too lazy for that, and since this works fine for my single user blog, I’ll probably just leave it like this.

UPDATE (4-28-05): Just saw this post on the WordPress support blog that updates this for use with WordPress 1.5 and also supports alternate post highlighting as well.

Well I had this little idea for a cool new feature they could add:

Right now they have a handy ‘tag’ system that works like keywords. This is cool when you want to see all the photos that are of ‘cats,’ but what if I wanted to see pictures of current events? When Brandon started up photoblogs.org, he had the top 100 photoblogs listed there, and that’s cool and all, but it starts to suck when time goes on, and the list is always roughly the same. So I said “Hey, you should put a ‘recent popular sites’ on there.” So he added this nifty little section called Top newcomers and it works like this:

These are the top 10 registered photoblogs that have been added to Photoblogs.org within the last 4 months. Rankings are derived from the favorites lists of our users. In case of a tie, older sites are ranked higher.

Flickr could benifit from something similar to this: limit the time to one week or maybe even just a few days, and then list which tags are the most popular for that time period. The information may already be there if they store a timestamp with when a photo was tagged, but even if they don’t, it might be pretty easy to add in.

The reason I started thinking about this was on my way home from the coffee shop tonight I saw some people staring up at the moon. Now I consider my self a pretty connected person, and take breaks from work all day to read the goings on in the world and a bunch of blogs too, but for some reason I didn’t hear one peep about this lunar eclipse that happened.

Anyway, imagine that you just read something in the paper about a big protest, or about some huge natural disaster, or a lunar eclipse… and you go to Flickr and look at the recent ‘hot tags’ and get to see tons of images all of the things going on in the world right now (or last week as it may be). Or maybe, you completely miss a lunar eclipse because nobody tells you about it, but you still get to see all the pictures people took because you visit the Flickr ‘hot tags’ page every morning.

I’m always forgetting my login ID since I signed up at some of these sites years and years ago. Is there some reason why they all want a user ID?

I’ve decided to add a permalink symbol (or graphic) to each post to make it more apparent how to link directly to a single post. WordPress (the blogging software this site uses) by default makes the title of each post the permalink for that post. But before I add anything, I thought I would ask and see what everyone thinks these links should look like.

I would venture that the text “Permanent link” is the most user friendly, however, it takes up a lot of space and doesn’t really look very nice. So in trying to balance looks with usability, I want a graphic or symbol that conveys “click me, I’m permanent.”

Here are a few samples from other blogs:

Kottke:

Instapundit:

Anil Dash: ¶

37 Signals SvN:

Waxy.org: (with text “PERM LINK” next to it)

And of course, we always have the generic: #

I also asked Google what it thought a permalink looked like.

I like a couple of these, but I’m not sure they really say “I’m a permanent link.”

The next task is determining placement. Should the permalink go next to the title of the post? Next to the date? Next to the comments link? Maybe we could leave it all alone adjacent to the comments link, or somewhere else new and exciting?

My last comment is on the word ‘permalink.’ Is it descriptive enough for a new internet user to figure out the meaning? I’m not so sure, and I think I’ll be using the words ‘permanent link’ as alternate text for mine.

Maybe it’s time the blogging world got together and established a standard (suggested, of course) graphic or word for these permalinks.