Image-based SEO-Friendly CSS Menus... That Work
sIFR - Overview
When creative teams choose not to incorporate System Fonts in their designs for headings for branding purposes, instead of resorting to images, a replacement technique solution is ideal. There are a few techniques available. sIFR is one of the best techniques to use. This technique allows the use of <h1>, <h2> or even <p> to have its copy replaced by a Flash rendering using the desired font. This ensures search engines are properly reading the best keywords in the HTML tags without affecting the design. Not only does this optimize the site for search engines, but it can also reduce development time by eliminating the need for image production. Implementing one of these replacement techniques is simple and encourages the use of semantic markup of keyword rich copy while preserving the desired presentation.
sIFR may not be for everyone. Please read the Benefits and Implications to help make your decision.
Benefits
- Great for Search Engine Optimization provided keyword phrases appear in the text.
- Using sIFR will drastically reduce image production time, as the Flash will handle the presentation.
- Optimal solution when dynamic content display is required in a non-System Font.
- Implementation of sIFR will adhere to semantic XHTML and accessibility standards. Sites utilizing sIFR are fully accessible to screen readers and other assistive technologies.
- It is scalable, meaning that if user has modified font size within browser it will fluctuate accordingly.
Implications
-
Although sIFR has been deployed on sites such as www.visitlasvegas.com and www.espn.com, there are some drawbacks including:
- Usability #1: You cannot select the text, as you would normally expect it to. If you are to select the entire pages copy, it will include the text in sIFR Flash. The main issue arises when you click right on the Flash and select to highlight the pages information. If your starting click is on the Flash, you will only be able to select the copy within the Flash. This is an improvement over image replacement, though, since no text within an image is selectable.
- Usability #2: Text within sIFR also does not scale once the page has been rendered. (Any subsequent instances of Ctrl + '+' are ignored, until you reload the page.) Likely Web developers are the only people who ever do this.
- Speed: A page with more than one instance of sIFR has a longer load time. This 'loading' effect can be minimized by styling the regular HTML text font as close as possible to the desired font so that there is not a noticeable switch when the Flash presentation font renders.
- Dynamic widths: There needs to be a defined width on the Flash file. If the copy is too long to fit in the allocated Flash area it will simply be cut short, even mid-letter.
- Transparent backgrounds: Opera and a certain micro-versions of Netscape 7.01 have difficulties displaying transparent background. With minor tweaks the JavaScript, transparent backgrounds on capable browsers and a defined colour on Opera and Netscape 7.01 is possible. This is not an issue if replacement occurs on solid colour backgrounds.
- Special Characters: This is a potential issue if special characters are not included in the Flash file. This is not really an issue but is worth noting as it might cause a surprise if the particular character is required and was not included in the Flash file. The more characters you add, the larger the file becomes.
- There is a way to block sIFR and all Flash for that matter. The use of FlashBlock or AdBlock can eliminate the display of Flash. Currently the developers of sIFR are working with FlashBlock to ensure the simple denial of Flash will have a graceful failover. Please keep in mind; this is only a slim percentage of users who use Firefox or Mozilla browsers.
Even though the implications section seems longer, most items in the list can easily be accommodated.
I feel strongly that the benefits far outweigh the minor implications and I would recommend going ahead with testing and evaluating this technique to see if can work for your project.