Hack 86 Keep Your Site Browser Friendly

The standard Flash site creation workflow does not create the most web- friendly output. Make your designs much more browser friendly with a little HTML hand-editing and web savvy.

More than 80% of web users use Internet Explorer (IE 5 or later) according to W3Schools (http://www.w3schools.com/browsers/browsers_stats.asp), and more than 93% of all users have the Flash Player 6 or later installed according to Macromedia's Flash Player census (http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html). Regardless, your site should deal as gracefully as possible with users with various configurations. Customers with complaints are more vocal than customers with no complaints. So a minority of site visitors, say 5%, who are turned away for no good reason may be providing 100% of the site feedback to your client (in which case it will all be negative). In real life, each unhappy customer is rarely cancelled out by one happy customer, and a dissatisfaction rate of more than a few percent is disconcerting to many clients.

You should keep up with current web user statistics. For example, W3Schools (http://www.w3schools.com/browsers/browsers_stats.asp) provides browser trends by month and thecounter.com (http://www.thecounter.com/stats) provides browser statistics for the large number of visitors it gets each day (for a browser breakdown, click on a month, then click the Browsers link on the righthand side of the web page that appears).

Remember that compatibility statistics tend to underestimate the likelihood for complaints by the minority of users who can't access your site.

Use a Flash Plugin Sniffer

The best user experience will occur when your online content is able to detect what resources are available on the user's machine and display content that will run on that system (or give the user explicit information on what he needs to do to view the content). There are almost as many methods to test for Flash plugin support as there are designers who have attempted the feat, but some of the more popular are:

Colin Moock's fpi (Flash plugin inspector): http://moock.org/webdesign/flash/detection/moockfpi
Web Monkey: Detecting Plugins: http://hotwired.lycos.com/webmonkey/99/40/index3a.html?tw=programming
O'Reilly WebDev center: http://www.oreillynet.com/pub/a/javascript/2001/07/20/plugin_detection.html

See also our JavaScript-free plugin sniffer [Hack #87] .

Test Using Many Browsers

Contrary to some reports, you can have a number of different browsers installed on the same system and even running at the same time. For example, I have Internet Explorer, Netscape Navigator, Opera, and Mozilla installed on the same machine, as shown in Figure 11-1.

Figure 11-1. Windows XP system with (back to front) Internet Explorer, Netscape Navigator, Opera (free version), and Mozilla all running at the same time

The problem you will most often see when you have several browsers installed is that they tend to fight one another for the title of default browser. As long as you choose the custom install option and avoid the "make this the default browser" option, you should be okay.

Also look out for any extras that new browser installers try to add. Deselecting all installation options except the basic browser is usually a good idea, unless you want your default email application, messenger, and MP3 player to change! Netscape Navigator is particularly zealous in its overreaching, so always go for a custom install when adding this bad boy. Likewise, beware of automated Internet Explorer updates that might, say, upgrade your Windows Media Player as well.

Although having multiple browsers is a requirement for all web designers, it is particularly important for Flash sites because you also need to test what happens if the correct plugin is not available. In my case, I always make sure that at least one browser in my set does not have the Flash Player plugin installed and that most of them have the most popular version of the Flash Player plugin installed (rather than necessarily the latest). So most of my machines have Flash Player 6 installed because Flash Player 7 hasn't yet reached ubiquity (as of June 2004).

You can quickly and easily change the plugin version installed on some browsers with a free application called Flash Plugin Switcher [Hack #88] . Legacy versions of the Flash plugin are also available online to allow you to change among all the major Windows/Mac Flash Player revisions.

Note that there are Flash Player versions for alternative operating systems such as Linux and OS/2. To download the Flash Player for all your non-Windows/Mac OS machines, see the rather well hidden page at http://www.macromedia.com/shockwave/download/alternates.

An additional useful "browser" is AnyBrowser. This utility emulates a stripped-down, minimum browser (HTML 3.2 with support for tables that supports neither Flash nor JavaScript). Although Flash content cannot be displayed in AnyBrowser, it is a good resource to test the worst-case "no Flash installed" condition on your site. If your web page can tell the user what is wrong and what they need to do through this browser, you are doing well!

To get hold of AnyBrowser, click the Site Viewer link on http://www.anybrowser.com, where you will see a download link. An online version may also be found via the same link.

Design and Test for Search Engine Compatibility

The AnyBrowser site also has a useful tool to see how a search engine crawler will see your site. Click on the Engine View link from the main AnyBrowser page.

The easiest way to add text that a search engine can read is to incorporate it within a comment field  within the <body> tag of your HTML page. You would typically fill the comments with an initial paragraph of text describing what the site is, followed by a list of keywords. Don't list the keywords first; if you do, the keywords will appear as the site description on most search engine results pages!

Flash will add commented text in the HTML page automatically when using many of the HTML templates that ship with Flash (including the Flash Only template), but the HTML exporter is not that clever. It cannot differentiate between UI text and content text and, therefore, usually exports gibberish that is not suitable for search engine viewing or keyword creation. Your best option by far is hand-editing the Flash-generated HTML file yourself to include the proper description and keywords.

I know of at least one search engine consultant who suggested putting your Flash movie's content in external files whenever possible, claiming that your text and XML files will sometimes be indexed by search engines. I don't know if its true, but if you are using dynamic external files, it might improve your site's searchability

The Flash Context Menu

I'm often asked, "How do I get rid of the Flash context menu when the Flash site is viewed in a browser? I need to use the right mouse button for something else and even if I didn't, the pop-up menu appears unprofessional." The Flash context menu (right-click on Windows or -click on Mac) is something that you cannot normally turn off completely. Even if you set Stage.showMenu to false or select FilePublish SettingsHTML and uncheck the Display Menu option, the context menu still includes the Settings and About Macromedia Flash Player options. Some less than useful ways of removing the menu have been suggested in the past. One was to cover the Stage with a selectable text field (which, rather perversely, brings up the text-editing context menu instead and also has the side effect of making it impossible to click on anything else on the Stage!).

I've seen the question enough times in Flash newsgroups to warrant giving the only sensible solution some airtime. You can remove the context menu completely via some clever HTML and JavaScript, as seen on Gregg Wygonik's site (http://www.broadcast.artificialcolors.com/stories/2003/09/21/disableFlashMovieRightclickMenu.html). Better still, you can download Gregg's gwContextKiller component (http://www.artificialcolors.com/experiments/gwContextKillerInfo.html) that disables right-click menu functionality for IE 6+ and Mozilla 1.3+ browsers (it also works in IE 5 but not IE 5.5). Simply drop the component on Flash's Stage, typically off screen, and then set the Window mode in the FilePublish SettingsHTML tab to Windowless Opaque. Note, however, that windowless, opaque Flash movies appear as black squares for users who have disabled floating Flash ads, as described at http://www.jessewarden.com/archives/000507.html, or turned off auto-updating, as described at http://livedocs.macromedia.com/flex/1/flex_docs/wwhelp/wwhimpl/common/html/wwhelp.htm?context=Flex_Documentation&file=38_dep42.htm#wp154069.

Final Thoughts

You can make your Flash sites more browser friendly in a number of ways. In most cases, you can significantly reduce the final percentage of users who cannot view your site, even if you have only one machine, by:

Testing with a number of browsers
Hand-editing the HTML to make your site appear in search engines with meaningful descriptions and keywords
Assuming that the user will not have the Flash plugin installed and making sure your site acts sensibly under these conditions