The above Flash animation file is a mini-Web site used for demonstration purposes. Were it standing on its own a user would see it as a multi-page site with an introductory animation and a menu used to navigate to interior pages.
For those of you who don't have, or cannot see Flash content, the introductory page has a circle that morphs into a square, triangle and back again. The shapes careen up to the menu offering a choice of a circle, triangle and square to click on. When clicked each page takes you to a page with a bit of motion and simple definitions for the shapes.
Flash is a powerful tool. As designers we can use it to create motion, control typography, animate objects, create scalable graphics, embed videos, create slideshows, etc. Some find it so useful that they design entire sites using Flash.
Flash offers great control for designers but it also poses obstacles for users and hinders our Web marketing strategies. Adobe has made great strides in terms of making Flash files both more accessible and searchable, but there is still more progress to be made. Today I'd like to discuss why I advise against using Flash for overall site architecture.
Years ago, before we had better tools available, designers flocked to frames because they made it easy to include constant headers and menus. Once you built those fixed unchanging files, all you had to do was create extra files for the content. This seemed cool until we noticed that frames broke the user experience. Individual pages couldn't be bookmarked because the address never changed. While the content would change within the page, the visitor technically remained on the same page of the site.
This was bad from a marketing standpoint, because it inconvenienced visitors and made it difficult for them to link to specific pages on our sites from their own sites. As site owners we rely on incoming links to drive traffic directly to our pages and to enhance our search results. Google and the other search engines consider these links in their algorithms, so more links mean higher placement in search engine results pages. While some may still debate the issue, it didn't take long for most of the design world to conclude that frames caused more problems than they solved.
When we create Flash based-sites, we do so by embedding a Flash file within a regularly constructed HTML file. When we include a Flash file, such as the animation on this page or a YouTube video, it's easy to see that it's just one element within a page. On a Flash-based site, the Flash element is the only thing the visitor sees.
All the navigation and interaction happens within the Flash animation itself. Visitors may click on menu links to visit new pages, just as they would on a regular site, but they don't actually go to a different page. The content changes so the page appears to be a new page but as was true with frames, the page address doesn't change. (One could build a Flash site using separate .swf and .html files for each page, but it's not common practice.)
I've published the Shapes Flash file from this page separately as a stand-alone site, so you can get a better sense of how this works. If you visit http://www.heidicool.com/flash/shapes.html you will see that it acts like a typical 5 page Web site with a home page and internal content pages. It begins with a simple animation of shapes then you are presented with a menu of a circle, triangle and square. If you click on a shape you go to a page with a short definition of the shape you clicked.
But if you watch the address bar you'll see that the address never changes. If you blog about squares and want to link to the page about squares you can't. Instead you'd have to link to the main page and include a note for users to follow the square link. If including such a description is inconvenient, you probably won't bother to link at all.
If you look at the analytics for your own site you will quickly realize that your incoming links do not all go to your home page. Instead site owners link directly to the page that will be of interest to their readers.
Thus, each page on your site gives you a new opportunity for search engine optimization. If I'd built the Shapes site in HTML, I could be sure to use the keyword "square" in a header element as well as the text on the square page, focus on triangles on the triangle page, etc. Doing so would make it easier for the search engines to find these pages and would also make it possible for other site owners to link to individual pages. This is one aspect of SEO that is a numbers game. A site with more pages creates more opportunities for links and keyword searches—thus resulting in more traffic.
As with any site, I built the Shapes site with SEO in mind. The site validates as XHTML 1.0 strict, and I included a page description and keywords (which Google ignores but others may use) and gave it a unique title. I know that Google has improved how it indexes Flash content, so it will index the text within the pages (since I didn't break apart the text), but it won't know which text elements are most important—since Flash doesn't use semantic mark-up such as headers and paragraphs. I could have included a header element in the HTML, but like the title and page description it would remain the same on each page and wouldn't help me optimize for the individual page topics. These details may help my SEO but they aren't enough to compensate for the sites key weakness. It is still only one page.
Adobe provides an accessibility resource center for Flash and other Adobe products. It provides a number of useful tips and guidelines for making Flash more accessible to those with visual and hearing impairments. If a designer follows the guidelines, and the site visitor has the right browser or screen reader, this can greatly enhance the Flash experience. But some of these guidelines are complicated—there's far more to it than providing alternative text for audio and visual elements— and I suspect there are many of us who don't understand them fully. I don't know how many users have the appropriate screen readers to take advantage of Adobe's accessibility features, so I also have to assume that some do not.
On the Shapes site I wrote a description of the site as my alternative content. Users who can't use Flash will see the description instead. This is adequate for this project as it conveys enough information to let visitors know what the example includes. But it would not be sufficient for a larger site. My alternative description applies to the whole site, because the whole site is contained within one page. If I had more content to describe I'd be better served by providing an alternative HTML version of the site, so that I could provide each pages text content individually. By building sites in HTML instead of Flash I can avoid this problem and just build one version of the site.
Flash is great when used in the right context. Whether we're embedding slideshows or making animated cartoons, Flash lets us add some very useful features to our sites. But if you want to attract visitors and increase readership, building the entire site in Flash can be more trouble than it's worth. I'll discuss Flash further in my follow-up article pertaining to Flash and the user experience.
* There are of course limited exceptions. I built the Commencement March animation in Flash because the project required movement to convey what was happening. The site was built primarily for use as a training presentation and was linked to from the commencement site so it didn't have the usual marketing requirements.