Flash Web Design – Best Practices

We all know how great and powerful Flash is, but how often do you see a website built entirely in flash that doesn’t suck from a usability standpoint. I’m sure I can go on for days about how the usability of almost all flash websites stink. I’m a big supporter of flash, but I think flash developers should step their game up when it comes to useability. I’ve outlined my 3 biggest pet peeves here.

1. If it can be bookmarked in an HTML site I should be able to bookmark it in a flash site too.

When i click a new page the url should be modified. You can simply modify the URL with some scripting or put each page’s swf on a different page. Too often do I want to link somebody to a page or a video on a site to find out that I can’t. I can only link to the homepage. For example, I’d love to link you to the color wall page on Sony Bravia’s new site because its an excellent example of how cool flash can be, but i can only link you here

A great example of a flash website that does it right is JSK architects. I love this building and I can show you by simply giving you the URL rather than telling you to go to the homepages, click projects, than click Highrises, etc.

2.Keep the download times down

I recently worked on a html/flash hybrid site. The creative director was a big flash man and would constantly say, we’ll just build that in flash. I fought hard and managed to build quite a few thing with javascript and css that he didn’t know were possible. Still, with that being said the site, which was pretty large, weighed in at 2 megabytes with images and all. However, when you added in the various flash elements the sites size grew to an impressive 100 meg. I can say that the sizes were greatly reduced by the time the finished product rolled around, as the creative director is a very talented flash developer. However, this doesn’t excuse the fact that these flash elements take up an incredible amount of space in comparison to rest of the site.

3. SEO

There’s no arguing that search engine optimization is a very important aspect of any website. However, flash doesn’t leave much text in the page’s source code for an bot to read and index your site. Bots like to look for h1 tags and content in your paragraphs. They don’t really care whats in the <meta> tags anymore. Remember, for a search engine to make money, lots of people have to use it. For a person to use a search engine it has to return the best results. Therefore, anything you try and do to beat a search engine will only end up hurting you. When you search for “air car” the engine will try to return the most relevant website, which means the website that as actual quality content about air cars. So having an air car website with <meta> tags, images, hidden text, or FLASH content about air cars, you won’t be in that search result. Hiding text in your flash with display:none; or a margin of -999px isn’t necessarily the best idea, as google is up to your tricks and if they feel like it, they can penalize you, according to Matt Cutts who works at Google and keeps up a blog about optimizing for search engines. Here’s a good summary

Further Reading

Smashing Magazine has outlined a couple tendencies of flash designers. Their problems seem to rely more about the design of the flash elements themselves and not the deployment of it as I have done here. Check them out.