Using sIFR for rich flash text without affecting SEO
Friday, August 7th, 2009sIFR, an abbreviation for Scalable Inman Flash Replacement with current version 3.0 is a combination of JavaScript and flash, allows you to dynamically view text, especially headings, using flash. This can improve your website’s look dramatically, because it will look the same in every browser and is much smoother than basic HTML text. For example, if you take a look at <h2></h2> tag in IE6, you will notice the pixels isn’t very smooth while in IE7, they look smooth and nice. But that’s not what sIFR can do for you. It allows you to display a more detailed rendered text in any browser. However, there are a few minor points about sIFR:
• Websites must have flash installed and enabled.
• Titles will not work on many mobile devices such as PDAs and mobile phones.
• Websites can become a bit slower.
The sIFR zip file contains flash, JavaScript and CSS files. The basic files you need are:
• css/sIFR-print.css
• css/sIFR-screen.css
• js/sifr.js
• js/sifr-config.js
• flash/sifr.fla
Before uploading everything, one first needs to edit the flash file (sifr.fla) in flash folder using Adobe Flash.
Fig. 1
You’ll begin with simply a white box (refer Fig. 1). This is because the flash file is divided into layers. In order to change the font family of the sIFR you are going to use on your website, you have to double click in the white box and the text will show “Bold Italic Normal” (refer Fig. 2).
Fig. 2
Now click the text line to go into the text edit mode (refer Fig. 3). The default font is Verdana. You can use the font chooser to pick your desired font, for example, choose Tahoma.
Fig. 3
NB: Please note that you do not need to change any other options, font size, color and other text styling options can be changed using the JavaScript included in sIFR zip file.
Now we need to compile it to a .swf in order to display flash on your website.
In order to make sIFR work, you need to upload the needed files (i.e., sIFR-print.css, sIFR-screen.css, sifr.js, sifr-config.js and sifr.swf) to your website’s respective directories. After uploading, one has to include the following JavaScript and CSS files between the <head></head> tag as follows:
<link rel="stylesheet" href="styles/sIFR-screen.css" type="text/css" media="screen"> <link rel="stylesheet" href="styles/sIFR-print.css" type="text/css" media="print"> <script src="includes/sifr.js" type="text/javascript"></script> <script src="includes/sifr-config.js" type="text/javascript"></script>
Finally, before sIFR will replace defined text with flash, it needs to be configured. The configuration takes place in the sifr-config.js file.
After configuring, the sifr-config.js should look like:
var tahoma = {
src: 'flash/sifr.swf'
};
sIFR.activate(tahoma);
sIFR.replace(tahoma, {
selector: 'h2'
,css: [
'a { color: #333333; }'
,'a:link { color: #333333; }'
,'a:hover { color: #0066CC; }'
]
});
Don’t forget the “,” otherwise the CSS will not apply or sIFR might stop working. Another important thing is that you have to write the color hexadecimal codes completely!
