I’ve found several tricks that can reduce the footprint (loading and visual) and impact of a flash object.
It seems the most popular use of flash is that ever present top banner – that place you cannot avoid looking at. And therein lies the problem.
First, consider a hidden division with keywords.
Place a division with a display none style above the flash to get those keywords and good descriptions up top. Maybe repeat the good info from below the flash? Increase your keyword density on the sly! (Oh, if anyone sees a problem with this and search engines – speak up quickly!)
Think css backgrounds!
Create a division for your flash and attach a background image – a repeating one would be optimal. These images can usually be optimized to a very small size and repeating it requires little discernible load time.
Then make your flash background transparent. The flash can appear to stretch the whole width across the web page but in actuality can then be a lot smaller than the space provided for. In other words, you can reduce the size and load time of the flash.
In addition, add some text into the division next to the flash – maybe even use a bit of jQuery to add animation to the text. So then you will have searchable text at the top of the page as well.
Speaking of jQuery (and other javascript libraries)
Sometimes you can use it instead of flash and achieve the same effect for less cost to your customer. I’m not fond of browser side scripting but the libraries can be very solid across different browsers; jQuery then reducing load time and using searchable text instead of that chunk of flash.
I use jQuery because it has a lightweight footprint, is CSS3 and crossbrowser compliant. One simple little interactive effect is a text fade out. Note the ‘interactive’ part of that description. Click it and it works. It’s a 2 minute set up in jQuery but much more time consuming in flash. You can read more about the jQuery library at jQuery.com.
CSS Positioning
The closer to the top of the page in the html, the better for SEO purposes – so put the best content up top and push that flash down in the html.
Did you know that you can have the middle section of a three column layout fall after the left and right columns in the html code? Float left the left one and float right the right and the middle will then rise visually to top. Don’t forget to put a fixed width on those floated divisions. If you’ve got Dreamweaver – the 3 column elastic layout is a good example of this technique.
Quickie code:
.left {
float: left; width: 200px;
}
.right {
float: right; width: 200px;
}
<div>this is the left side - keywords!!!!</div>
<div>this is the right side - keywords!!!!</div>
<div> and put the flash here at the bottom</div>
Then you could put background images in both left and right columns to make it look like part of the flash like I did in the above example.
CSS Advanced
Of course there are all sorts of fancy shmancy ways to arrange your divisions visually with CSS positioning to benefit SEO. I, however, am a fan of simple CSS – straightforward CSS is more likely to be crossbrowser compliant and easier. So I rarely ever use techniques like -500 margins for positioning sakes. Which is kinda funny since I am using a template here on my blog that does just that! (I was too lazy to do the CSS from scratch!)
Investigate the possibilities. Here’s three of my favorite sites with great demos, tutorials and usable scripts:
http://meyerweb.com
http://www.cssplay.co.uk
http://www.alistapart.com
