Interesting, I was just checking CSS vault for their update on the CSS galleries. I saw this Organic Food supermarket, it caught my attention due to it’s richness in terms of layout and color.
What I find intersting is that their navigation and headings are replaced with images right after the page is loaded.
After just sniffing through codes to find out how they did it. This is the site I came across. “Facelift image replacement” A nifty script that turns your fonts into display types as image format.
So far I am not quite sure how reliable of this script is although you actually pay for “premium” service for $1 a month.
I can see they have came out with FIR wordpress plugin for this script.
So has anyone wondered about the SEO for this script? I haven’t found any documentation or anything states on the website indicating if Google will crawl those text that had been replaced with images.
Another images replace technique that has been implemented in our new ourfaves.com website is sIFR (Scalable Inman Flash Replacement).
What sIFR does is to replace the text with Swf that has been created dynamically. It overlays on top of the original text and the text can be selected and copied. And if the user doesn’t have flash player installed. The text just simply won’t get replaced.
Sometimes I wonder if I should use those script to enhance the look of my design. Sometimes I also wonder if adding those script will increase the load time for the users? Sure, it makes the site look so much nicer, but do I really want to sacrifice the response time? Another great post that I read the other day is Speed in Software design. It mentioned how we should cut down response time and eliminate steps. It emphasize that we should “Design for responsiveness!”
I typically kept my design flexible and easy to update without going through so much trouble. That’s why I kept everything system fonts and scalable backgrounds.
And please keep in mind, those image replacements are only good for short and large display fonts. It’s always better to keep the body fonts to either Verdana (if it’s under 11pixel in size) or Arial, Helvetica (if it’s over 12 pixel in size), just for the sake of legibility.