kmcm

Web Development with PHP, HTML, CSS, & JavaScript

Flash and Gracefully Degrading Navigation

Thursday 30th April 2009

Flash animation is often used to enhance the user experience, although sometimes at the expense of accessibility, and users who are incapable of viewing flash.  A beautiful animation may be good at drawing people’s attention to unique selling points, or as design elements alone, but one area where care is required when using flash is site navigation. If a user comes to your site and is unable to view flash, you want them to be able to get around, not be brought to a standstill and have to go back in the opposite direction. You need your visitors to be able to view your navigation (and content) when they have no Flash, no Javascript, and even no Images/CSS.

The way to avoid this problem is by using alternative content for your flash powered navigation elements. This is where I find SWFObject an essential tool for development. SWFObject is an open source javascript file for embedding Adobe Flash content in a browser compliant and gracefully degrading way. SWFObject can detect Flash plug-ins in your browser and embed movies accordingly. However, if it doesn’t detect the ability to play Flash files, it will simply show some different content instead.  Here’s a code example of how this would work:


<div id="nav">
<!—this ordered list is your actual navigation,
viewable when you can’t play flash-->
<ul>
<li><a href="index.php" >Home</a></li>

<li><a href="about-us.php">About Us</a></li>
<li><a href="services.php">Services</a></li>
<li><a href="contact.php">Contact</a></li>

</ul>

<!—call for flash, which will overwrite
the contents of the “nav”
div if a Flash plugin is detected -->
<script type="text/javascript">
// <![CDATA[
var so =
new SWFObject("nav.swf","name","90","70","8");
so.addParam("wmode", "transparent");
so.write("nav");
// ]]>

</script>
</div>

As you can see with the script above, the navigation div above contains a list of links which is the website’s navigation. But there is a call to SWFObject which, if a Flash plug-in is detected, will overwrite the contents of the navigation div with the movie that is loaded. If Flash is not installed or Javascript is disabled, the SWFObject will simply do nothing, and the navigation list will display as normal.

This works well on the website for Minola Technology, which uses Flash for navigation. If Flash cannot be displayed or Javascript is turned off, a similar navigation bar is shown using CSS and background images. And if CSS is disabled, the user is presented with a simple list of links. This way a wide range of users are catered for, not just those with Flash Plugins and high-speed internet connections.

Scenario 1: User has Flash

If the user has Flash and Javascript enabled on their browser, they are presented with a slick but subtle sliding effect when the navigation is rolled over. This adds some much needed flair to a very functional site.

Scenario 2: User has no Flash/Javascript is disabled

This user isn’t shown the slick animation, rather a navigation bar identical to the previous one, using CSS, background images and hover effects to provide some interactivity. The user would be none the wiser that a slightly more interesting interface awaits if they had Javascript/Flash, and their experience is not affected.

Scenario 3: No CSS

If the user has no CSS or Javascript, they will be shown the "bare bones" of your site. It is important to markup your xhtml correctly, which would be to combine your site navigation into a list of links, as shown.

If you’re using Flash for any element on your site, I’d recommend SWFObject. Not only is it able to handle alternative content and graceful degradation very well, but it is also a standards compliant way to embed Flash. There is in fact a way to take this example further. What if a user coming to your site doesn’t have Flash, but has Javascript enabled? This group of users can be shown similar animation and effects achieved with flash by using Jquery. This way you can break it into 4 scenarios:

This can be used on a site that required Flash animation, but also text content for SEO purposes. This may seem like a lot of work for a developer to go through, but it’s rewarding and important to ensure that users get the best experience possible from your website, and don’t fall through the cracks or be told to update their browser or install an unwanted plugin.

Filed under: