Web Development Blog
Tutorials and Tips
Subscribe to the Blog
Related Resources
Are you ready to build a new site?
Need help planning your social media campaign?
Visit my services page to learn how I can help you with your next Internet project.
Is Flash evil? No, but Flash-based sites can be a marketing nightmare.
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.
I don't.*
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.
Remember the problems with frames?
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.
Flash is like frames— on a Flash based site the address never changes
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.)
Shapes - Taking a closer look at a Flash-based site.
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.
The Flash SEO conundrum
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.
A one-page Flash site has a distinct disadvantage for SEO.
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.
Flash and accessibility
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.
When I use Flash, I try to stick to the basics and offer some sort of alternative content. In my photo gallery pages, I use Flash, javascript and xml to display my photos as a navigable slide show. Each slide show includes alternative text describing the types of photos I've included. That seems the most direct way to handle purely visual elements such as photographs.
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.
Conclusion
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.
Flash SEO and Accessibility resources
- Accessibility and Usability of Flash for Users with Disabilities
- Adobe Flash Accessibility: Best Practices for Design (Added Aug. 28, 2009 - nice walk through of accessibility issues)
- Adobe Flash CS4 Professional accessibility
- Adobe Search Engine Optimization Technology Center
- Flash and SEO - Compelling Reasons Why Search Engines & Flash Still Don't Mix
- Flash as a choice, not a default
- Search-Friendly Flash?
* 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.
Trackback by Octane (Wayne Smallman) — May 28, 2009 @9:45 am
Pingback by Is Flash Evil? No, But Flash-Based Sites Can Be A Marketing Nightmare | Design Newz — May 28, 2009 @8:01 pm
Comment by Paul Godfrey — May 28, 2009 @8:29 pm
Trackback by mrfidalgo (mrfidalgo) — May 28, 2009 @9:00 pm
Trackback by kirstiscott (Kirsti Scott) — May 28, 2009 @9:02 pm
Trackback by mrrichardson (Matt Richardson) — May 28, 2009 @9:31 pm
Trackback by mlane (Mike Lane) — May 28, 2009 @10:04 pm
Comment by Paul Falgout — May 28, 2009 @11:25 pm
Comment by Paul Falgout — May 29, 2009 @11:42 am
Paul G.
It looks like I struck a nerve. But I expected this issue might get controversial. Just to reassure you, of course I did research the issue, and there are ways around the linking problem, but most designers aren't using them, and therefore many of their sites can be difficult to find.
Here in Cleveland the problem seems to be particularly noticeable with Flash-based restaurant sites. Usually there listings on various guides come up in results while the actually site is much farther down the list.
This article, of course, is meant as a simple introduction to the issues, offering examples to show common problems of Flash and SEO. As I said Flash isn't evil, but it does have to be handled with care. If you have some success stories you can share, with sites that have solved these issues, please do. I'm sure we can all learn from them.
Comment by Heidi — May 29, 2009 @2:01 pm
Paul Falgout,
That's great that you've found a better solution to the deep linking problem. I look forward to seeing your tutorial later this summer. Have you also find a good way to optimize the content within the .swf files? A way to indicate things like headers vs. paragraphs similar to the semantic mark-up of HTML. It looks like Adobe has been working on some of those issues as part of their accessibility improvements, but I wonder if you might have any tips that you've found particularly useful. Thanks for sharing your thoughts and the links to your example sites. Best to you and the Otterball team!
Comment by Heidi — May 29, 2009 @2:08 pm
Trackback by hotdesign (Scott Design) — June 1, 2009 @9:18 am
Trackback by elenakostovska (Elena Kostovska) — June 12, 2009 @9:37 am
Trackback by ivana706 (ivana706) — June 12, 2009 @10:05 am
Comment by Artful Dodger — June 14, 2009 @11:41 am
Comment by tashfeen — June 14, 2009 @5:08 pm
Comment by Jim — June 16, 2009 @12:53 pm
Comment by Greg Bowen — June 22, 2009 @6:30 am
Comment by George — June 24, 2009 @8:02 am
Trackback by amymichelin (amymichelin) — June 25, 2009 @11:22 am
Pingback by » Your Flash site won’t seem so cool if visitors can’t use it. | Web Development Blog: Heidi Adams Cool — July 7, 2009 @4:12 pm
Comment by elektrischkite — July 16, 2009 @2:05 pm
Artful Dodger, Greg and George,
I think the point that you're all exploring here is that Flash doesn't have to be bad for SEO, but it has to be implemented in the right way for it to support it. Some developers really get it and work on using Flash in a way that supports alternative content and better site indexing, while others may not even realize these are issues.
elektrischkite,
Your comment really gets to the heart of why we see a lot of sites with these problems. Designers experienced in one aspect of Flash development, may not be skilled in some of the tools and techniques that can be used to aid accessibility, usability and SEO. Or they may not really be aware that these are issues that need to be addressed.
And as you so rightly point out this becomes an even bigger problem down the road, when changes need to be made to keep up with current technology. In addition to version changes as you describe we saw this happen a few years ago when Internet Explorer changed the way they processed <object>, <embed> and <applet> due to the lawsuit between Microsoft and Eolas. If developers didn't change the way they embedded the Flash files then IE users would get a pop up box that they had to click to view the Flash element.
Another common problem involves switching designers. I've had people ask me to edit things that were created years ago. But many times the client only has the .swf file, they don't have the original .fla. Without the working file it can be almost impossible to update without starting from scratch. I have tried some programs that sort of unpack .swf files into .fla files but the resulting files are usually more trouble than they're worth.
Comment by Heidi — July 16, 2009 @3:04 pm
Comment by Artful Dodger — July 25, 2009 @2:50 am
Comment by Artful Dodger — July 25, 2009 @2:52 am
Artful Dodger
Great reminder about keeping .fla and .psd files. I'll sometimes copy them over to a directory on the Web server as well as a redundant back-up--or just to make sure the client has a copy of them if they are hosting their site on their own account. I agree about using Flash selectively. There can be many places where it's appropriate, but it is much easier to optimize when it is just part of a site rather than the bulk of a site.
Thanks about the heads up on the space in the Twitter address. It looks like it's primarily happening to my username. Being logged in as admin I don't have to input it with each comment so I must have accidently typed a space when I first set it up. I'll poke around my settings to fix that.
Comment by Heidi — July 25, 2009 @12:56 pm
Pingback by Here’s how one web designer deals with negative comments « Online Community Strategist — August 7, 2009 @12:04 am