I am personally a fan of light-weight web pages that use W3C standards based elements and layout. However, many commercial web sites seem to want to move to a more “print-like” experience.
The cost of moving to a richer experience is usually higher maintainance cost and round trip time – you need the graphics or flash guys for many changes. SEO (Search Engine Optimization) suffers as the graphics can’t be indexed by the web crawlers, and you usually take a hit on page load times too.
Wouldn’t it be great if you could make a web site that is:
- Great looking
- SEO friendly
- Quick to load and render
- and is XHTML compliant
We have come a long way at unibet.com, but we made some compromise in look and feel for speed and we also do still have article headers using generated images. This has bothered me for some time. One of our consultant mentioned that he know of someone that used Flash for rendering headlines, and it sounded like a good idea to me. I did some research and stumbled upon sIFR.
To use sIFR on your website you embed the font (be careful to encode all (but only) the chars you will need) to minimize the size of the Flash movie. Typically the SWF movie is between 8-70kB. This may seem like a lot more than an image, but remember that the SWF will be cached for a very long time in to browser if you’ve set up your web server correctly. Effectively the font flash will only be downloaded once or not at all per site visit.
When you have made the SWF:s you need, just add a few lines of sIFR code into the web page and that’s it.
The following explains the sIFR process in the browser:
- A web page is requested and loaded by the browser.
- If no Flash is detected, the page is drawn as normal.
- If Flash is detected, the HTML element of the page is immediately given the class “hasFlash”. This effectively hides all text areas to be replaced but keeps their bounds intact. The text is hidden because of a style in the style sheet which only applies to elements that are children of the html.hasFlash element.
- The Flash movie, knowing its textual content, creates a dynamic text field and render the text at a very large size (96pt).
- The Flash movie reduces the point size of the text until it all fits within the overall size of the movie.
sIFR is a clever hack, but none the less a hack. The result is really amazing however. It’s hardly noticeable to the end user and meets all the four requirements I set up in my “what if…” list above so we’re moving to sIFR for the next release of unibet.com.
While sIFR gives us better typography today, it is clearly not the solution for the next 20 years.