A Place for Every User, Every User in His Place

PS Woods

April 17, 2000

The Net

Using JavaScript to detect users' browsers and operating systems and redirect them accordingly can be the difference between a Flash project being a success or a ... um, ... learning experience. We already mentioned the industry-wide fervor to include all operating systems, all browsers, all everything in every web app you build. To make things more complicated, there are also totally undocumented conventions - like allowing the user to choose between a fullscreen Flash movie and the good ol' HTML box. Some of these conventions make a lot of sense; and some of them are the result of pointed but misinformed opinions in popular designers' newsgroups.

Taking all this into consideration, we decided (you and I, after a long conversation over large mochas at Diedrich's) to make two pages to launch our Flash movie: one for the folks who have a good chance of viewing the movie in fullscreen mode, and one for everyone else, which will have the same Flash movie framed inside a browser window. We will direct people to the fullscreen launcher if they either have IE (on any platform) or any other browser on a windows machine.

You can see from this quasi-flowchart, (the boxes represent HTML pages), how the task could be organized.

The net works like this:

Detect01.html is the "front door" of Bubba's site, (this is the page that users point to when they enter the Flash part of the site - it could even be the index of the website's root directory).
The JS in detect01.html checks to see whether the user is using IE. If the browser is IE, the user gets redirected to full.html(the page that launches the fullscreen movie). Otherwise, it's detect02.html.
Detect02.html is also simple: it just checks to see if the user is on a Windows system. If the system is Win, the user goes to full.html (the fullscreen script works on most browsers running on Windows). Otherwise, it's unfull.html (the HTML-framed movie).
In the end, users will get to full.html if they have IE on any platform, or another browser on Windows OS. Everyone else will go to unfull.html.

You can download the html's with the necessary JavaScript if you do not already have redirect snippets on your machine. Note that the full.html and unfull.html pages are not included. Just slap a line of text in a document and name it accordingly if you want to test the JavaScript. We will replace them later with the real thing. In addition, note that the JavaScript in detect01.html and the JS in detect02 are (gasp) hand-written, (The Committee for the Enforcement of the International Web Designer's Treaty of 1997 is going to have my head on a platter). I did this for the sake of clarity for anyone who is new to the idea of redirect. If you have Dreamweaver, the stock browser detect behavior does just fine (except that it generates a truckload of code, which is harder to understand if you're looking at a redirect script for the first time). If you don't have DW, why don't you!?!?!

Note that our net is only complete for users with machines and browsers that have the Flash plugin installed and aren't crusty old. If you wanted to be complete, you should at some point determine whether the user has the Flash plugin. A good way to do this is to put a detect in the topmost tier of pages that actually includes Flash movies to circumvent the possibility of missing people at the front door. You can also use the simple method of making your Flash movies accessible only via a .swf button, (make a movie that has only one item - a button to link to the actual Flash content - if the user can't see the button, the movies are inaccessible). You should also have some kind of getflash.html page that would include a link to the Macromedia plugin download site.

Flash Designer's Commandment #7: Cultivate a working knowledge of JavaScript; learn its syntax and most common objects, but never actually write code from scratch. Unless you hone your JavaScript skill to a very high level, chances are anything you write from scratch is just a shoddy, half-baked version of something that has already been done. However, you will need to customize scripts for your needs on every project you do. If you haven't done so already, find out how your HTML editor stores snippets, (or at least create a drive directory) and start collecting JavaScripts today.

detect_01.html