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:

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